Chromium Code Reviews Chromium Code Reviews
Issue 195093004:
Use invalidation sets for some pseudo elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/css/dynamic-class-pseudo-elements.html |
| diff --git a/LayoutTests/fast/css/dynamic-class-pseudo-elements.html b/LayoutTests/fast/css/dynamic-class-pseudo-elements.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..19c6f160d1b17c2778e9c79f2379a768db84cf8c |
| --- /dev/null |
| +++ b/LayoutTests/fast/css/dynamic-class-pseudo-elements.html |
| @@ -0,0 +1,88 @@ |
| +<!DOCTYPE html> |
| +<script src="../../resources/js-test.js"></script> |
| +<style> |
| +.a1 .b1::before { background-color: green; content: "X" } |
| +.a2 .b2::after { background-color: green; content: "X" } |
| +.a3 .b3::first-line { background-color: green } |
| +.a4 .b4::first-letter { background-color: green } |
| + |
| +/* workaround for issue 351322 */ |
| +.b3::first-line { background-color: transparent } |
| +</style> |
| +<div id="t1"> |
| + <div class="b1" id="r1"> < Background of 'X' should be green</div> |
| + <span></span><span></span><span></span><span></span><span></span><span></span> |
| +</div> |
| +<div id="t2"> |
| + <div class="b2" id="r2">Background of 'X' should be green > </div> |
| + <span></span><span></span><span></span><span></span><span></span><span></span> |
| +</div> |
| +<div id="t3"> |
| + <div class="b3" id="r3">Background should be green</div> |
| + <span></span><span></span><span></span><span></span><span></span><span></span> |
| +</div> |
| +<div id="t4"> |
| + <div class="b4" id="r4">Background of first letter should be green</div> |
| + <span></span><span></span><span></span><span></span><span></span><span></span> |
| +</div> |
| +<script> |
| +description("Change classes affecting pseudo elements") |
| + |
| +function forceLayout() { |
| + document.body.offsetLeft; |
| +} |
| + |
| +document.body.offsetTop; // force style recalc. |
| + |
| +var transparent = 'rgba(0, 0, 0, 0)'; |
| +var green = 'rgb(0, 128, 0)'; |
| + |
| +var t1 = document.getElementById("t1"); |
| +var r1 = document.getElementById("r1"); |
| +shouldBe("getComputedStyle(r1, '::before').backgroundColor", "transparent"); |
| + |
| +forceLayout(); |
| +t1.className = "a1"; |
| + |
| +if (window.internals) |
| + shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3"); |
| + |
| +shouldBe("getComputedStyle(r1, '::before').backgroundColor", "green"); |
| + |
| +var t2 = document.getElementById("t2"); |
| +var r2 = document.getElementById("r2"); |
| +shouldBe("getComputedStyle(r2, '::after').backgroundColor", "transparent"); |
| + |
| +forceLayout(); |
| +t2.className = "a2"; |
| + |
| +if (window.internals) |
| + shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3"); |
| + |
| +shouldBe("getComputedStyle(r2, '::after').backgroundColor", "green"); |
| + |
| +var t3 = document.getElementById("t3"); |
| +var r3 = document.getElementById("r3"); |
| +shouldBe("getComputedStyle(r3, '::first-line').backgroundColor", "transparent"); |
| + |
| +forceLayout(); |
| +t3.className = "a3"; |
| + |
| +if (window.internals) |
| + shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "9"); |
| + |
| +shouldBe("getComputedStyle(r3, '::first-line').backgroundColor", "green"); |
| + |
| +var t4 = document.getElementById("t4"); |
| +var r4 = document.getElementById("r4"); |
| +shouldBe("getComputedStyle(r4, '::first-letter').backgroundColor", "transparent"); |
| + |
| +forceLayout(); |
| +t4.className = "a4"; |
| + |
| +if (window.internals) |
| + shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "8"); |
|
rune
2014/03/12 14:56:07
This is 8 and not 9 because the ::first-letter pse
|
| + |
| +document.body.offsetLeft; // workaround for issue 351308 |
| +shouldBe("getComputedStyle(r4, '::first-letter').backgroundColor", "green"); |
| +</script> |
