| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| testcase { |
| background-color: rgb(1, 2, 3); |
| } |
| testcase:not(:empty) { |
| background-color: white; |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <testcase id="with-renderer"></testcase> |
| </div> |
| <div style="display:none;"> |
| <testcase id="without-renderer"></testcase> |
| </div> |
| </body> |
| <script> |
| description('Test the style update with the :empty pseudo class.'); |
| |
| var testCaseWithRender = document.getElementById("with-renderer"); |
| var testCaseWithoutRenderer = document.getElementById("without-renderer"); |
| |
| debug("Initial state is empty."); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| |
| debug("Adding a comment does not change the :empty state."); |
| testCaseWithRender.appendChild(document.createComment("WebKit!")); |
| testCaseWithoutRenderer.appendChild(document.createComment("WebKit!")); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| |
| debug("Add an element as child make updates :empty."); |
| var elementForCaseWithRenderer = document.createElement('div'); |
| var elementForCaseWithoutRenderer = document.createElement('div'); |
| testCaseWithRender.appendChild(elementForCaseWithRenderer); |
| testCaseWithoutRenderer.appendChild(elementForCaseWithoutRenderer); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| |
| debug("Adding an empty text node, this is still not empty because of the element."); |
| testCaseWithRender.appendChild(document.createTextNode('')); |
| testCaseWithoutRenderer.appendChild(document.createTextNode('')); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| |
| debug("Removing the elements previously added should restore the :empty state."); |
| testCaseWithRender.removeChild(elementForCaseWithRenderer); |
| testCaseWithoutRenderer.removeChild(elementForCaseWithoutRenderer); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| |
| debug("Adding a non empty text node makes the state non empty."); |
| testCaseWithRender.appendChild(document.createTextNode('WebKit!')); |
| testCaseWithoutRenderer.appendChild(document.createTextNode('WebKit!')); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).backgroundColor', 'rgb(255, 255, 255)'); |
| |
| debug("Removing the last text child, back to being empty."); |
| testCaseWithRender.removeChild(testCaseWithRender.lastChild); |
| testCaseWithoutRenderer.removeChild(testCaseWithoutRenderer.lastChild); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("with-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| shouldBeEqualToString('getComputedStyle(document.getElementById("without-renderer")).backgroundColor', 'rgb(1, 2, 3)'); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
