mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-09 21:00:42 +02:00
56cc5a0fb8
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
35 lines
1.2 KiB
HTML
35 lines
1.2 KiB
HTML
<!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>
|