Bug 1429846: Fix slotted invalidation. r=heycam
authorEmilio Cobos Álvarez <emilio@crisal.io>
Thu, 11 Jan 2018 17:39:47 +0100
changeset 454028 bec4537b2efd4f8381c5f398c71bc0f09d4da981
parent 454020 1b62dd209727c2482150340c669c3957d9920670
child 454029 16d1bd6dba918d51efd2a3d36d610be1a6e35200
push id1648
push usermtabara@mozilla.com
push dateThu, 01 Mar 2018 12:45:47 +0000
treeherdermozilla-release@cbb9688c2eeb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1429846
milestone59.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1429846: Fix slotted invalidation. r=heycam This is a partial revert of https://github.com/servo/servo/commit/ce1d8cd232dfbc9e0a52f9467ba2bc209087ea63 If you're in a shadow tree, you may not be slotted but you still need to look at the slotted rules, since a <slot> could be a descendant of yours. Just use the same invalidation map everywhere, and remove complexity. This means that we can do some extra work while trying to gather invalidation if there are slotted rules, but I don't think it's a problem. The test is ported from https://cs.chromium.org/chromium/src/third_party/WebKit/LayoutTests/fast/css/invalidation/slotted.html?l=1&rcl=58d68fdf783d7edde1c82a642e037464861f2787 Curiously, Blink fails the test as written, presumably because they don't flush styles from getComputedStyle correctly (in their test they do via updateStyleAndReturnAffectedElementCount), due to <slot>s not being in the flat tree in their implementation. MozReview-Commit-ID: 6b7BQ6bGMgd
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/css-scoping/slotted-invalidation.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -305882,16 +305882,22 @@
     ]
    ],
    "css/css-scoping/shadow-cascade-order-001.html": [
     [
      "/css/css-scoping/shadow-cascade-order-001.html",
      {}
     ]
    ],
+   "css/css-scoping/slotted-invalidation.html": [
+    [
+     "/css/css-scoping/slotted-invalidation.html",
+     {}
+    ]
+   ],
    "css/css-scoping/slotted-parsing.html": [
     [
      "/css/css-scoping/slotted-parsing.html",
      {}
     ]
    ],
    "css/css-scroll-anchoring/abspos-containing-block-outside-scroller.html": [
     [
@@ -493463,16 +493469,20 @@
   "css/css-scoping/reference/green-box.html": [
    "a736f68dc602c0fccab56ec5cc6234cb3298c88d",
    "support"
   ],
   "css/css-scoping/shadow-cascade-order-001.html": [
    "46913ea7e47811b11be898de5c3bd0a330ea6637",
    "testharness"
   ],
+  "css/css-scoping/slotted-invalidation.html": [
+   "b22e8258671a8709a3ce6fdc42501b43b866e946",
+   "testharness"
+  ],
   "css/css-scoping/slotted-parsing.html": [
    "6bac5b15011d7177a40f7ca3e3c5f7e410643920",
    "testharness"
   ],
   "css/css-scoping/slotted-with-pseudo-element-ref.html": [
    "48561a3dff973b7ad1bfa9702461e50fd4a67c2d",
    "support"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-scoping/slotted-invalidation.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<title>CSS Test: Style invalidation for ::slotted()</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="help" href="https://drafts.csswg.org/css-scoping/#slotted-pseudo">
+<div id="host">
+  <div>
+    <span></span>
+    <span></span>
+  </div>
+  <div id="slotted">
+    <span></span>
+    <span></span>
+  </div>
+  <div>
+    <span></span>
+    <span></span>
+  </div>
+</div>
+<script>
+test(function() {
+  var root = host.attachShadow({"mode":"open"});
+  root.innerHTML = '<style>.outer ::slotted(#slotted) { background-color: red } .outer .inner::slotted(#slotted) { background-color: green }</style><div id="outer"><slot id="inner"></slot></div>';
+
+  assert_equals(window.getComputedStyle(slotted).backgroundColor, "rgba(0, 0, 0, 0)");
+
+  root.querySelector("#outer").className = "outer";
+  assert_equals(window.getComputedStyle(slotted).backgroundColor, "rgb(255, 0, 0)");
+
+  root.querySelector("#inner").className = "inner";
+  assert_equals(window.getComputedStyle(slotted).backgroundColor, "rgb(0, 128, 0)");
+})
+</script>