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| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <script src="../../resources/js-test.js"></script> | |
| 3 <style> | |
| 4 .a1 .b1::before { background-color: green; content: "X" } | |
| 5 .a2 .b2::after { background-color: green; content: "X" } | |
| 6 .a3 .b3::first-line { background-color: green } | |
| 7 .a4 .b4::first-letter { background-color: green } | |
| 8 | |
| 9 /* workaround for issue 351322 */ | |
| 10 .b3::first-line { background-color: transparent } | |
| 11 </style> | |
| 12 <div id="t1"> | |
| 13 <div class="b1" id="r1"> < Background of 'X' should be green</div> | |
| 14 <span></span><span></span><span></span><span></span><span></span><span></spa n> | |
| 15 </div> | |
| 16 <div id="t2"> | |
| 17 <div class="b2" id="r2">Background of 'X' should be green > </div> | |
| 18 <span></span><span></span><span></span><span></span><span></span><span></spa n> | |
| 19 </div> | |
| 20 <div id="t3"> | |
| 21 <div class="b3" id="r3">Background should be green</div> | |
| 22 <span></span><span></span><span></span><span></span><span></span><span></spa n> | |
| 23 </div> | |
| 24 <div id="t4"> | |
| 25 <div class="b4" id="r4">Background of first letter should be green</div> | |
| 26 <span></span><span></span><span></span><span></span><span></span><span></spa n> | |
| 27 </div> | |
| 28 <script> | |
| 29 description("Change classes affecting pseudo elements") | |
| 30 | |
| 31 function forceLayout() { | |
| 32 document.body.offsetLeft; | |
| 33 } | |
| 34 | |
| 35 document.body.offsetTop; // force style recalc. | |
| 36 | |
| 37 var transparent = 'rgba(0, 0, 0, 0)'; | |
| 38 var green = 'rgb(0, 128, 0)'; | |
| 39 | |
| 40 var t1 = document.getElementById("t1"); | |
| 41 var r1 = document.getElementById("r1"); | |
| 42 shouldBe("getComputedStyle(r1, '::before').backgroundColor", "transparent"); | |
| 43 | |
| 44 forceLayout(); | |
| 45 t1.className = "a1"; | |
| 46 | |
| 47 if (window.internals) | |
| 48 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3"); | |
| 49 | |
| 50 shouldBe("getComputedStyle(r1, '::before').backgroundColor", "green"); | |
| 51 | |
| 52 var t2 = document.getElementById("t2"); | |
| 53 var r2 = document.getElementById("r2"); | |
| 54 shouldBe("getComputedStyle(r2, '::after').backgroundColor", "transparent"); | |
| 55 | |
| 56 forceLayout(); | |
| 57 t2.className = "a2"; | |
| 58 | |
| 59 if (window.internals) | |
| 60 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3"); | |
| 61 | |
| 62 shouldBe("getComputedStyle(r2, '::after').backgroundColor", "green"); | |
| 63 | |
| 64 var t3 = document.getElementById("t3"); | |
| 65 var r3 = document.getElementById("r3"); | |
| 66 shouldBe("getComputedStyle(r3, '::first-line').backgroundColor", "transparent"); | |
| 67 | |
| 68 forceLayout(); | |
| 69 t3.className = "a3"; | |
| 70 | |
| 71 if (window.internals) | |
| 72 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "9"); | |
| 73 | |
| 74 shouldBe("getComputedStyle(r3, '::first-line').backgroundColor", "green"); | |
| 75 | |
| 76 var t4 = document.getElementById("t4"); | |
| 77 var r4 = document.getElementById("r4"); | |
| 78 shouldBe("getComputedStyle(r4, '::first-letter').backgroundColor", "transparent" ); | |
| 79 | |
| 80 forceLayout(); | |
| 81 t4.className = "a4"; | |
| 82 | |
| 83 if (window.internals) | |
| 84 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "8"); | |
|
rune
2014/03/12 14:56:07
This is 8 and not 9 because the ::first-letter pse
| |
| 85 | |
| 86 document.body.offsetLeft; // workaround for issue 351308 | |
| 87 shouldBe("getComputedStyle(r4, '::first-letter').backgroundColor", "green"); | |
| 88 </script> | |
| OLD | NEW |
