| <!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> |
