WebKit export: Convert new scrollbar-gutter-root* tests from LayoutTe…

…sts to wpts https://bugs.webkit.org/show_bug.cgi?id=278568
web-platform-tests · Jan 3, 2025 · 56ca908 · 56ca908
1 parent 9143398
commit 56ca908
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 0 deletions.
diff --git a/css/css-overflow/scrollbar-gutter-root-both-edges-ref.html b/css/css-overflow/scrollbar-gutter-root-both-edges-ref.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root element</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
+
+<style>
+    html {
+        background-color: blue;
+        margin: 10px;
+        padding: 10px;
+        border: 5px solid black;
+    }
+
+    body {
+        margin: 10px;
+        padding: 10px;
+        border: 5px solid green;
+    }
+
+    #abspos {
+        position:absolute;
+        top: 150px;
+        left: 15px;
+        background-color: green;
+        width: 80px;
+        height: 100px;
+        transform: translateZ(0);
+    }
+
+    p {
+        background-color: purple;
+        color: white;
+    }
+</style>
+
+<div id="outer" style="width: 100px; height: 100px; overflow: scroll; left: -200px; position: absolute;">
+    <div id="inner" style="width: 100%; height: 200%;"></div>
+</div>
+
+<script>
+    var outer = document.getElementById("outer");
+    var inner = document.getElementById("inner");
+    // Compute scrollbar gutter size and add it as margin to the root element
+    var scrollbarWidthPlusMargin = String((outer.offsetWidth - inner.offsetWidth) + 10) + "px";
+    document.documentElement.style.marginRight = scrollbarWidthPlusMargin;
+    document.documentElement.style.marginLeft = scrollbarWidthPlusMargin;
+</script>
+
+<p id="content">Should not have space around me in the inline axis.</p>
+<div id="abspos"></div>
diff --git a/css/css-overflow/scrollbar-gutter-root-both-edges.html b/css/css-overflow/scrollbar-gutter-root-both-edges.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root element</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
+<link rel="match" href="scrollbar-gutter-root-both-edges-ref.html">
+
+<style>
+    body,html {
+        background-color: blue;
+        margin: 10px;
+        padding: 10px;
+        border: 5px solid black;
+    }
+
+    body{
+        border: 5px solid green;
+    }
+
+
+:root {
+  scrollbar-gutter: stable both-edges;
+}
+p {
+  background-color: purple;
+  color: white;
+}
+div {
+    position:absolute;
+    left:-20px;
+    top:150px;
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    transform: translateZ(0);
+}
+</style>
+<p id="content">Should not have space around me in the inline axis.</p>
+<div></div>
diff --git a/css/css-overflow/scrollbar-gutter-root-ref.html b/css/css-overflow/scrollbar-gutter-root-ref.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root element</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874093">
+
+<style>
+    html {
+        background-color: blue;
+        margin: 10px;
+        padding: 10px;
+        border: 5px solid black;
+    }
+
+    body {
+        margin: 10px;
+        padding: 10px;
+        border: 5px solid green;
+    }
+
+    #abspos {
+        position:absolute;
+        top:150px;
+        left: 0px;
+        background-color: green;
+        width: 80px;
+        height: 100px;
+        transform: translateZ(0);
+    }
+
+    p {
+        background-color: purple;
+        color: white;
+    }
+</style>
+<div id="outer" style="width: 100px; height: 100px; overflow: scroll; left: -200px; position: absolute;">
+    <div id="inner" style="width: 100%; height: 200%;"></div>
+</div>
+<script>
+    var outer = document.getElementById("outer");
+    var inner = document.getElementById("inner");
+    // Compute scrollbar gutter size and add it as margin to the root element
+    document.documentElement.style.marginRight = String((outer.offsetWidth - inner.offsetWidth) + 10) + "px";
+</script>
+
+<p id="content">Should not have space around me in the inline axis.</p>
+<div id="abspos"> </div>
diff --git a/css/css-overflow/scrollbar-gutter-root.html b/css/css-overflow/scrollbar-gutter-root.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Overflow: scrollbar-gutter on the root element</title>
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property">
+<link rel="match" href="scrollbar-gutter-root-ref.html">
+
+<style>
+    body,html {
+        background-color: blue;
+        margin: 10px;
+        padding: 10px;
+        border: 5px solid black;
+    }
+
+    body{
+        border: 5px solid green;
+    }
+
+
+:root {
+  scrollbar-gutter: stable;
+}
+p {
+  background-color: purple;
+  color: white;
+}
+div {
+    position:absolute;
+    left:-20px;
+    top:150px;
+    background-color: green;
+    width: 100px;
+    height: 100px;
+    transform: translateZ(0);
+}
+</style>
+<p id="content">Should not have space around me in the inline axis.</p>
+<div></div>