getComputedStyle-with-before-element.html

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
#t1::before { color: green }
#t2::before { display: none; content: "X"; color: green; }
#t3::before { display: none; color: green; }
#t4 { display: none; }
#t4::before { content: "X"; color: green; }
#t5 { display: none; }
#t5::before { color: green; }
#t6 { color: green; }
</style>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>
<div id="t4"></div>
<div id="t5"></div>
<div id="t6"></div>
<script>
description("Check getComputedStyle for ::before with various combinations of display and content.");

var expectedDisplay = [
    "'inline'",
    "'none'",
    "'none'",
    "'inline'",
    "'inline'",
    "'inline'"
];

for (var i=0; i<6; i++) {

    var computed = getComputedStyle(document.getElementById("t"+(i+1)), "::before");

    shouldBe("computed.color", "'rgb(0, 128, 0)'");
    shouldBe("computed.display", expectedDisplay[i]);
}

</script>

chromium/third_party/blink/web_tests/fast/css/getComputedStyle/getComputedStyle-with-before-element.html