| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| ::-webkit-file-upload-button { background-color: rgb(192, 192, 192) } |
| .theme ::-webkit-file-upload-button { background-color: green } |
| .other #t2 { background-color: lime } |
| </style> |
| <div id="t"> |
| <div></div> |
| <div></div> |
| <div id="t2"></div> |
| <div></div> |
| <div></div> |
| <input type="file"></input> |
| </div> |
| <script> |
| description("Check that targeted class invalidation works for custom pseudo elements."); |
| |
| shouldBeTrue("!!window.internals"); |
| |
| if (window.internals) { |
| var gray = "rgb(192, 192, 192)"; |
| var green = "rgb(0, 128, 0)"; |
| var lime = "rgb(0, 255, 0)"; |
| |
| fileUploadButton = internals.shadowRoot(document.querySelector("input")).firstChild; |
| t2 = document.getElementById("t2"); |
| |
| shouldBe("getComputedStyle(fileUploadButton, null).backgroundColor", "gray"); |
| |
| document.body.offsetLeft; // force style recalc. |
| |
| document.getElementById("t").className = "theme"; |
| document.getElementById("t").classList.add("other"); |
| |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2"); |
| shouldBe("getComputedStyle(fileUploadButton, null).backgroundColor", "green"); |
| shouldBe("getComputedStyle(t2, null).backgroundColor", "lime"); |
| } |
| </script> |
