Adding upstream version 125.0.1.upstream/125.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:13:27 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-19 01:13:27 +0000
commit: 40a355a42d4a9444dc753c04c6608dade2f06a23 (patch)
tree: 871fc667d2de662f171103ce5ec067014ef85e61 /testing/web-platform/tests/css/css-values
parent: Adding upstream version 124.0.1. (diff)
download: firefox-upstream/125.0.1.tar.xz
firefox-upstream/125.0.1.zip
18 files changed, 452 insertions, 23 deletions
diff --git a/testing/web-platform/tests/css/css-values/calc-letter-spacing.html b/testing/web-platform/tests/css/css-values/calc-letter-spacing.html
index 444785ba14..4db3b01220 100644
--- a/testing/web-platform/tests/css/css-values/calc-letter-spacing.html
+++ b/testing/web-platform/tests/css/css-values/calc-letter-spacing.html
@@ -39,7 +39,7 @@ https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793
       elemTarget.style.setProperty(property_name, initial_value);
 
       /*
-      In exactly 5 out of the 6 sub-tests, the initial_value will
+      In exactly 4 out of the 6 sub-tests, the initial_value will
       act as a fallback value because the calc() function in the
       specified value generates an invalid value. Since we are
       running 6 consecutive tests on the same element, then
@@ -60,7 +60,7 @@ https://chromium.googlesource.com/chromium/src/+/c825d655f6aaf73484f9d56e9012793
 
     verifyComputedStyle("letter-spacing", "20px", "calc(1 + 100%)", "20px", "testing letter-spacing: calc(1 + 100%)");
 
-    verifyComputedStyle("letter-spacing", "20px", "calc(100%)", "20px", "testing letter-spacing: calc(100%)");
+    verifyComputedStyle("letter-spacing", "20px", "calc(100%)", "100%", "testing letter-spacing: calc(100%)");
 
     verifyComputedStyle("letter-spacing", "20px", "calc(10px) bla", "20px", "testing letter-spacing: calc(10px) bla");
 
diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-001-ref.html b/testing/web-platform/tests/css/css-values/calc-rounding-001-ref.html
new file mode 100644
index 0000000000..476e337505
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-rounding-001-ref.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+body {
+  background: #f3f5f6;
+}
+
+div {
+  font-size: 15px;
+  --width: 401px;
+  width: var(--width);
+  margin: 20px;
+  background: #fff;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+b {
+  height: 50px;
+  background: red;
+  width: calc((var(--width) - 4.5em) / 4); /* .5em gutters */
+}
+
+b:not(:last-child) {
+  margin-right: 1.5em;
+}
+</style>
+<div><b></b><b></b><b></b><b></b></div>
diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-001.html b/testing/web-platform/tests/css/css-values/calc-rounding-001.html
index dfd03a6953..46ea2ebc04 100644
--- a/testing/web-platform/tests/css/css-values/calc-rounding-001.html
+++ b/testing/web-platform/tests/css/css-values/calc-rounding-001.html
@@ -9,8 +9,7 @@
 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1323735">
 <link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
+<link rel="match" href="calc-rounding-001-ref.html">
 <style>
 body {
   background: #f3f5f6;
@@ -36,8 +35,3 @@ b:not(:last-child) {
 }
 </style>
 <div><b></b><b></b><b></b><b></b></div>
-<script>
-  test(function() {
-    assert_equals(document.querySelector("div").offsetHeight, 50);
-  }, "calc() doesn't accumulate much error that makes flex items overflow");
-</script>
diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-002-ref.html b/testing/web-platform/tests/css/css-values/calc-rounding-002-ref.html
new file mode 100644
index 0000000000..a2e9fd0d18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-rounding-002-ref.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Test Reference</title>
+<style>
+* {
+  box-sizing: border-box;
+}
+:root {
+  font-family: sans-serif;
+}
+.parent {
+  display: inline-flex;
+  --addon-size: 1rem;
+}
+.child {
+  min-width: 0;
+  display: inline-flex;
+}
+.overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.addon-child {
+  display: inline-flex;
+  width: var(--addon-size);
+}
+span {
+  outline: 1px dashed red;
+  outline-offset: -1px;
+}
+p > span > span {
+  padding: .5rem .25rem;
+}
+</style>
+<p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p>
+<p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p>
+<p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p>
diff --git a/testing/web-platform/tests/css/css-values/calc-rounding-002.html b/testing/web-platform/tests/css/css-values/calc-rounding-002.html
new file mode 100644
index 0000000000..32c4a75dd8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-rounding-002.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1881220">
+<link rel="help" href="https://drafts.csswg.org/css-values/#funcdef-calc">
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="match" href="calc-rounding-002-ref.html">
+<style>
+* {
+  box-sizing: border-box;
+}
+:root {
+  font-family: sans-serif;
+}
+.parent {
+  display: inline-flex;
+  --addon-size: 1rem;
+}
+.child {
+  min-width: 0;
+  display: inline-flex;
+  max-width: calc(100% - var(--addon-size));
+}
+.overflow {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.addon-child {
+  display: inline-flex;
+  width: var(--addon-size);
+}
+span {
+  outline: 1px dashed red;
+  outline-offset: -1px;
+}
+p > span > span {
+  padding: .5rem .25rem;
+}
+</style>
+<p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p>
+<p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p>
+<p><span class="parent"><span class="child"><span class="overflow">iiiiiiiiiiiiiii</span></span><span class="addon-child"></span></span></p>
diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
new file mode 100644
index 0000000000..04c44d0904
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-height-interpolation.tentative.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>height: calc-size() animations</title>
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../../support/interpolation-testcommon.js"></script>
+
+<style>
+.target {
+  display: block;
+}
+.target::before {
+  display: block;
+  content: "";
+  width: 23px;
+  height: 100px;
+}
+</style>
+
+<body>
+
+<script>
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(auto, size)',
+    to: 'calc-size(auto, size * 2)',
+  }, [
+    { at: -0.25, expect: '75px' },
+    { at: 0, expect: '100px' },
+    { at: 0.25, expect: '125px' },
+    { at: 0.5, expect: '150px' },
+    { at: 0.75, expect: '175px' },
+    { at: 1, expect: '200px' },
+    { at: 1.25, expect: '225px' },
+  ]);
+
+  test_interpolation({
+    property: 'height',
+    from: neutralKeyframe,
+    to: 'calc-size(auto, size * 2)',
+  }, [
+    { at: -0.25, expect: '75px' },
+    { at: 0, expect: '100px' },
+    { at: 0.25, expect: '125px' },
+    { at: 0.5, expect: '150px' },
+    { at: 0.75, expect: '175px' },
+    { at: 1, expect: '200px' },
+    { at: 1.25, expect: '225px' },
+  ]);
+
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(min-content, 0 * size)',
+    to: 'calc-size(min-content, size)',
+  }, [
+    { at: -0.25, expect: '0' },
+    { at: 0, expect: '0' },
+    { at: 0.25, expect: '25px' },
+    { at: 0.5, expect: '50px' },
+    { at: 0.75, expect: '75px' },
+    { at: 1, expect: '100px' },
+    { at: 1.25, expect: '125px' },
+  ]);
+
+  test_interpolation({
+    property: 'height',
+    from: 'calc-size(min-content, 0px)',
+    to: 'calc-size(min-content, size)',
+  }, [
+    { at: -0.25, expect: '0' },
+    { at: 0, expect: '0' },
+    { at: 0.25, expect: '25px' },
+    { at: 0.5, expect: '50px' },
+    { at: 0.75, expect: '75px' },
+    { at: 1, expect: '100px' },
+    { at: 1.25, expect: '125px' },
+  ]);
+
+  test_interpolation({
+    property: 'height',
+    from: '0',
+    to: 'calc-size(max-content, size)',
+  }, [
+    { at: -0.25, expect: '0' },
+    { at: 0, expect: '0' },
+    { at: 0.25, expect: '25px' },
+    { at: 0.5, expect: '50px' },
+    { at: 0.75, expect: '75px' },
+    { at: 1, expect: '100px' },
+    { at: 1.25, expect: '125px' },
+  ]);
+
+</script>
diff --git a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html
index 7254951db3..b8b24935c3 100644
--- a/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html
+++ b/testing/web-platform/tests/css/css-values/calc-size/animation/calc-size-width-interpolation.tentative.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <meta charset="UTF-8">
 <title>width: calc-size() animations</title>
-<link rel="help" href="https://drafts.csswg.org/css-values-5/">
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1800254442">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
 
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -28,16 +27,30 @@
 <script>
   test_interpolation({
     property: 'width',
+    from: 'calc-size(auto, size)',
+    to: 'calc-size(auto, size * 2)',
+  }, [
+    { at: -0.25, expect: '150px' },
+    { at: 0, expect: '200px' },
+    { at: 0.25, expect: '250px' },
+    { at: 0.5, expect: '300px' },
+    { at: 0.75, expect: '350px' },
+    { at: 1, expect: '400px' },
+    { at: 1.25, expect: '450px' },
+  ]);
+
+  test_interpolation({
+    property: 'width',
     from: neutralKeyframe,
     to: 'calc-size(auto, size * 2)',
   }, [
     { at: -0.25, expect: '150px' },
     { at: 0, expect: '200px' },
-    { at: 0.25, expect: 'calc-size(auto, size * 1.25)' },
-    { at: 0.5, expect: 'calc-size(auto, size * 1.5)' },
-    { at: 0.75, expect: 'calc-size(auto, size * 1.75)' },
-    { at: 1, expect: 'calc-size(auto, size * 2)' },
-    { at: 1.25, expect: 'calc-size(auto, size * 2.25)' },
+    { at: 0.25, expect: '250px' },
+    { at: 0.5, expect: '300px' },
+    { at: 0.75, expect: '350px' },
+    { at: 1, expect: '400px' },
+    { at: 1.25, expect: '450px' },
   ]);
 
   test_interpolation({
diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html
new file mode 100644
index 0000000000..61e59f83db
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-height.tentative.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>calc-size() on height</title>
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #container {
+    font-size: 20px;
+  }
+  #child {
+    width: 123px;
+    height: 10px;
+  }
+</style>
+
+<div id="container">
+  <div id="target">
+    <div id="child"></div>
+  </div>
+</div>
+
+<script>
+
+let basic_tests = [
+  { value: "calc-size(any, 357px)", expected: "357px" },
+  { value: "calc-size(any, 31%)", expected_auto: "0px", expected_definite: "31px" },
+  { value: "calc-size(31%, size)", expected_auto: "10px", expected_definite: "31px" },
+  { value: "calc-size(max-content, 31%)", expected_auto: "0px", expected_definite: "31px" },
+  { value: "calc-size(fit-content, 72px)", expected: "72px" },
+  { value: "calc-size(37px, 93px)", expected: "93px" },
+  { value: "calc-size(83px, size * 3)", expected: "249px" },
+  { value: "calc-size(min-content, size / 2)", expected: "5px" },
+  { value: "calc-size(max-content, size * 1.2)", expected: "12px" },
+  { value: "calc-size(fit-content, size / 2 + 30px)", expected: "35px" },
+  { value: "calc-size(30px, 15em)", expected: "300px" },
+  { value: "calc-size(calc-size(any, 30px), 15em)", expected: "300px" },
+  { value: "calc-size(calc-size(2in, 30px), 15em)", expected: "300px" },
+  { value: "calc-size(calc-size(min-content, 30px), 15em)", expected: "300px" },
+  { value: "calc-size(calc-size(min-content, size), size)", expected: "10px" },
+  { value: "calc(12% + calc-size(any, 31%))", expected_auto: "10px", expected_definite: "43px" },
+  { value: "calc-size(any, 31% + 12px)", expected_auto: "12px", expected_definite: "43px" },
+  { value: "calc-size(auto, size * 1.5)", expected: "15px" },
+];
+const container = document.getElementById("container");
+const target = document.getElementById("target");
+const target_cs = getComputedStyle(target);
+for (const obj of basic_tests) {
+  test((t) => {
+    target.style.removeProperty("height");
+    target.style.height = obj.value;
+    container.style.height = "auto";
+    let expected = "expected" in obj ? obj.expected : obj.expected_auto;
+    assert_equals(target_cs.height, expected);
+  }, `resolved height for height in auto height container: ${obj.value}`);
+  test((t) => {
+    target.style.removeProperty("height");
+    target.style.height = obj.value;
+    container.style.height = "100px";
+    let expected = "expected" in obj ? obj.expected : obj.expected_definite;
+    assert_equals(target_cs.height, expected);
+  }, `resolved height for height in definite height container: ${obj.value}`);
+}
+
+</script>
diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html
index fec24aaed1..e51247c872 100644
--- a/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html
+++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-parsing.tentative.html
@@ -1,13 +1,26 @@
 <!DOCTYPE html>
 <title>calc-size() expressions</title>
-<link rel="help" href="https://drafts.csswg.org/css-values-5/">
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1800254442">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="../../support/parsing-testcommon.js"></script>
 
 <script>
 
+test_valid_value("width",        "calc-size(auto, size)");
+test_valid_value("min-width",    "calc-size(auto, size)");
+test_valid_value("height",       "calc-size(auto, size)");
+test_valid_value("min-height",   "calc-size(auto, size)");
+test_invalid_value("max-height", "calc-size(auto, size)");
+test_invalid_value("max-width",  "calc-size(auto, size)");
+
+test_invalid_value("height",     "calc-size(none, size)");
+test_invalid_value("width",      "calc-size(none, size)");
+test_invalid_value("min-height", "calc-size(none, size)");
+test_invalid_value("min-width",  "calc-size(none, size)");
+test_invalid_value("max-height", "calc-size(none, size)");
+test_invalid_value("max-width",  "calc-size(none, size)");
+
 test_valid_value("width",      "calc-size(fit-content, size)");
 test_valid_value("height",     "calc-size(min-content, size * 2)");
 test_valid_value("max-width",  "calc-size(max-content, size / 2)");
diff --git a/testing/web-platform/tests/css/css-values/calc-size/calc-size-width.tentative.html b/testing/web-platform/tests/css/css-values/calc-size/calc-size-width.tentative.html
index 228f526752..96b2719c5d 100644
--- a/testing/web-platform/tests/css/css-values/calc-size/calc-size-width.tentative.html
+++ b/testing/web-platform/tests/css/css-values/calc-size/calc-size-width.tentative.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <title>calc-size() on width</title>
-<link rel="help" href="https://drafts.csswg.org/css-values-5/">
-<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/626#issuecomment-1800254442">
+<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <link rel="stylesheet" href="/fonts/ahem.css">
@@ -44,6 +43,8 @@ document.fonts.ready.then(()=> {
     { value: "calc-size(calc-size(2in, 30px), 15em)", expected: "300px" },
     { value: "calc-size(calc-size(min-content, 30px), 15em)", expected: "300px" },
     { value: "calc-size(calc-size(min-content, size), size)", expected: "400px" },
+    { value: "calc-size(auto, size)", expected: "500px" },
+    { value: "calc-size(auto, size * 0.6 + 23px)", expected: "323px" },
   ];
   const container = document.getElementById("container");
   const target = document.getElementById("target");
diff --git a/testing/web-platform/tests/css/css-values/minmax-length-invalid.html b/testing/web-platform/tests/css/css-values/minmax-length-invalid.html
index 1405c31981..7b8ca88cd2 100644
--- a/testing/web-platform/tests/css/css-values/minmax-length-invalid.html
+++ b/testing/web-platform/tests/css/css-values/minmax-length-invalid.html
@@ -8,8 +8,8 @@
 <script src="../support/parsing-testcommon.js"></script>
 <script>
 function test_invalid_length(value) {
-  // 'letter-spacing' accepts <length> only, not <percentage> or any mixes.
-  test_invalid_value('letter-spacing', value);
+  // 'border-width' accepts <length> only, not <percentage> or any mixes.
+  test_invalid_value('border-left-width', value);
 }
 
 // Syntax checking
diff --git a/testing/web-platform/tests/css/css-values/round-function.html b/testing/web-platform/tests/css/css-values/round-function.html
index 29ec60ea44..338ecaed90 100644
--- a/testing/web-platform/tests/css/css-values/round-function.html
+++ b/testing/web-platform/tests/css/css-values/round-function.html
@@ -200,6 +200,16 @@ test_math_used("calc(0 - round(to-zero, 13, 10))", "-10", { type: "integer" });
 test_math_used("calc(0 - round(to-zero, -13, 10))", "10", { type: "integer" });
 test_math_used("calc(0 - round(to-zero, -18, 10))", "10", { type: "integer" });
 
+// Test omission of <step> argument
+test_math_used("round(1.5)", "2", { type: "integer" });
+test_math_used("round(up, 1.5)", "2", { type: "integer" });
+test_math_used("round(down, 1.5)", "1", { type: "integer" });
+test_math_used("round(to-zero, 1.5)", "1", { type: "integer" });
+test_math_used("round(-1.5)", "-1", { type: "integer" });
+test_math_used("round(up, -1.5)", "-1", { type: "integer" });
+test_math_used("round(down, -1.5)", "-2", { type: "integer" });
+test_math_used("round(to-zero, -1.5)", "-1", { type: "integer" });
+
 // Extreme cases:
 
 // 0 step is NaN
diff --git a/testing/web-platform/tests/css/css-values/round-mod-rem-invalid.html b/testing/web-platform/tests/css/css-values/round-mod-rem-invalid.html
index 37a226b800..e2347868d0 100644
--- a/testing/web-platform/tests/css/css-values/round-mod-rem-invalid.html
+++ b/testing/web-platform/tests/css/css-values/round-mod-rem-invalid.html
@@ -31,7 +31,6 @@ test_invalid_number('round(nearest, 1 2)');
 test_invalid_number('round(1, nearest, 12)');
 test_invalid_number('round(1, nearest)');
 test_invalid_number('round(nearest, 1, nearest)');
-test_invalid_number('round(nearest, 1)');
 test_invalid_number('round(1, , 2)');
 test_invalid_number('mod()');
 test_invalid_number('mod( )');
@@ -97,6 +96,7 @@ test_invalid_number('rem(1, 0Hz)');
 test_invalid_number('rem(1, 0dpi)');
 test_invalid_number('rem(1, 0fr)');
 
+test_invalid_length_percentage('round(0px)');
 test_invalid_length_percentage('round(0px, 0s)');
 test_invalid_length_percentage('round(0px, 0deg)');
 test_invalid_length_percentage('round(0px, 0Hz)');
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-auto-ltr-001-ref.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-auto-ltr-001-ref.html
new file mode 100644
index 0000000000..a8cc95cdda
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-auto-ltr-001-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: Viewport units and scrollbars</title>
+<meta charset="UTF-8">
+<link rel="author"  title="fantasai" href="http://fantasai.inkedblade.net/contact">
+
+
+<!-- This reference assumes that a <div> scrollbar looks identical to the root scrollbar. -->
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+html {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+body {
+  width: 100%;
+  height: 100%;
+  background: white;
+  overflow: auto;
+}
+div {
+  width: 200%;
+  height: 200%;
+  border-right: solid blue 4px;
+  border-bottom: solid blue 4px;
+}
+</style>
+
+<div></div>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-auto-vhw-001.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-auto-vhw-001.html
new file mode 100644
index 0000000000..04b959fa49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-auto-vhw-001.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: Viewport units and scrollbars</title>
+<meta charset="UTF-8">
+<meta name="assert" content="100vw is reduced by scrollbar width when the scrollbars are unconditional">
+<link rel="author"  title="fantasai" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+<link rel="match" href="viewport-units-scrollbars-auto-ltr-001-ref.html">
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  box-sizing: border-box;
+}
+html {
+  background: red;
+  overflow: auto;
+  width: 200%;
+  height: 200%;
+}
+body {
+  background: white;
+  border-right: solid blue 4px;
+  border-bottom: solid blue 4px;
+}
+</style>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-blank-001-ref.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-blank-001-ref.html
new file mode 100644
index 0000000000..f0718d0e8d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-blank-001-ref.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: Viewport units and scrollbars</title>
+<meta charset="UTF-8">
+<link rel="author"  title="fantasai" href="http://fantasai.inkedblade.net/contact">
+
+<style>
+html {
+  overflow: scroll;
+}
+body {
+  background: white;
+}
+</style>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-ltr-001-ref.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-ltr-001-ref.html
new file mode 100644
index 0000000000..fe9a454525
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-ltr-001-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: Viewport units and scrollbars</title>
+<meta charset="UTF-8">
+<link rel="author"  title="fantasai" href="http://fantasai.inkedblade.net/contact">
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+html {
+  overflow: scroll;
+}
+body {
+  background: white;
+  border-right: solid green 4px;
+  border-bottom: solid green 4px;
+}
+</style>
diff --git a/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vhw-001.html b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vhw-001.html
new file mode 100644
index 0000000000..c44edc2da8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-values/viewport-units-scrollbars-scroll-vhw-001.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<title>CSS Values and Units Test: Viewport units and scrollbars</title>
+<meta charset="UTF-8">
+<meta name="assert" content="100vw is reduced by scrollbar width when the scrollbars are unconditional">
+<link rel="author"  title="fantasai" href="http://fantasai.inkedblade.net/contact">
+<link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths">
+
+<link rel="match" href="viewport-units-scrollbars-scroll-ltr-001-ref.html">
+
+<style>
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100vw;
+  height: 100vh;
+  box-sizing: border-box;
+}
+html {
+  background: red;
+  overflow: scroll;
+}
+body {
+  background: white;
+  border-right: solid green 4px;
+  border-bottom: solid green 4px;
+}
+</style>
+
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:13:27 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-19 01:13:27 +0000
commit	40a355a42d4a9444dc753c04c6608dade2f06a23 (patch)
tree	871fc667d2de662f171103ce5ec067014ef85e61 /testing/web-platform/tests/css/css-values
parent	Adding upstream version 124.0.1. (diff)
download	firefox-upstream/125.0.1.tar.xz firefox-upstream/125.0.1.zip