| <!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()", "2"); |
| |
| 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()", "2"); |
| |
| 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()", "9"); |
| |
| shouldBe("getComputedStyle(r4, '::first-letter').backgroundColor", "green"); |
| </script> |
