[@container] Track dependencies for nestes container rules
We keep track of whether elements' style depends on size and style
queries to target these elements for style invalidation when the
container changes. However, we only did so for the innermost @container
rule.
Move the dependency check for selectors into the ContainerQueryEvaluator
where nested rules are traversed and make sure we also still collect
dependencies from the container selectors when we skip query matching
for pseudo element selectors.
Bug: 1445876
Change-Id: I8f49b900158828b78f0f09abf8c78d2845b7c303
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4561304
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1148427}
diff --git a/css/css-contain/container-queries/nested-size-style-container-invalidation.html b/css/css-contain/container-queries/nested-size-style-container-invalidation.html
new file mode 100644
index 0000000..8d04bf5
--- /dev/null
+++ b/css/css-contain/container-queries/nested-size-style-container-invalidation.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>Nested size/style @container-dependent elements respond to container size changes</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+ #container {
+ container-type: size;
+ width: 1000px;
+ }
+ #container.narrow {
+ width: 600px;
+ }
+ #target {
+ color: red;
+ }
+ @container (width < 800px) {
+ @container style(--foo: bar) {
+ #target { color: green; }
+ }
+ }
+</style>
+<div id="container">
+ <div style="--foo: bar">
+ <div id="target">Green?</div>
+ </div>
+</div>
+<script>
+ setup(() => assert_implements_container_queries());
+
+ test(() => {
+ assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)");
+ }, "Initially red");
+
+ test(() => {
+ container.className = "narrow";
+ assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)");
+ }, "Green after reducing width");
+</script>
