Fix slotted invalidation.

This is a partial revert of servo/servo@ce1d8cd 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 Upstreamed from https://bugzilla.mozilla.org/show_bug.cgi?id=1429846 [ci skip]
web-platform-tests · Jan 23, 2018 · 72f8f50 · 72f8f50
1 parent 1babdff
commit 72f8f50
Showing 1 changed file with 35 additions and 0 deletions.
diff --git a/css/css-scoping/slotted-invalidation.html b/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>