Bug 1429846: Fix slotted invalidation. r=heycam

This is a partial revert of
ce1d8cd232

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
This commit is contained in:
Emilio Cobos Álvarez 2018-01-11 17:39:47 +01:00
Родитель 3b5da0d9e2
Коммит 56cc5a0fb8
2 изменённых файлов: 45 добавлений и 0 удалений

Просмотреть файл

@ -305887,6 +305887,12 @@
{}
]
],
"css/css-scoping/slotted-invalidation.html": [
[
"/css/css-scoping/slotted-invalidation.html",
{}
]
],
"css/css-scoping/slotted-parsing.html": [
[
"/css/css-scoping/slotted-parsing.html",
@ -493468,6 +493474,10 @@
"46913ea7e47811b11be898de5c3bd0a330ea6637",
"testharness"
],
"css/css-scoping/slotted-invalidation.html": [
"b22e8258671a8709a3ce6fdc42501b43b866e946",
"testharness"
],
"css/css-scoping/slotted-parsing.html": [
"6bac5b15011d7177a40f7ca3e3c5f7e410643920",
"testharness"

Просмотреть файл

@ -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>