| <!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> |
