101 lines
4.1 KiB
HTML
101 lines
4.1 KiB
HTML
<!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")');
|
|
shouldBeTrue('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>
|