layout/style/test/test_computed_style_difference.html

   1 <!doctype html>
   2 <title>Test that the difference of the computed style of an element is always correctly propagated</title>
   3 <!--
   4   There are CSS property changes that don't have an effect in computed style.
   5
   6   It's relatively easy to return `nsChangeHint(0)` for the case where the
   7   property changes but it should have no rendering difference.
   8
   9   That's however incorrect, since if it's an inherited property, or a
  10   descendant explicitly inherits it, we should still propagate the change
  11   downwards.
  12
  13   This test tests that computed style diffing is correct.
  14 -->
  15 <script src="/resources/testharness.js"></script>
  16 <script src="/resources/testharnessreport.js"></script>
  17 <script src="property_database.js"></script>
  18 <div id="outer">
  19   <div id="inner"></div>
  20 </div>
  21 <script>
  22 // We need to skip checking for properties for which the value returned by
  23 // getComputedStyle depends on the parent.
  24 //
  25 // TODO(emilio): We could test a subset of these, see below.
  26 const kWhitelist = [
  27   // Could test display values that don't force blockification of children.
  28   "display",
  29
  30   // Could avoid testing only the ones that have percentages.
  31   "transform",
  32   "transform-origin",
  33   "perspective-origin",
  34
  35   "padding-bottom",
  36   "padding-left",
  37   "padding-right",
  38   "padding-top",
  39   "padding-inline-end",
  40   "padding-inline-start",
  41   "padding-block-end",
  42   "padding-block-start",
  43
  44   "margin-bottom",
  45   "margin-left",
  46   "margin-right",
  47   "margin-top",
  48   "margin-inline-end",
  49   "margin-inline-start",
  50   "margin-block-end",
  51   "margin-block-start",
  52
  53   "width",
  54   "height",
  55   "block-size",
  56   "inline-size",
  57
  58   "min-height",
  59   "min-width",
  60   "min-block-size",
  61   "min-inline-size",
  62 ];
  63
  64 const outer = document.getElementById("outer");
  65 const inner = document.getElementById("inner");
  66
  67 function testValue(prop, value) {
  68   outer.style.setProperty(prop, value);
  69   const computed = getComputedStyle(outer).getPropertyValue(prop);
  70   assert_equals(
  71     getComputedStyle(inner).getPropertyValue(prop), computed,
  72     "Didn't handle the inherited change correctly?"
  73   )
  74 }
  75
  76 // Note that we intentionally ignore the "prerequisites" here, since that's
  77 // the most likely place where the diffing could potentially go wrong.
  78 function testProperty(prop, info) {
  79   // We only care about longhands, changing shorthands is not that interesting,
  80   // since we're interested of changing as little as possible, and changing
  81   // them would be equivalent to changing all the longhands at the same time.
  82   if (info.type !== CSS_TYPE_LONGHAND)
  83     return;
  84   if (kWhitelist.includes(prop))
  85     return;
  86
  87   inner.style.setProperty(prop, "inherit");
  88   for (const v of info.initial_values)
  89     testValue(prop, v);
  90   for (const v of info.other_values)
  91     testValue(prop, v);
  92   // Test again the first value so that we test changing to it, not just from
  93   // it.
  94   //
  95   // TODO(emilio): We could test every value against every-value if we wanted,
  96   // might be worth it.
  97   testValue(prop, info.initial_values[0]);
  98
  99   inner.style.removeProperty(prop);
 100 }
 101
 102 for (let prop in gCSSProperties)
 103   test(() => testProperty(prop, gCSSProperties[prop]), "Diffing for " + prop);
 104 </script>