Clamp auto size to 0 for container size

The passed-in logical size from the layout engine may be the auto value, which is represented as LayoutUnit(-1). In that case the container width/height used for queries and container relative units should be 0. Bug: 382086297 Change-Id: I3a5b6d060112927e52968f1928d4efaac36fb2e7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6076558 Reviewed-by: Morten Stenshorne <[email protected]> Commit-Queue: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1393564}
web-platform-tests · Dec 9, 2024 · 0673357 · 0673357
1 parent f737dc8
commit 0673357
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/css/css-conditional/container-queries/container-units-auto.html b/css/css-conditional/container-queries/container-units-auto.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: auto sized size container unit</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-lengths">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container {
+    container-type: size;
+  }
+  #target {
+    width: 100cqh;
+    height: calc(100px + 1000cqh);
+  }
+</style>
+<div id="container">
+  <div id="target"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(target).width, "0px");
+    assert_equals(getComputedStyle(target).height, "100px");
+  }, "Resolving cqh against a auto height size container should be 0");
+</script>
diff --git a/css/css-conditional/container-queries/size-container-auto-height.html b/css/css-conditional/container-queries/size-container-auto-height.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>CSS Container Queries Test: auto sized height container query</title>
+<link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  @container (height = 0px) {
+    #target { color: green }
+  }
+</style>
+<div style="container-type:size">
+  <div id="target"></div>
+</div>
+<script>
+  test(() => {
+    assert_equals(getComputedStyle(target).color, "rgb(0, 128, 0)");
+  }, "auto height size container matches zero height query");
+</script>