| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| :matches(#with-renderer, #without-renderer) * { |
| background-color: rgb(1, 2, 3); |
| } |
| :matches(#with-renderer, #without-renderer) :valid { |
| background-color: rgb(4, 5, 6); |
| } |
| </style> |
| </head> |
| <body> |
| <template id="test-source"> |
| <form class="form1"> |
| <div class="div1"> |
| <fieldset class="fieldset1"> |
| <div class="div2"> |
| <input class="input1" required value="valid"> |
| <input class="input2" type="button" required value="valid"> |
| <input class="input3" type="hidden" required value="valid"> |
| <input class="input4" type="email" required value="awesome@webkit.org"> |
| <input class="input5" type="password" required value="valid"> |
| <button class="button1">Base button</button> |
| <button class="button2" type="submit">Submit button</button> |
| </div> |
| </fieldset> |
| <textarea class="textarea1" required></textarea> |
| <input class="input6" required> |
| <input class="input7" type="button" required> |
| <input class="input8" type="hidden" required> |
| <input class="input9" type="email" required> |
| <input class="input10" type="password" required> |
| <button class="button3">Base button</button> |
| <button class="button4" type="submit">Submit button</button> |
| </div> |
| </form> |
| </template> |
| <div id="with-renderer"></div> |
| <div id="without-renderer" style="display:none;"></div> |
| </body> |
| <script> |
| description('Test style update for :valid applied on a form.'); |
| |
| var withRenderer = document.getElementById("with-renderer"); |
| var withoutRenderer = document.getElementById("without-renderer"); |
| var source = document.getElementById("test-source").content; |
| |
| withRenderer.appendChild(source.cloneNode(true)); |
| withoutRenderer.appendChild(source.cloneNode(true)); |
| |
| function testStyleAtId(rootId, matchedClass) { |
| var allElements = document.getElementById(rootId).querySelectorAll('*'); |
| for (var i = 0; i < allElements.length; ++i) { |
| var expectedStyle = matchedClass.indexOf(allElements[i].className) >= 0 ? 'rgb(4, 5, 6)' : 'rgb(1, 2, 3)'; |
| shouldBeEqualToString('getComputedStyle(document.getElementById("' + rootId + '").querySelector(".' + allElements[i].className + '")).backgroundColor', expectedStyle); |
| } |
| } |
| |
| function testStyle(matchedClass) { |
| testStyleAtId('with-renderer', matchedClass); |
| testStyleAtId('without-renderer', matchedClass); |
| } |
| |
| function modifyTree(updateFunction) { |
| updateFunction(withRenderer); |
| updateFunction(withoutRenderer); |
| } |
| |
| debug(''); |
| debug('Initial state'); |
| testStyle(['fieldset1', 'input1', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']); |
| |
| debug(''); |
| debug("Change the type of input3 to something that validates."); |
| modifyTree(function(root) { |
| root.querySelector('.input3').type = "search"; |
| }); |
| testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']); |
| |
| debug(''); |
| debug("Change the type of input7 to something that validates."); |
| modifyTree(function(root) { |
| root.querySelector('.input7').type = "search"; |
| }); |
| testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']); |
| |
| debug(''); |
| debug("Change the type of input9 to something that does not validate."); |
| modifyTree(function(root) { |
| root.querySelector('.input9').type = "hidden"; |
| }); |
| testStyle(['fieldset1', 'input1', 'input3', 'input4', 'input5', 'button1', 'button2', 'button3', 'button4']); |
| |
| debug(''); |
| debug("Change the type of input5 to something that does not validate."); |
| modifyTree(function(root) { |
| root.querySelector('.input5').type = "button"; |
| }); |
| testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']); |
| |
| // Change everything in the second half of controls without validation, eventually, form1 should validate. |
| debug(''); |
| debug("Change the type of input6 to something that does not validate."); |
| modifyTree(function(root) { |
| root.querySelector('.input6').type = "button"; |
| }); |
| testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']); |
| |
| debug(''); |
| debug("Change the type of input7 to something that does not validate."); |
| modifyTree(function(root) { |
| root.querySelector('.input7').type = "reset"; |
| }); |
| testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']); |
| |
| debug(''); |
| debug("Change the type of input10 to something that does not validate."); |
| modifyTree(function(root) { |
| root.querySelector('.input10').type = "reset"; |
| }); |
| testStyle(['fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']); |
| |
| debug(''); |
| debug("Disable the text area."); |
| modifyTree(function(root) { |
| root.querySelector('.textarea1').setAttribute('disabled', ''); |
| }); |
| testStyle(['form1', 'fieldset1', 'input1', 'input3', 'input4', 'button1', 'button2', 'button3', 'button4']); |
| |
| // Remove the content otherwise it will appear in the results. |
| withRenderer.style.display = 'none'; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
