| <!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"> |
| <fieldset class="fieldset1"> |
| </fieldset> |
| <fieldset class="fieldset2" disabled> |
| </fieldset> |
| </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 fieldset.'); |
| |
| 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', 'fieldset2']); |
| |
| debug(''); |
| debug("Add input1 to fieldset1."); |
| modifyTree(function(root) { |
| var input1 = document.createElement('input'); |
| input1.className = 'input1'; |
| root.querySelector('.fieldset1').appendChild(input1); |
| }); |
| testStyle(['fieldset1', 'input1', 'fieldset2']); |
| |
| debug(''); |
| debug("Disable input1."); |
| modifyTree(function(root) { |
| root.querySelector('.input1').setAttribute('disabled', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Re-enable input1."); |
| modifyTree(function(root) { |
| root.querySelector('.input1').removeAttribute('disabled'); |
| }); |
| testStyle(['fieldset1', 'input1', 'fieldset2']); |
| |
| debug(''); |
| debug("Make input1 readonly."); |
| modifyTree(function(root) { |
| root.querySelector('.input1').setAttribute('readonly', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Add input2 to fieldset2."); |
| modifyTree(function(root) { |
| var input2 = document.createElement('input'); |
| input2.className = 'input2'; |
| root.querySelector('.fieldset2').appendChild(input2); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Disable input2."); |
| modifyTree(function(root) { |
| root.querySelector('.input2').setAttribute('disabled', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Re-enable input2."); |
| modifyTree(function(root) { |
| root.querySelector('.input2').removeAttribute('disabled'); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Make input2 readonly."); |
| modifyTree(function(root) { |
| root.querySelector('.input2').setAttribute('readonly', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Add input3 to fieldset1."); |
| modifyTree(function(root) { |
| var input3 = document.createElement('input'); |
| input3.className = 'input3'; |
| input3.setAttribute('required', ''); |
| root.querySelector('.fieldset1').appendChild(input3); |
| }); |
| testStyle(['fieldset2']); |
| |
| debug(''); |
| debug("Disable input3."); |
| modifyTree(function(root) { |
| root.querySelector('.input3').setAttribute('disabled', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Re-enable input3."); |
| modifyTree(function(root) { |
| root.querySelector('.input3').removeAttribute('disabled'); |
| }); |
| testStyle(['fieldset2']); |
| |
| debug(''); |
| debug("Make input3 readonly."); |
| modifyTree(function(root) { |
| root.querySelector('.input3').setAttribute('readonly', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Add input4 to fieldset2."); |
| modifyTree(function(root) { |
| var input4 = document.createElement('input'); |
| input4.className = 'input4'; |
| input4.setAttribute('required', ''); |
| root.querySelector('.fieldset2').appendChild(input4); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Disable input4."); |
| modifyTree(function(root) { |
| root.querySelector('.input4').setAttribute('disabled', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Re-enable input4."); |
| modifyTree(function(root) { |
| root.querySelector('.input4').removeAttribute('disabled'); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| debug(''); |
| debug("Make input4 readonly."); |
| modifyTree(function(root) { |
| root.querySelector('.input4').setAttribute('readonly', ''); |
| }); |
| testStyle(['fieldset1', 'fieldset2']); |
| |
| // Remove the content otherwise it will appear in the results. |
| withRenderer.style.display = 'none'; |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
