зеркало из https://github.com/mozilla/gecko-dev.git
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:
Родитель
3b5da0d9e2
Коммит
56cc5a0fb8
|
@ -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>
|
Загрузка…
Ссылка в новой задаче