LayoutTests/fast/css/getComputedStyle/getComputedStyle-style-resolution.html

   1 <script src="../../../resources/testharness.js"></script>
   2 <script src="../../../resources/testharnessreport.js"></script>
   3 <container>
   4 <subcontainer>
   5 <target>Text</target>
   6 </subcontainer>
   7 </container>
   8 <script>
   9 var target = document.querySelector("target");
  10 var container = document.querySelector("container");
  11 var subcontainer = document.querySelector("subcontainer");
  12 test(() => {
  13      target.offsetLeft;
  14      internals.startTrackingStyleRecalcs();
  15      assert_equals(getComputedStyle(target).backgroundColor, "rgba(0, 0, 0, 0)", "getComputedStyle color is correct");
  16      assert_equals(internals.styleRecalcCount(), 0, "getComputedStyle didn't trigger style resolution");
  17 }, "No style resolution when style is valid.");
  18
  19 test(() => {
  20      target.offsetLeft;
  21      internals.startTrackingStyleRecalcs();
  22      container.style.backgroundColor = "blue";
  23      assert_equals(getComputedStyle(target).backgroundColor, "rgba(0, 0, 0, 0)", "getComputedStyle color is correct");
  24      assert_equals(internals.styleRecalcCount(), 0, "getComputedStyle didn't trigger style resolution");
  25  }, "No style resolution when parent style is invalid and querying non-inherited property.");
  26
  27  test(() => {
  28      target.style.backgroundColor = "inherit";
  29      target.offsetLeft;
  30      internals.startTrackingStyleRecalcs();
  31      container.style.backgroundColor = "red";
  32      assert_equals(getComputedStyle(target).backgroundColor, "rgba(0, 0, 0, 0)", "getComputedStyle color is correct");
  33      assert_equals(internals.styleRecalcCount(), 0, "getComputedStyle didn't trigger style resolution");
  34  }, "This still works with 'inherit'");
  35
  36 test(() => {
  37      target.style.backgroundColor = "inherit";
  38      subcontainer.style.backgroundColor = "inherit";
  39      target.offsetLeft;
  40      internals.startTrackingStyleRecalcs();
  41      container.style.backgroundColor = "green";
  42      assert_equals(getComputedStyle(target).backgroundColor, "rgb(0, 128, 0)", "getComputedStyle color is correct");
  43      assert_equals(internals.styleRecalcCount(), 1, "getComputedStyle did trigger style resolution");
  44 }, "Explicit 'inherit' chain triggers style resolution");
  45 </script>