<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test-pre.js"></script>
<style>
:invalid { background: rgb(255, 0, 0); }
:valid { background: rgb(0, 0, 255); }
</style>
</head>
<body>
<script>
description('Check if :valid/:invalid CSS pseudo selectors are lively applied');

function $(id) {
    return document.getElementById(id);
}

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

var invalidColor = 'rgb(255, 0, 0)';
var validColor = 'rgb(0, 0, 255)';

var parent = document.createElement('div');
document.body.appendChild(parent);

debug('Removing a checked radio button from a required radio button group by a DOM tree mutation:');
parent.innerHTML = '<input type=radio name=group1 required id=radio1>' +
    '<input type=radio name=group1 checked id=radio2>';
shouldBe('backgroundOf($("radio1"))', 'validColor');
shouldBe('parent.removeChild($("radio2")); backgroundOf($("radio1"))', 'invalidColor');
parent.innerHTML = '<input type=radio name=group1 required checked id=radio1>' +
    '<input type=radio name=group1 required id=radio2>' +
    '<input type=radio name=group1 required id=radio3>';
var radio2 = $('radio2');
shouldBeFalse('$("radio1").remove(); radio2.matches(":valid")');
shouldBeFalse('radio2.remove(); radio2.matches(":valid")');
debug('');

debug('Removing a checked radio button from a required radio button group by name attribute change:');
parent.innerHTML = '<input type=radio name=group1 required id=radio1>' +
    '<input type=radio name=group1 checked id=radio2>';
shouldBe('$("radio2").name = "group2"; backgroundOf($("radio1"))', 'invalidColor');
debug('');

debug('Removing a checked radio button from a required radio button group by type change:');
parent.innerHTML = '<input type=radio name=group1 required id=radio1>' +
    '<input type=radio name=group1 checked id=radio2>';
shouldBe('$("radio2").type = "text"; backgroundOf($("radio1"))', 'invalidColor');
debug('');

debug('Make a radio button group required by required attribute change:');
parent.innerHTML = '<input type=radio name=group1 id=radio1>' +
    '<input type=radio name=group1 id=radio2>';
shouldBe('backgroundOf($("radio1"))', 'validColor');
shouldBe('backgroundOf($("radio2"))', 'validColor');
shouldBe('$("radio1").required = true; backgroundOf($("radio1"))', 'invalidColor');
shouldBe('backgroundOf($("radio2"))', 'invalidColor');
debug('');

debug('Make a radio button group not required by required attribute change:');
parent.innerHTML = '<input type=radio required name=group1 id=radio1>' +
    '<input type=radio name=group1 id=radio2>';
shouldBe('backgroundOf($("radio1"))', 'invalidColor');
shouldBe('backgroundOf($("radio2"))', 'invalidColor');
shouldBe('$("radio1").required = false; backgroundOf($("radio1"))', 'validColor');
shouldBe('backgroundOf($("radio2"))', 'validColor');
debug('');


debug('Removing one of multiple required attributes:');
parent.innerHTML = '<input type=radio required name=group1 id=radio1>' +
    '<input type=radio required name=group1 id=radio2>';
shouldBe('backgroundOf($("radio1"))', 'invalidColor');
shouldBe('backgroundOf($("radio2"))', 'invalidColor');
shouldBe('$("radio1").required = false; backgroundOf($("radio1"))', 'invalidColor');
shouldBe('backgroundOf($("radio2"))', 'invalidColor');
debug('');

debug('Adding a radio button with the required attribute to a radio button group:');
parent.innerHTML = '<input type=radio name=group1 id=radio1>';
shouldBe('backgroundOf($("radio1"))', 'validColor');
var requiredRadioButton = document.createElement('input');
requiredRadioButton.type = 'radio';
requiredRadioButton.name = 'group1';
requiredRadioButton.required = true;
shouldBe('parent.appendChild(requiredRadioButton); backgroundOf($("radio1"))', 'invalidColor');
shouldBe('backgroundOf(requiredRadioButton)', 'invalidColor');
debug('');

debug('Removing a radio button with the required attribute from a radio button group:');
shouldBe('parent.removeChild(requiredRadioButton); backgroundOf($("radio1"))', 'validColor');
debug('');

parent.innerHTML = '';
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>
</html>