third_party/WebKit/LayoutTests/fast/css/dynamic-class-pseudo-elements.html

   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"> &lt; Background of 'X' should be green</div>
  14     <span></span><span></span><span></span><span></span><span></span><span></span>
  15 </div>
  16 <div id="t2">
  17     <div class="b2" id="r2">Background of 'X' should be green &gt; </div>
  18     <span></span><span></span><span></span><span></span><span></span><span></span>
  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></span>
  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></span>
  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()", "2");
  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()", "2");
  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()", "10");
  85
  86 document.body.offsetLeft; // workaround for issue 351308
  87 shouldBe("getComputedStyle(r4, '::first-letter').backgroundColor", "green");
  88 </script>