125 lines
5.3 KiB
HTML
125 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test.js"></script>
|
|
<style>
|
|
:invalid { background: rgb(255, 0, 0); }
|
|
:valid { background: rgb(0, 255, 0); }
|
|
fieldset:invalid input[type=submit] { background-color: rgb(127, 0, 0); }
|
|
fieldset:valid input[type=submit] { background-color: rgb(0, 127, 0); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
description('Check if :valid/:invalid CSS pseudo selectors are lively applied for fieldsets');
|
|
|
|
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, 255, 0)';
|
|
var subInvalidColor = 'rgb(127, 0, 0)';
|
|
var subValidColor = 'rgb(0, 127, 0)';
|
|
|
|
var parent = document.createElement('div');
|
|
document.body.appendChild(parent);
|
|
|
|
debug('Removing and adding required text inputs and modifying their value by a DOM tree mutation:');
|
|
parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
|
|
var fieldset1 = $('fieldset1');
|
|
var input1 = $('input1');
|
|
var input2 = $('input2');
|
|
var sub1 = $('sub1');
|
|
shouldBe('backgroundOf(fieldset1)', 'invalidColor');
|
|
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
|
shouldBe('fieldset1.removeChild(input1); backgroundOf(fieldset1)', 'validColor');
|
|
shouldBe('backgroundOf(sub1)', 'subValidColor');
|
|
shouldBe('fieldset1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
|
|
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
|
shouldBe('input1.setAttribute("value", "a"); backgroundOf(fieldset1)', 'validColor');
|
|
shouldBe('backgroundOf(sub1)', 'subValidColor');
|
|
shouldBe('input2.setAttribute("value", ""); backgroundOf(fieldset1)', 'invalidColor');
|
|
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
|
debug('')
|
|
|
|
debug('Disabling and marking inputs readonly by a DOM tree mutation:');
|
|
parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></fieldset>';
|
|
var fieldset1 = $('fieldset1');
|
|
var input1 = $('input1');
|
|
var sub1 = $('sub1');
|
|
shouldBe('backgroundOf(fieldset1)', 'invalidColor');
|
|
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
|
shouldBe('input1.disabled=1; backgroundOf(fieldset1)', 'validColor');
|
|
shouldBe('backgroundOf(sub1)', 'subValidColor');
|
|
shouldBe('input1.disabled=0; backgroundOf(fieldset1)', 'invalidColor');
|
|
shouldBe('backgroundOf(sub1)', 'subInvalidColor');
|
|
shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(fieldset1)', 'validColor');
|
|
shouldBe('backgroundOf(sub1)', 'subValidColor');
|
|
debug('')
|
|
|
|
debug('Adding a required text input that is not a direct child of the fieldset:');
|
|
parent.innerHTML = '<fieldset id=fieldset1></fieldset>';
|
|
var fieldset1 = $('fieldset1');
|
|
shouldBe('backgroundOf(fieldset1)', 'validColor');
|
|
var div1 = document.createElement('div');
|
|
var input1 = document.createElement('input');
|
|
input1.setAttribute('type', 'text');
|
|
input1.setAttribute('required', '');
|
|
fieldset1.appendChild(div1);
|
|
shouldBe('div1.appendChild(input1); backgroundOf(fieldset1)', 'invalidColor');
|
|
debug('');
|
|
|
|
debug('Nested fieldsets:');
|
|
parent.innerHTML = '<fieldset id=fieldset0>'
|
|
+ '<fieldset id=fieldset1><input type=text id=input1 required></fieldset>'
|
|
+ '<fieldset id=fieldset2><input type=text id=input2></fieldset>'
|
|
+ '</fieldset>';
|
|
shouldBe('backgroundOf($("fieldset0"))', 'invalidColor');
|
|
shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
|
|
shouldBe('backgroundOf($("fieldset2"))', 'validColor');
|
|
var input1 = $('input1');
|
|
shouldBe('input1.setAttribute("value", "v"); backgroundOf($("fieldset0"))', 'validColor');
|
|
shouldBe('backgroundOf($("fieldset1"))', 'validColor');
|
|
shouldBe('backgroundOf($("fieldset2"))', 'validColor');
|
|
var input2 = $('input2');
|
|
shouldBe('input2.setAttribute("required", ""); backgroundOf($("fieldset0"))', 'invalidColor');
|
|
shouldBe('backgroundOf($("fieldset1"))', 'validColor');
|
|
shouldBe('backgroundOf($("fieldset2"))', 'invalidColor');
|
|
debug('');
|
|
|
|
debug('Render multiple fieldsets and move an invalid input from one to another:');
|
|
parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required><input type=text id=input2 required value="a"></fieldset>'
|
|
+ '<fieldset id=fieldset2><input type=text id=input3><input type=text id=input4 required value="a"></fieldset>'
|
|
+ '<fieldset id=fieldset3></fieldset>';
|
|
shouldBe('backgroundOf($("fieldset1"))', 'invalidColor');
|
|
shouldBe('backgroundOf($("fieldset2"))', 'validColor');
|
|
shouldBe('backgroundOf($("fieldset3"))', 'validColor');
|
|
var input1 = $('input1');
|
|
var fieldset1 = $('fieldset1');
|
|
var fieldset3 = $('fieldset3');
|
|
fieldset1.removeChild(input1);
|
|
fieldset3.appendChild(input1);
|
|
shouldBe('backgroundOf($("fieldset1"))', 'validColor');
|
|
shouldBe('backgroundOf($("fieldset3"))', 'invalidColor');
|
|
debug('');
|
|
|
|
debug('Ensure that invalid event was not triggered on style evaluation:');
|
|
var val = '0';
|
|
parent.innerHTML = '<fieldset id=fieldset1><input type=text id=input1 required oninvalid="val=\'1\';"></fieldset>';
|
|
var fieldset1 = $('fieldset1');
|
|
var input1 = $('input1');
|
|
shouldBe('backgroundOf(fieldset1)', 'invalidColor');
|
|
shouldBeEqualToString('val', '0');
|
|
shouldBeEqualToString('input1.checkValidity(); val', '1');
|
|
debug('');
|
|
|
|
parent.innerHTML = '';
|
|
</script>
|
|
</body>
|
|
</html>
|