| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| <style> |
| :invalid { background: rgb(255, 0, 0); } |
| :valid { background: rgb(0, 255, 0); } |
| form:invalid input[type=submit] { background-color: rgb(127, 0, 0); } |
| form: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 forms'); |
| |
| 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 = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>'; |
| var form1 = $('form1'); |
| var input1 = $('input1'); |
| var input2 = $('input2'); |
| var sub1 = $('sub1'); |
| shouldBe('backgroundOf(form1)', 'invalidColor'); |
| shouldBe('backgroundOf(sub1)', 'subInvalidColor'); |
| shouldBe('form1.removeChild(input1); backgroundOf(form1)', 'validColor'); |
| shouldBe('backgroundOf(sub1)', 'subValidColor'); |
| shouldBe('form1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); |
| shouldBe('backgroundOf(sub1)', 'subInvalidColor'); |
| shouldBe('input1.setAttribute("value", "a"); backgroundOf(form1)', 'validColor'); |
| shouldBe('backgroundOf(sub1)', 'subValidColor'); |
| shouldBe('input2.setAttribute("value", ""); backgroundOf(form1)', 'invalidColor'); |
| shouldBe('backgroundOf(sub1)', 'subInvalidColor'); |
| debug('') |
| |
| debug('Disabling and marking inputs readonly by a DOM tree mutation:'); |
| parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value=a><input type=submit id=sub1></form>'; |
| var form1 = $('form1'); |
| var input1 = $('input1'); |
| var sub1 = $('sub1'); |
| shouldBe('backgroundOf(form1)', 'invalidColor'); |
| shouldBe('backgroundOf(sub1)', 'subInvalidColor'); |
| shouldBe('input1.disabled=1; backgroundOf(form1)', 'validColor'); |
| shouldBe('backgroundOf(sub1)', 'subValidColor'); |
| shouldBe('input1.disabled=0; backgroundOf(form1)', 'invalidColor'); |
| shouldBe('backgroundOf(sub1)', 'subInvalidColor'); |
| shouldBe('input1.setAttribute("readonly", "1"); backgroundOf(form1)', 'validColor'); |
| shouldBe('backgroundOf(sub1)', 'subValidColor'); |
| debug('') |
| |
| debug('Move element under datalist by a DOM tree mutation:'); |
| parent.innerHTML = '<form id=form1></form><datalist id=dl1></datalist><input type=text id=input1 required form=form1>'; |
| var form1 = $('form1'); |
| var input1 = $('input1'); |
| var dl1 = $('dl1'); |
| shouldBe('backgroundOf(form1)', 'invalidColor'); |
| shouldBe('parent.removeChild(input1); backgroundOf(form1)', 'validColor'); |
| shouldBe('dl1.appendChild(input1); backgroundOf(form1)', 'validColor'); |
| shouldBe('parent.appendChild(input1); backgroundOf(form1)', 'invalidColor'); |
| debug('') |
| |
| debug('Adding a required text input that is not a direct child of the form:'); |
| parent.innerHTML = '<form id=form1></form>'; |
| var form1 = $('form1'); |
| shouldBe('backgroundOf(form1)', 'validColor'); |
| var div1 = document.createElement('div'); |
| var input1 = document.createElement('input'); |
| input1.setAttribute('type', 'text'); |
| input1.setAttribute('required', ''); |
| form1.appendChild(div1); |
| shouldBe('div1.appendChild(input1); backgroundOf(form1)', 'invalidColor'); |
| debug(''); |
| |
| debug('Render multiple forms and reassign an invalid input from one to another:'); |
| parent.innerHTML = '<form id=form1><input type=text id=input1 required><input type=text id=input2 required value="a"></form>' |
| + '<form id=form2><input type=text id=input3><input type=text id=input4 required value="a"></form>' |
| + '<form id=form3></form>'; |
| shouldBe('backgroundOf($("form1"))', 'invalidColor'); |
| shouldBe('backgroundOf($("form2"))', 'validColor'); |
| shouldBe('backgroundOf($("form3"))', 'validColor'); |
| var input1 = $('input1'); |
| input1.setAttribute("form", "form3"); |
| shouldBe('backgroundOf($("form1"))', 'validColor'); |
| shouldBe('backgroundOf($("form3"))', 'invalidColor'); |
| debug(''); |
| |
| debug('Ensure that invalid event was not triggered on style evaluation:'); |
| var val = '0'; |
| parent.innerHTML = '<form id=form1><input type=text id=input1 required oninvalid="val=\'1\';"></form>'; |
| var form1 = $('form1'); |
| shouldBe('backgroundOf(form1)', 'invalidColor'); |
| shouldBeEqualToString('val', '0'); |
| shouldBeEqualToString('form1.checkValidity(); val', '1'); |
| debug(''); |
| |
| parent.innerHTML = ''; |
| </script> |
| </body> |
| </html> |
