| <!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"> |
| </form> |
| <form class="form2"> |
| <fieldset class="form2-disabled-fieldset" disabled> |
| </fieldset> |
| </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(['form1', 'form2', 'form2-disabled-fieldset']); |
| |
| debug(''); |
| debug("Add input1 to form1."); |
| modifyTree(function(root) { |
| var input1 = document.createElement('input'); |
| input1.className = 'input1'; |
| root.querySelector('.form1').appendChild(input1); |
| }); |
| testStyle(['form1', 'input1', 'form2', 'form2-disabled-fieldset']); |
| |
| debug(''); |
| debug("Add input2 to form1."); |
| modifyTree(function(root) { |
| var input2 = document.createElement('input'); |
| input2.className = 'input2'; |
| input2.setAttribute('required', ''); |
| root.querySelector('.form1').appendChild(input2); |
| }); |
| testStyle(['input1', 'form2', 'form2-disabled-fieldset']); |
| |
| debug(''); |
| debug("Add input3 to form1."); |
| modifyTree(function(root) { |
| var input3 = document.createElement('input'); |
| input3.className = 'input3'; |
| input3.setAttribute('required', ''); |
| input3.value = "valid"; |
| root.querySelector('.form1').appendChild(input3); |
| }); |
| testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']); |
| |
| debug(''); |
| debug("Add input4 to form2."); |
| modifyTree(function(root) { |
| var input4 = document.createElement('input'); |
| input4.className = 'input4'; |
| root.querySelector('.form2-disabled-fieldset').appendChild(input4); |
| }); |
| testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']); |
| |
| debug(''); |
| debug("Add input5 to form2."); |
| modifyTree(function(root) { |
| var input5 = document.createElement('input'); |
| input5.className = 'input5'; |
| input5.setAttribute('required', ''); |
| root.querySelector('.form2-disabled-fieldset').appendChild(input5); |
| }); |
| testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']); |
| |
| debug(''); |
| debug("Add input6 to form2."); |
| modifyTree(function(root) { |
| var input6 = document.createElement('input'); |
| input6.className = 'input6'; |
| input6.setAttribute('required', ''); |
| input6.value = "valid" |
| root.querySelector('.form2-disabled-fieldset').appendChild(input6); |
| }); |
| testStyle(['input1', 'input3', 'form2', 'form2-disabled-fieldset']); |
| |
| debug(''); |
| debug("Enable form2."); |
| modifyTree(function(root) { |
| root.querySelector('.form2-disabled-fieldset').removeAttribute('disabled'); |
| }); |
| testStyle(['input1', 'input3', 'input4', 'input6']); |
| |
| debug(''); |
| debug("Add the disabled attribute on form1 (forms can't be disabled)."); |
| modifyTree(function(root) { |
| root.querySelector('.form1').setAttribute('disabled', ''); |
| }); |
| testStyle(['input1', 'input3', 'input4', 'input6']); |
| |
| debug(''); |
| debug("Remove input1"); |
| modifyTree(function(root) { |
| var input = root.querySelector('.input1'); |
| input.parentNode.removeChild(input); |
| }); |
| testStyle(['input1', 'input3', 'input4', 'input6']); |
| |
| debug(''); |
| debug("Remove input2"); |
| modifyTree(function(root) { |
| var input = root.querySelector('.input2'); |
| input.parentNode.removeChild(input); |
| }); |
| testStyle(['form1', 'input1', 'input3', 'input4', 'input6']); |
| |
| debug(''); |
| debug("Remove input3"); |
| modifyTree(function(root) { |
| var input = root.querySelector('.input3'); |
| input.parentNode.removeChild(input); |
| }); |
| testStyle(['form1', 'input4', 'input6']); |
| |
| debug(''); |
| debug("Remove input4"); |
| modifyTree(function(root) { |
| var input = root.querySelector('.input4'); |
| input.parentNode.removeChild(input); |
| }); |
| testStyle(['form1', 'input6']); |
| |
| debug(''); |
| debug("Remove input5"); |
| modifyTree(function(root) { |
| var input = root.querySelector('.input5'); |
| input.parentNode.removeChild(input); |
| }); |
| testStyle(['form1', 'form2', 'form2-disabled-fieldset', 'input6']); |
| |
| debug(''); |
| debug("Remove input6"); |
| modifyTree(function(root) { |
| var input = root.querySelector('.input6'); |
| input.parentNode.removeChild(input); |
| }); |
| testStyle(['form1', 'form2', 'form2-disabled-fieldset']); |
| |
| |
| // Remove the content otherwise it will appear in the results. |
| withRenderer.style.display = 'none'; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
