1 files changed, 239 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/container-queries/container-nested.html b/testing/web-platform/tests/css/css-contain/container-queries/container-nested.html
new file mode 100644
index 0000000000..3ad35bd2be
--- /dev/null
+++ b/testing/web-platform/tests/css/css-contain/container-queries/container-nested.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<title>@container (nested)</title>
+<link rel="help" href="https://drafts.csswg.org/css-contain-3/#container-rule">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/cq-testcommon.js"></script>
+<style>
+
+#outer {
+  container-name: outer;
+  container-type: size;
+  width: 100px;
+  height: 100px;
+}
+
+#inner {
+  container-name: inner;
+  container-type: size;
+  width: 50px;
+  height: 50px;
+}
+</style>
+<div id=outer>
+  <div id=inner>
+    <div id=child></div>
+  </div>
+</div>
+<script>
+  setup(() => assert_implements_container_queries());
+</script>
+
+<!--
+  "Implicit" refers to implicit container selection, i.e. understanding which
+  container to evaluate against by looking at the features used.
+-->
+
+<style>
+  @container (width: 50px) {
+    @container (height: 50px) {
+      #child { --implicit:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit'), 'true');
+  }, 'Implicit');
+</script>
+
+
+<style>
+  @container (width: 70px) {
+    @container (height: 50px) {
+      #child { --implicit-outer-fail:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-fail'), '');
+  }, 'Implicit, outer failing');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container (height: 70px) {
+      #child { --implicit-inner-fail:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-inner-fail'), '');
+  }, 'Implicit, inner failing');
+</script>
+
+
+<style>
+  @container outer (width: 100px) {
+    @container inner (height: 50px) {
+      #child { --named-outer-inner:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner'), 'true');
+  }, 'Outer named, inner named');
+</script>
+
+
+<style>
+  @container inner (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --named-outer-inner-reverse:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner-reverse'), 'true');
+  }, 'Outer named, inner named (reverse)');
+</script>
+
+
+<style>
+  @container unknown (width: 100px) {
+    @container inner (height: 50px) {
+      #child { --named-failing-outer:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-failing-outer'), '');
+  }, 'Failing outer name');
+</script>
+
+<style>
+  @container outer (width: 100px) {
+    @container unknown (height: 50px) {
+      #child { --named-failing-inner:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-failing-inner'), '');
+  }, 'Failing inner name');
+</script>
+
+
+<style>
+  @container outer (width: 100px) {
+    @container (height: 50px) {
+      #child { --named-outer-inner-implicit:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--named-outer-inner-implicit'), 'true');
+  }, 'Outer named, inner implicit');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container inner (height: 50px) {
+      #child { --implicit-outer-inner-named:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-inner-named'), 'true');
+  }, 'Inner named, outer implicit');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --implicit-outer-inner-named-reverse:true; }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--implicit-outer-inner-named-reverse'), 'true');
+  }, 'Inner named, outer implicit (reverse)');
+</script>
+
+
+<style>
+  @container (width > 1px) {
+    @container (width > 2px) {
+      @container (width > 3px) {
+        #child { --three-levels:true; }
+      }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--three-levels'), 'true');
+  }, 'Three levels');
+</script>
+
+
+<style>
+  @container (width > 1px) {
+    @container (width > 2000px) {
+      @container (width > 3px) {
+        #child { --three-levels-middle-fail:true; }
+      }
+    }
+  }
+</style>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(child).getPropertyValue('--three-levels-middle-fail'), '');
+  }, 'Three levels, middle fail');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --inner-named-invalidation:true; }
+    }
+  }
+</style>
+<script>
+  test((t) => {
+    t.add_cleanup(() => { outer.style = ''; });
+    assert_equals(getComputedStyle(child).getPropertyValue('--inner-named-invalidation'), 'true');
+    outer.style.height = '200px';
+    assert_equals(getComputedStyle(child).getPropertyValue('--inner-named-invalidation'), '');
+  }, 'Named inner invalidation');
+</script>
+
+
+<style>
+  @container (width: 50px) {
+    @container outer (height: 100px) {
+      #child { --outer-implicit-invalidation:true; }
+    }
+  }
+</style>
+<script>
+  test((t) => {
+    t.add_cleanup(() => { inner.style = ''; });
+    assert_equals(getComputedStyle(child).getPropertyValue('--outer-implicit-invalidation'), 'true');
+    inner.style.width = '200px';
+    assert_equals(getComputedStyle(child).getPropertyValue('--outer-implicit-invalidation'), '');
+  }, 'Implicit outer invalidation');
+</script>