| <!DOCTYPE html> |
| <script src="../../../resources/js-test.js"></script> |
| <style> |
| .a + .b { color: green; } |
| .c + .d { color: green; } |
| .e { color: green; } |
| </style> |
| <div id="t1"> |
| <div></div> |
| <div class="b"></div> |
| </div> |
| <div id="t2"> |
| <div> |
| <div></div> |
| <div class="d"></div> |
| </div> |
| <div> |
| <div class="e"></div> |
| </div> |
| </div> |
| <div id="t3"> |
| <div> |
| <div></div> |
| <div class="d"></div> |
| </div> |
| <div> |
| <div class="a"></div> |
| <div class="b"></div> |
| </div> |
| </div> |
| <script> |
| description("Check that getComputedStyle causes a style recalc when necessary, and only when necessary."); |
| |
| var green = "rgb(0, 128, 0)"; |
| |
| // Check that sibling recalc for .b is performed before computed style is returned. |
| |
| document.body.offsetTop; |
| document.body.querySelector("#t1 > div").className = "a"; |
| shouldBe("getComputedStyle(document.body.querySelector('#t1 .b')).color", "green", true); |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0"); |
| |
| // No style invalidation or recalc scheduled for an ascendant of .e, and no affected-by-adjacent |
| // bits set on any ascendants, hence we don't need to do a recalc even if a style invalidation |
| // is scheduled for the .c change with adjacent implications. |
| |
| document.body.offsetTop; |
| document.body.querySelector("#t2 > div > div").className = "c"; |
| shouldBe("getComputedStyle(document.body.querySelector('#t2 .e')).color", "green", true); |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| |
| // No style invalidation or recalc scheduled for an ascendant of .b, and even if affected-by-adjacent |
| // bits are set on the ascendant (because of a+b), it doesn't matter since that ascendant does |
| // not have any children that needs style recalc or invalidation. |
| |
| document.body.offsetTop; |
| document.body.querySelector("#t3 > div > div").className = "c"; |
| shouldBe("getComputedStyle(document.body.querySelector('#t3 .b')).color", "green", true); |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| |
| </script> |
