dynamic-class-pseudo-elements.html | Explore in Territory

<!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"> &lt; 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 &gt; </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>
chromium/third_party/blink/web_tests/fast/css/dynamic-class-pseudo-elements.html
