<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<div id="log"></div>
<div id="container"></div>
<style>
button, input, option { background: red; }
button:default, input:default, option:default { background: green; }
</style>
<script>
// TODO(tkent): This should be merged to web-platform-tests/html/semantics/selectors/pseudo-classes/default.html.

var container = document.querySelector('#container');
const DEFAULT = 'rgb(0, 128, 0)';
const NOT_DEFAULT = 'rgb(255, 0, 0)';

function background(id) {
    return document.defaultView.getComputedStyle(document.getElementById(id), null).getPropertyValue('background-color');
}

test(function() {
    container.innerHTML = '<form><input type=submit id=removed><object></object><input type=submit id=second></form>';
    assert_equals(background('removed'), DEFAULT);
    assert_equals(background('second'), NOT_DEFAULT);
    document.querySelector('#removed').type = 'text';
    assert_equals(background('removed'), NOT_DEFAULT);
    assert_equals(background('second'), DEFAULT);

    container.innerHTML = '<form><button type=submit id=removed></button><input type=submit id=second></form>';
    assert_equals(background('removed'), DEFAULT);
    assert_equals(background('second'), NOT_DEFAULT);
    document.querySelector('#removed').type = 'reset';
    assert_equals(background('removed'), NOT_DEFAULT);
    assert_equals(background('second'), DEFAULT);

    container.innerHTML = '<form id=f1><input type=submit id=removed></form><input type=submit id=second form=f1>';
    assert_equals(background('removed'), DEFAULT);
    assert_equals(background('second'), NOT_DEFAULT);
    document.querySelector('#removed').type = 'reset';
    assert_equals(background('removed'), NOT_DEFAULT);
    assert_equals(background('second'), DEFAULT);
}, 'Removing the :default button by updating type attribute should update the default button.');

test(function() {
    container.innerHTML = '<form><input type=submit id=removed><input type=submit id=second></form>';
    assert_equals(background('removed'), DEFAULT);
    assert_equals(background('second'), NOT_DEFAULT);
    document.querySelector('#removed').remove();
    assert_equals(background('second'), DEFAULT);
}, 'Removing the :default button by detaching should update the default button.');

test(function() {
    container.innerHTML = '<input type=submit id=removed form=f1><form id=f1><input type=submit id=second></form>';
    assert_equals(background('removed'), DEFAULT);
    assert_equals(background('second'), NOT_DEFAULT);
    document.querySelector('#removed').removeAttribute('form');
    assert_equals(background('removed'), NOT_DEFAULT);
    assert_equals(background('second'), DEFAULT);
}, 'Removing the :default button by updating form content attribute should update the default button.');

test(function() {
    container.innerHTML = '<form><input type=text id=added><input type=submit id=second></form>';
    assert_equals(background('added'), NOT_DEFAULT);
    assert_equals(background('second'), DEFAULT);
    document.querySelector('#added').type = 'image';
    assert_equals(background('added'), DEFAULT);
    assert_equals(background('second'), NOT_DEFAULT);
}, 'Adding a button by updating type attribute should update the default button.');

test(function() {
    container.innerHTML = '<form><input type=submit id=second></form>';
    assert_equals(background('second'), DEFAULT);
    var button = document.createElement('button');
    button.id = 'added'
    document.querySelector('form').insertBefore(button, document.querySelector('#second'));
    assert_equals(background('added'), DEFAULT);
    assert_equals(background('second'), NOT_DEFAULT);
}, 'Adding a button to a DOM tree should update the default button.');

test(function() {
    container.innerHTML = '<input type=submit id=added><form id=f1><input type=submit id=second></form>';
    assert_equals(background('added'), NOT_DEFAULT);
    assert_equals(background('second'), DEFAULT);
    document.querySelector('#added').setAttribute('form', 'f1');
    assert_equals(background('added'), DEFAULT, 'added button should be default.');
    assert_equals(background('second'), NOT_DEFAULT);
}, 'Adding a button by form content attribute should update the default button.');

test(function() {
    container.innerHTML = '<form><input type=checkbox checked id=c1><input type=text checked id=t1></form>';
    assert_equals(background('c1'), DEFAULT);
    assert_equals(background('t1'), NOT_DEFAULT);
    document.querySelector('#c1').type = 'text';
    document.querySelector('#t1').type = 'checkbox';
    assert_equals(background('c1'), NOT_DEFAULT);
    assert_equals(background('t1'), DEFAULT);
}, 'Updating type attribute of :default checkbox should update default status');

test(function() {
    container.innerHTML = '<form><input type=radio checked id=r1><input type=text checked id=t1></form>';
    assert_equals(background('r1'), DEFAULT);
    assert_equals(background('t1'), NOT_DEFAULT);
    document.querySelector('#r1').type = 'text';
    document.querySelector('#t1').type = 'radio';
    assert_equals(background('r1'), NOT_DEFAULT);
    assert_equals(background('t1'), DEFAULT);
}, 'Updating type attribute of :default radio should update default status');

test(function() {
    container.innerHTML = '<form><input type=checkbox checked id=c1><input type=radio checked id=r1></form>';
    assert_equals(background('c1'), DEFAULT);
    assert_equals(background('r1'), DEFAULT);
    document.querySelector('#c1').defaultChecked = false;
    document.querySelector('#r1').defaultChecked = false;
    assert_equals(background('c1'), NOT_DEFAULT);
    assert_equals(background('r1'), NOT_DEFAULT);
}, 'Updating the checked attribute of :default checkbox or radio should update default status');

test(function() {
    container.innerHTML = '<form><input type=checkbox id=c1><input type=radio id=r1></form>';
    assert_equals(background('c1'), NOT_DEFAULT);
    assert_equals(background('r1'), NOT_DEFAULT);
    if (window.eventSender){
        var checkbox = document.querySelector('#c1');
        checkbox.focus();
        eventSender.keyDown(' ');
        assert_equals(checkbox.checked, true);
        assert_equals(background('c1'), NOT_DEFAULT);

        var radio = document.querySelector('#r1');
        radio.focus();
        eventSender.keyDown(' ');
        assert_equals(radio.checked, true);
        assert_equals(background('r1'), NOT_DEFAULT);
    }
    document.querySelector('#c1').setAttribute('checked', 'checked');
    document.querySelector('#r1').setAttribute('checked', 'checked');
    assert_equals(background('c1'), DEFAULT);
    assert_equals(background('r1'), DEFAULT);

    document.querySelector('#c1').removeAttribute('checked');
    document.querySelector('#r1').removeAttribute('checked');
    assert_equals(background('c1'), NOT_DEFAULT);
    assert_equals(background('r1'), NOT_DEFAULT);
}, 'Dynamically updating checked status or setting checked attribute should reflect correct default status');

test(function() {
    container.innerHTML = '<form><select><option selected id=o1>1</option><option id=o2>2</option></select></form>';
    assert_equals(background('o1'), DEFAULT);
    assert_equals(background('o2'), NOT_DEFAULT);
    document.querySelector('#o1').defaultSelected = false;
    document.querySelector('#o2').defaultSelected = true;
    assert_equals(background('o1'), NOT_DEFAULT);
    assert_equals(background('o2'), DEFAULT);
}, 'Updating the selected attribute of :default option element should update default status');

test(function() {
    container.innerHTML = '<form><select><option id=o1></option><option id=o2></option</select></form>';
    assert_equals(background('o1'), NOT_DEFAULT);
    document.querySelector('#o1').selected = true;
    assert_equals(background('o1'), NOT_DEFAULT);
    document.querySelector('#o1').setAttribute('selected', 'selected');
    assert_equals(background('o1'), DEFAULT);
    document.querySelector('#o1').removeAttribute('selected');
    assert_equals(background('o1'), NOT_DEFAULT);
}, 'Dynamically updating selected status or setting selected attribute should reflect correct default status');

</script>