[layout] Consider stable scrollbars for container queries.

This implements the resolution at: w3c/csswg-drafts#10043 (comment) Basically we zero out scrollbars from the fragment-geometry if they are auto. Fixed: 346975763 Change-Id: Ic77b2a39f4830ff6dbbd080c7cc4f20734597821 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5727150 Reviewed-by: David Grogan <[email protected]> Commit-Queue: David Grogan <[email protected]> Cr-Commit-Position: refs/heads/main@{#1331243}
web-platform-tests · Jul 22, 2024 · cbf74ff · cbf74ff
1 parent 0f052a7
commit cbf74ff
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 2 deletions.
diff --git a/css/css-conditional/container-queries/query-content-box.html b/css/css-conditional/container-queries/query-content-box.html
@@ -38,13 +38,38 @@
     overflow: scroll;
   }
 
+  #container5 {
+    box-sizing: content-box;
+    width: 100px;
+    height: 100px;
+    overflow-x: scroll;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+
+  #container6 {
+    box-sizing: border-box;
+    width: 200px;
+    height: 200px;
+    overflow-x: scroll;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+  }
+
   @container ((width = 100px) and (height = 100px)) {
     .target {
       background-color: green;
       height: 100%;
     }
   }
+  @container ((width < 100px) and (height < 100px)) {
+    .target {
+      background-color: blue;
+      height: 100%;
+    }
+  }
 </style>
+<div id="sentinel" style="overflow: scroll; width: min-content;"></div>
 <div id="container1" class="container">
   <div class="target"></div>
 </div>
@@ -57,10 +82,19 @@
 <div id="container4" class="container">
   <div class="target"></div>
 </div>
+<div id="container5" class="container">
+  <div class="target"></div>
+</div>
+<div id="container6" class="container">
+  <div class="target"></div>
+</div>
 <script>
   setup(() => assert_implements_container_queries());
 
   const green = "rgb(0, 128, 0)";
+  const blue = "rgb(0, 0, 255)";
+  const has_non_overlay_scrollbars = document.getElementById('sentinel') != 0;
+  const scroll_color = has_non_overlay_scrollbars ? blue : green;
 
   test(() => {
     assert_equals(getComputedStyle(document.querySelector("#container1 > .target")).backgroundColor, green);
@@ -71,10 +105,18 @@
   }, "Size queries with border-box sizing");
 
   test(() => {
-    assert_equals(getComputedStyle(document.querySelector("#container3 > .target")).backgroundColor, green);
+    assert_equals(getComputedStyle(document.querySelector("#container3 > .target")).backgroundColor, scroll_color);
   }, "Size queries with content-box sizing and overflow:scroll");
 
   test(() => {
-    assert_equals(getComputedStyle(document.querySelector("#container4 > .target")).backgroundColor, green);
+    assert_equals(getComputedStyle(document.querySelector("#container4 > .target")).backgroundColor, scroll_color);
   }, "Size queries with border-box sizing and overflow:scroll");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#container5 > .target")).backgroundColor, scroll_color);
+  }, "Size queries with content-box sizing and scrollbar-gutter:stable");
+
+  test(() => {
+    assert_equals(getComputedStyle(document.querySelector("#container6 > .target")).backgroundColor, scroll_color);
+  }, "Size queries with border-box sizing and scrollbar-gutter:stable");
 </script>
diff --git a/css/css-conditional/container-queries/scrollbar-container-units-block-ref.html b/css/css-conditional/container-queries/scrollbar-container-units-block-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<style>
+.container {
+  display: inline-block;
+  border: solid 3px cornflowerblue;
+  width: 100px;
+  height: 100px;
+  container-type: size;
+}
+div > div {
+  box-sizing: border-box;
+  width: 200px;
+  height: 100%;
+  border: solid 10px orange;
+}
+</style>
+<div class="container" style="overflow-x: scroll;">
+  <div></div>
+</div>
+<div class="container" style="overflow-x: auto;">
+  <div style="height: 100px;"></div>
+</div>
diff --git a/css/css-conditional/container-queries/scrollbar-container-units-block.html b/css/css-conditional/container-queries/scrollbar-container-units-block.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10043#issuecomment-2165291421">
+<link rel="match" href="scrollbar-container-units-block-ref.html">
+<style>
+.container {
+  display: inline-block;
+  border: solid 3px cornflowerblue;
+  width: 100px;
+  height: 100px;
+  container-type: size;
+}
+div > div {
+  box-sizing: border-box;
+  width: 200px;
+  height: 100cqh;
+  border: solid 10px orange;
+}
+</style>
+<div class="container" style="overflow-x: scroll;">
+  <div></div>
+</div>
+<div class="container" style="overflow-x: auto;">
+  <div></div>
+</div>
diff --git a/css/css-conditional/container-queries/scrollbar-container-units-inline-ref.html b/css/css-conditional/container-queries/scrollbar-container-units-inline-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<style>
+.container {
+  display: inline-block;
+  border: solid 3px cornflowerblue;
+  width: 100px;
+  height: 100px;
+  container-type: inline-size;
+}
+div > div {
+  box-sizing: border-box;
+  width: 100%;
+  height: 200px;
+  border: solid 10px orange;
+}
+</style>
+<div class="container" style="overflow-y: scroll;">
+  <div></div>
+</div>
+<div class="container" style="overflow-y: auto;">
+  <div style="width: 100px;"></div>
+</div>
+<div class="container" style="overflow-y: auto; scrollbar-gutter: stable;">
+  <div></div>
+</div>
+<div class="container" style="overflow-y: auto; scrollbar-gutter: stable;">
+  <div style="height: 50px;"></div>
+</div>
diff --git a/css/css-conditional/container-queries/scrollbar-container-units-inline.html b/css/css-conditional/container-queries/scrollbar-container-units-inline.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10043#issuecomment-2165291421">
+<link rel="match" href="scrollbar-container-units-inline-ref.html">
+<style>
+.container {
+  display: inline-block;
+  border: solid 3px cornflowerblue;
+  width: 100px;
+  height: 100px;
+  container-type: inline-size;
+}
+div > div {
+  box-sizing: border-box;
+  width: 100cqw;
+  height: 200px;
+  border: solid 10px orange;
+}
+</style>
+<div class="container" style="overflow-y: scroll;">
+  <div></div>
+</div>
+<div class="container" style="overflow-y: auto;">
+  <div></div>
+</div>
+<div class="container" style="overflow-y: auto; scrollbar-gutter: stable;">
+  <div></div>
+</div>
+<div class="container" style="overflow-y: auto; scrollbar-gutter: stable;">
+  <div style="height: 50px;"></div>
+</div>