Adding upstream version 115.7.0esr.upstream/115.7.0esr

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/css-logical/parsing
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
54 files changed, 1767 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html
new file mode 100644
index 0000000000..de3a3c2a0c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().blockSize</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="block-size computed value is an absolute length.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #parent {
+    height: 300px;
+  }
+  #target {
+    width: 0px;
+    height: 0px;
+    font-size: 40px;
+  }
+  #child {
+    height: 80px;
+  }
+</style>
+</head>
+<body>
+<div id="parent">
+  <div id="target">
+    <div id="child">
+    </div>
+  </div>
+</div>
+<script>
+test_computed_value("block-size", "auto", "80px"); // child height
+
+test_computed_value("block-size", "10px");
+test_computed_value("block-size", "20%", "60px");
+test_computed_value("block-size", "calc(0.5em + 10px)", "30px");
+test_computed_value("block-size", "calc(-0.5em + 10px)", "0px");
+
+test_computed_value("block-size", "min-content", "80px"); // child height
+test_computed_value("block-size", "max-content", "80px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html
new file mode 100644
index 0000000000..37d8890773
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing block-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("block-size", "none");
+
+test_invalid_value("block-size", "min-content available");
+test_invalid_value("block-size", "max-content 10px");
+test_invalid_value("block-size", "20% available");
+
+test_invalid_value("block-size", "-10px");
+test_invalid_value("block-size", "-20%");
+test_invalid_value("block-size", "60");
+test_invalid_value("block-size", "10px 20%");
+
+test_invalid_value("block-size", "10px border-box");
+test_invalid_value("block-size", "content-box 20%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html
new file mode 100644
index 0000000000..47170e48f1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing block-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("block-size", "auto");
+
+test_valid_value("block-size", "10px");
+test_valid_value("block-size", "20%");
+test_valid_value("block-size", "calc(2em + 3ex)");
+
+test_valid_value("block-size", "min-content");
+test_valid_value("block-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("block-size", "fit-content(100px)");
+// test_valid_value("block-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html
new file mode 100644
index 0000000000..24a745f5fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().borderBlockColor</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color">
+<meta name="assert" content="border-block-color is computed color(s).">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="box"></div>
+<div id="target"></div>
+<style>
+  #target {
+    color: lime;
+  }
+</style>
+<script>
+test_computed_value("border-block-start-color", "currentcolor", 'rgb(0, 255, 0)');
+test_computed_value("border-block-start-color", "rgb(2, 3, 4)");
+test_computed_value("border-block-end-color", "rgb(34, 51, 68)");
+test_computed_value("border-block-end-color", "transparent", "rgba(0, 0, 0, 0)");
+test_computed_value("border-block-color", "rgb(34, 51, 68)");
+test_computed_value("border-block-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)");
+test_computed_value("border-block-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
+test_computed_value("border-block-color", "currentcolor lime", 'rgb(0, 255, 0)');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html
new file mode 100644
index 0000000000..1c25f125fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-block-color with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color">
+<meta name="assert" content="border-block-color supports only the grammar '<color>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("border-block-start-color", "#12");
+test_invalid_value("border-block-start-color", "auto");
+test_invalid_value("border-block-start-color", "red green");
+test_invalid_value("border-block-start-color", "rgb");
+test_invalid_value("border-block-start-color", "rgb(1,2,3,4,5)");
+test_invalid_value("border-block-start-color", "rgb(10%, 20, 30%)");
+test_invalid_value("border-block-end-color", "#123456789");
+test_invalid_value("border-block-end-color", "123");
+test_invalid_value("border-block-end-color", "hsla(1,2,3,4,5)");
+test_invalid_value("border-block-end-color", "red, green");
+test_invalid_value("border-block-end-color", "rgb(1)");
+test_invalid_value("border-block-end-color", "rgba(-2, 300, 400%, -0.5)");
+test_invalid_value("border-block-color", "auto");
+test_invalid_value("border-block-color", "lime, transparent");
+test_invalid_value("border-block-color", "red green blue");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html
new file mode 100644
index 0000000000..aefe0f268b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-block-color with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-color">
+<meta name="assert" content="border-block-color supports the full grammar '<color>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("border-block-start-color", "currentcolor");
+test_valid_value("border-block-start-color", "rgb(2, 3, 4)");
+test_valid_value("border-block-end-color", "#234", "rgb(34, 51, 68)");
+test_valid_value("border-block-end-color", "transparent");
+test_valid_value("border-block-color", "#234", "rgb(34, 51, 68)");
+test_valid_value("border-block-color", "transparent rgb(2, 3, 4)");
+test_valid_value("border-block-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html
new file mode 100644
index 0000000000..9cd8a252b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().borderBlockStyle</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style">
+<meta name="assert" content="border-block-style is specified keyword(s).">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("border-block-start-style", "dotted");
+test_computed_value("border-block-start-style", "groove");
+test_computed_value("border-block-start-style", "inset");
+test_computed_value("border-block-start-style", "none");
+test_computed_value("border-block-start-style", "solid");
+test_computed_value("border-block-end-style", "dashed");
+test_computed_value("border-block-end-style", "double");
+test_computed_value("border-block-end-style", "hidden");
+test_computed_value("border-block-end-style", "outset");
+test_computed_value("border-block-end-style", "ridge");
+test_computed_value("border-block-style", "dotted");
+test_computed_value("border-block-style", "double groove");
+test_computed_value("border-block-style", "hidden hidden", "hidden");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html
new file mode 100644
index 0000000000..680e510aae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-block-style with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-style">
+<meta name="assert" content="border-block-style supports only the grammar '<line-style>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("border-block-start-style", "auto");
+test_invalid_value("border-block-start-style", "hidden, outset");
+test_invalid_value("border-block-end-style", "solid double");
+test_invalid_value("border-block-style", "auto");
+test_invalid_value("border-block-style", "groove, ridge");
+test_invalid_value("border-block-style", "hidden inset dashed");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html
new file mode 100644
index 0000000000..860a1052b8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-block-style with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block">
+<meta name="assert" content="border-block-style supports the full grammar '<line-style>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
+test_valid_value("border-block-start-style", "dotted");
+test_valid_value("border-block-start-style", "groove");
+test_valid_value("border-block-start-style", "inset");
+test_valid_value("border-block-start-style", "none");
+test_valid_value("border-block-start-style", "solid");
+test_valid_value("border-block-end-style", "dashed");
+test_valid_value("border-block-end-style", "double");
+test_valid_value("border-block-end-style", "hidden");
+test_valid_value("border-block-end-style", "outset");
+test_valid_value("border-block-end-style", "ridge");
+test_valid_value("border-block-style", "dotted");
+test_valid_value("border-block-style", "double groove");
+test_valid_value("border-block-style", "hidden hidden", "hidden");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html
new file mode 100644
index 0000000000..68c9797c0f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-block with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block">
+<meta name="assert" content="border-block supports the full grammar '<line-width> || <line-style> || <color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// Similar to css-backgrounds/parsing/border-valid.html
+
+test_valid_value("border-block", "1px dotted red");
+test_valid_value("border-block", "double", ["double", "medium double"]);
+
+test_valid_value("border-block-start", "green double thin", "thin double green");
+test_valid_value("border-block-start", "green", ["green", "medium none green"]);
+test_valid_value("border-block-end", "thin", ["thin", "thin none"]);
+test_valid_value("border-block-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html
new file mode 100644
index 0000000000..66b0cb7c60
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().borderBlockWidth</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width">
+<meta name="assert" content="border-block-width is absolute length; zero if the border block style is none or hidden.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="box"></div>
+<div id="target"></div>
+<style>
+  #box {
+    border-style: dotted; /* Avoid border-*-width computed style 0 */
+    border-top-width: thin;
+    border-right-width: medium;
+    border-bottom-width: thick;
+  }
+  #target {
+    font-size: 40px;
+    border-block-style: dotted; /* Avoid border-block-*-width computed style 0 */
+  }
+</style>
+<script>
+'use strict';
+const box = document.getElementById('box');
+const thinWidth = getComputedStyle(box).borderTopWidth;
+const mediumWidth = getComputedStyle(box).borderRightWidth;
+const thickWidth = getComputedStyle(box).borderBottomWidth;
+
+test_computed_value("border-block-start-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("border-block-start-width", "calc(10px - 0.5em)", "0px");
+test_computed_value("border-block-start-width", "thin", thinWidth);
+test_computed_value("border-block-start-width", "medium", mediumWidth);
+
+test_computed_value("border-block-end-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("border-block-end-width", "calc(10px - 0.5em)", "0px");
+test_computed_value("border-block-end-width", "thick", thickWidth);
+
+test_computed_value("border-block-width", "10px");
+test_computed_value("border-block-width", "10px 20px");
+test_computed_value("border-block-width", "10px 10px", "10px");
+test(() => {
+  box.style.borderBlockStartWidth = '10px';
+  box.style.borderBlockEndWidth = '10px';
+
+  box.style.borderBlockStartStyle = 'groove';
+  box.style.borderBlockEndStyle = 'solid';
+  assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px');
+  assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px');
+  assert_equals(getComputedStyle(box).borderBlockWidth, '10px');
+
+  box.style.borderBlockStartStyle = 'hidden';
+  box.style.borderBlockEndStyle = 'dashed';
+  assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px');
+  assert_equals(getComputedStyle(box).borderBlockEndWidth, '10px');
+  assert_equals(getComputedStyle(box).borderBlockWidth, '0px 10px');
+
+  box.style.borderBlockStartStyle = 'inset';
+  box.style.borderBlockEndStyle = 'none';
+  assert_equals(getComputedStyle(box).borderBlockStartWidth, '10px');
+  assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px');
+  assert_equals(getComputedStyle(box).borderBlockWidth, '10px 0px');
+
+  box.style.borderBlockStartStyle = 'none';
+  box.style.borderBlockEndStyle = 'hidden';
+  assert_equals(getComputedStyle(box).borderBlockStartWidth, '0px');
+  assert_equals(getComputedStyle(box).borderBlockEndWidth, '0px');
+  assert_equals(getComputedStyle(box).borderBlockWidth, '0px');
+}, 'width is zero if the border block style is none or hidden');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html
new file mode 100644
index 0000000000..65990fe930
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-block-width with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width">
+<meta name="assert" content="border-block-width supports only the grammar '<line-width>{1,2}'.">
+<meta name="assert" content="Negative lengths are not allowed.">
+  <script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("border-block-start-width", "-20px");
+test_invalid_value("border-block-start-width", "auto");
+test_invalid_value("border-block-start-width", "medium 40px");
+test_invalid_value("border-block-end-width", "10");
+test_invalid_value("border-block-end-width", "30%");
+
+test_invalid_value("border-block-width", "thick, thin");
+test_invalid_value("border-block-width", "10px 20px 30px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html
new file mode 100644
index 0000000000..03b02a2566
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-block-width with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block-width">
+<meta name="assert" content="border-block-width supports the full grammar '<line-width>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <length> | thin | medium | thick
+test_valid_value("border-block-start-width", "10px");
+test_valid_value("border-block-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
+test_valid_value("border-block-start-width", "thick");
+test_valid_value("border-block-start-width", "thin");
+test_valid_value("border-block-end-width", "0", "0px");
+test_valid_value("border-block-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
+test_valid_value("border-block-end-width", "medium");
+test_valid_value("border-block-width", "10px");
+test_valid_value("border-block-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
+test_valid_value("border-block-width", "10px 10px", "10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html
new file mode 100644
index 0000000000..106a4f48e4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().borderInlineColor</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
+<meta name="assert" content="border-inline-color is computed color(s).">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="box"></div>
+<div id="target"></div>
+<style>
+  #target {
+    color: lime;
+  }
+</style>
+<script>
+test_computed_value("border-inline-start-color", "currentcolor", 'rgb(0, 255, 0)');
+test_computed_value("border-inline-start-color", "rgb(2, 3, 4)");
+test_computed_value("border-inline-end-color", "rgb(34, 51, 68)");
+test_computed_value("border-inline-end-color", "transparent", "rgba(0, 0, 0, 0)");
+test_computed_value("border-inline-color", "rgb(34, 51, 68)");
+test_computed_value("border-inline-color", "transparent rgb(2, 3, 4)", "rgba(0, 0, 0, 0) rgb(2, 3, 4)");
+test_computed_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
+test_computed_value("border-inline-color", "currentcolor lime", 'rgb(0, 255, 0)');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html
new file mode 100644
index 0000000000..f0070c787b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-inline-color with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
+<meta name="assert" content="border-inline-color supports only the grammar '<color>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("border-inline-start-color", "#12");
+test_invalid_value("border-inline-start-color", "auto");
+test_invalid_value("border-inline-start-color", "red green");
+test_invalid_value("border-inline-start-color", "rgb");
+test_invalid_value("border-inline-start-color", "rgb(1,2,3,4,5)");
+test_invalid_value("border-inline-start-color", "rgb(10%, 20, 30%)");
+test_invalid_value("border-inline-end-color", "#123456789");
+test_invalid_value("border-inline-end-color", "123");
+test_invalid_value("border-inline-end-color", "hsla(1,2,3,4,5)");
+test_invalid_value("border-inline-end-color", "red, green");
+test_invalid_value("border-inline-end-color", "rgb(1)");
+test_invalid_value("border-inline-end-color", "rgba(-2, 300, 400%, -0.5)");
+test_invalid_value("border-inline-color", "auto");
+test_invalid_value("border-inline-color", "lime, transparent");
+test_invalid_value("border-inline-color", "red green blue");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html
new file mode 100644
index 0000000000..6bf240006e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-inline-color with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-color">
+<meta name="assert" content="border-inline-color supports the full grammar '<color>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("border-inline-start-color", "currentcolor");
+test_valid_value("border-inline-start-color", "rgb(2, 3, 4)");
+test_valid_value("border-inline-end-color", "#234", "rgb(34, 51, 68)");
+test_valid_value("border-inline-end-color", "transparent");
+test_valid_value("border-inline-color", "#234", "rgb(34, 51, 68)");
+test_valid_value("border-inline-color", "transparent rgb(2, 3, 4)");
+test_valid_value("border-inline-color", "rgb(2, 3, 4) rgb(2, 3, 4)", "rgb(2, 3, 4)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html
new file mode 100644
index 0000000000..0ba858a685
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().borderInlineStyle</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style">
+<meta name="assert" content="border-inline-style is specified keyword(s).">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("border-inline-start-style", "dotted");
+test_computed_value("border-inline-start-style", "groove");
+test_computed_value("border-inline-start-style", "inset");
+test_computed_value("border-inline-start-style", "none");
+test_computed_value("border-inline-start-style", "solid");
+test_computed_value("border-inline-end-style", "dashed");
+test_computed_value("border-inline-end-style", "double");
+test_computed_value("border-inline-end-style", "hidden");
+test_computed_value("border-inline-end-style", "outset");
+test_computed_value("border-inline-end-style", "ridge");
+test_computed_value("border-inline-style", "dotted");
+test_computed_value("border-inline-style", "double groove");
+test_computed_value("border-inline-style", "hidden hidden", "hidden");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html
new file mode 100644
index 0000000000..6684dc19ec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-inline-style with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-style">
+<meta name="assert" content="border-inline-style supports only the grammar '<line-style>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("border-inline-start-style", "auto");
+test_invalid_value("border-inline-start-style", "hidden, outset");
+test_invalid_value("border-inline-end-style", "solid double");
+test_invalid_value("border-inline-style", "auto");
+test_invalid_value("border-inline-style", "groove, ridge");
+test_invalid_value("border-inline-style", "hidden inset dashed");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html
new file mode 100644
index 0000000000..4fd0cbbb09
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-inline-style with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-block">
+<meta name="assert" content="border-inline-style supports the full grammar '<line-style>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
+test_valid_value("border-inline-start-style", "dotted");
+test_valid_value("border-inline-start-style", "groove");
+test_valid_value("border-inline-start-style", "inset");
+test_valid_value("border-inline-start-style", "none");
+test_valid_value("border-inline-start-style", "solid");
+test_valid_value("border-inline-end-style", "dashed");
+test_valid_value("border-inline-end-style", "double");
+test_valid_value("border-inline-end-style", "hidden");
+test_valid_value("border-inline-end-style", "outset");
+test_valid_value("border-inline-end-style", "ridge");
+test_valid_value("border-inline-style", "dotted");
+test_valid_value("border-inline-style", "double groove");
+test_valid_value("border-inline-style", "hidden hidden", "hidden");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html
new file mode 100644
index 0000000000..be29783acf
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-inline with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline">
+<meta name="assert" content="border-inline supports the full grammar '<line-width> || <line-style> || <color>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// Similar to css-backgrounds/parsing/border-valid.html
+
+test_valid_value("border-inline", "1px dotted red");
+test_valid_value("border-inline", "double", ["double", "medium double"]);
+
+test_valid_value("border-inline-start", "green double thin", "thin double green");
+test_valid_value("border-inline-start", "green", ["green", "medium none green"]);
+test_valid_value("border-inline-end", "thin", ["thin", "thin none"]);
+test_valid_value("border-inline-end", "calc(10px - 0.5em) dotted red", "calc(-0.5em + 10px) dotted red");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html
new file mode 100644
index 0000000000..03b71f0386
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().borderInlineWidth</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
+<meta name="assert" content="border-inline-width is absolute length; zero if the border block style is none or hidden.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+</head>
+<body>
+<div id="box"></div>
+<div id="target"></div>
+<style>
+  #box {
+    border-style: dotted; /* Avoid border-*-width computed style 0 */
+    border-top-width: thin;
+    border-right-width: medium;
+    border-bottom-width: thick;
+  }
+  #target {
+    font-size: 40px;
+    border-inline-style: dotted; /* Avoid border-inline-*-width computed style 0 */
+  }
+</style>
+<script>
+'use strict';
+const box = document.getElementById('box');
+const thinWidth = getComputedStyle(box).borderTopWidth;
+const mediumWidth = getComputedStyle(box).borderRightWidth;
+const thickWidth = getComputedStyle(box).borderBottomWidth;
+
+test_computed_value("border-inline-start-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("border-inline-start-width", "calc(10px - 0.5em)", "0px");
+test_computed_value("border-inline-start-width", "thin", thinWidth);
+test_computed_value("border-inline-start-width", "medium", mediumWidth);
+
+test_computed_value("border-inline-end-width", "calc(10px + 0.5em)", "30px");
+test_computed_value("border-inline-end-width", "calc(10px - 0.5em)", "0px");
+test_computed_value("border-inline-end-width", "thick", thickWidth);
+
+test_computed_value("border-inline-width", "10px");
+test_computed_value("border-inline-width", "10px 20px");
+test_computed_value("border-inline-width", "10px 10px", "10px");
+test(() => {
+  box.style.borderInlineStartWidth = '10px';
+  box.style.borderInlineEndWidth = '10px';
+
+  box.style.borderInlineStartStyle = 'groove';
+  box.style.borderInlineEndStyle = 'solid';
+  assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px');
+  assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px');
+  assert_equals(getComputedStyle(box).borderInlineWidth, '10px');
+
+  box.style.borderInlineStartStyle = 'hidden';
+  box.style.borderInlineEndStyle = 'dashed';
+  assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px');
+  assert_equals(getComputedStyle(box).borderInlineEndWidth, '10px');
+  assert_equals(getComputedStyle(box).borderInlineWidth, '0px 10px');
+
+  box.style.borderInlineStartStyle = 'inset';
+  box.style.borderInlineEndStyle = 'none';
+  assert_equals(getComputedStyle(box).borderInlineStartWidth, '10px');
+  assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px');
+  assert_equals(getComputedStyle(box).borderInlineWidth, '10px 0px');
+
+  box.style.borderInlineStartStyle = 'none';
+  box.style.borderInlineEndStyle = 'hidden';
+  assert_equals(getComputedStyle(box).borderInlineStartWidth, '0px');
+  assert_equals(getComputedStyle(box).borderInlineEndWidth, '0px');
+  assert_equals(getComputedStyle(box).borderInlineWidth, '0px');
+}, 'width is zero if the border block style is none or hidden');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html
new file mode 100644
index 0000000000..8624fcf0fe
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-inline-width with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
+<meta name="assert" content="border-inline-width supports only the grammar '<line-width>{1,2}'.">
+<meta name="assert" content="Negative lengths are not allowed.">
+  <script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("border-inline-start-width", "-20px");
+test_invalid_value("border-inline-start-width", "auto");
+test_invalid_value("border-inline-start-width", "medium 40px");
+test_invalid_value("border-inline-end-width", "10");
+test_invalid_value("border-inline-end-width", "30%");
+
+test_invalid_value("border-inline-width", "thick, thin");
+test_invalid_value("border-inline-width", "10px 20px 30px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html
new file mode 100644
index 0000000000..81c7049c5e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing border-inline-width with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-border-inline-width">
+<meta name="assert" content="border-inline-width supports the full grammar '<line-width>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+// <length> | thin | medium | thick
+test_valid_value("border-inline-start-width", "10px");
+test_valid_value("border-inline-start-width", "calc(10px + 0.5em)", "calc(0.5em + 10px)");
+test_valid_value("border-inline-start-width", "thick");
+test_valid_value("border-inline-start-width", "thin");
+test_valid_value("border-inline-end-width", "0", "0px");
+test_valid_value("border-inline-end-width", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
+test_valid_value("border-inline-end-width", "medium");
+test_valid_value("border-inline-width", "10px");
+test_valid_value("border-inline-width", "medium calc(10px + 0.5em)", "medium calc(0.5em + 10px)");
+test_valid_value("border-inline-width", "10px 10px", "10px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html
new file mode 100644
index 0000000000..0f60165a34
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().inlineSize</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="inline-size computed value is an absolute length.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #parent {
+    width: 200px;
+  }
+  #target {
+    width: 0px;
+    height: 0px;
+    font-size: 40px;
+  }
+  #child {
+    width: 60px;
+  }
+</style>
+</head>
+<body>
+<div id="parent">
+  <div id="target">
+    <div id="child">
+    </div>
+  </div>
+</div>
+<script>
+test_computed_value("inline-size", "auto", "200px"); // parent width
+
+test_computed_value("inline-size", "10px");
+test_computed_value("inline-size", "20%", "40px");
+test_computed_value("inline-size", "calc(0.5em + 10px)", "30px");
+test_computed_value("inline-size", "calc(-0.5em + 10px)", "0px");
+
+test_computed_value("inline-size", "min-content", "60px"); // child width
+test_computed_value("inline-size", "max-content", "60px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html
new file mode 100644
index 0000000000..d3d5d3f84d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inline-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("inline-size", "none");
+
+test_invalid_value("inline-size", "min-content available");
+test_invalid_value("inline-size", "max-content 10px");
+test_invalid_value("inline-size", "20% available");
+
+test_invalid_value("inline-size", "-10px");
+test_invalid_value("inline-size", "-20%");
+test_invalid_value("inline-size", "60");
+test_invalid_value("inline-size", "10px 20%");
+
+test_invalid_value("inline-size", "10px border-box");
+test_invalid_value("inline-size", "content-box 20%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html
new file mode 100644
index 0000000000..e785b468cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inline-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("inline-size", "auto");
+
+test_valid_value("inline-size", "10px");
+test_valid_value("inline-size", "20%");
+test_valid_value("inline-size", "calc(2em + 3ex)");
+
+test_valid_value("inline-size", "min-content");
+test_valid_value("inline-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("inline-size", "fit-content(100px)");
+// test_valid_value("inline-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html
new file mode 100644
index 0000000000..d18e97dfc3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().insetBlock / insetInline</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block">
+<meta name="assert" content="Computed value is as specified, with lengths made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("inset-block-start", "auto");
+test_computed_value("inset-block-end", "-10px");
+test_computed_value("inset-inline-start", "-20%");
+test_computed_value("inset-inline-end", "calc(10px - 0.5em)", "-10px");
+
+test_computed_value("inset-block", "auto");
+test_computed_value("inset-block", "-10px");
+test_computed_value("inset-block", "calc(10px - 0.5em) -20%", "-10px -20%");
+test_computed_value("inset-block", "auto auto", "auto");
+test_computed_value("inset-inline", "-20%");
+test_computed_value("inset-inline", "calc(10px - 0.5em)", "-10px");
+test_computed_value("inset-inline", "-10px auto");
+test_computed_value("inset-inline", "auto calc(10px + 0.5em)", "auto 30px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html
new file mode 100644
index 0000000000..fe073f852e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block">
+<meta name="assert" content="inset-block, inset-inline support only the grammar '<'top'>{1,2}'.">
+<meta name="assert" content="inset-block, inset-inline longhands support only the grammar '<'top'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("inset-block-start", "none");
+test_invalid_value("inset-block-end", "10");
+test_invalid_value("inset-inline-start", "20% calc(10px - 0.5em)");
+test_invalid_value("inset-inline-end", "10px, auto");
+
+test_invalid_value("inset-block", "none");
+test_invalid_value("inset-block", "20%, calc(10px - 0.5em)");
+test_invalid_value("inset-inline", "10px auto 20px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html
new file mode 100644
index 0000000000..c089c2a0d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: inset-block and inset-inline set longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block">
+<meta name="assert" content="inset-block, inset-inline support the full grammar '<'top'>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('inset-block', '10px', {
+  'inset-block-start': '10px',
+  'inset-block-end': '10px'
+});
+
+test_shorthand_value('inset-block', '20% auto', {
+  'inset-block-start': '20%',
+  'inset-block-end': 'auto'
+});
+
+test_shorthand_value('inset-inline', '30%', {
+  'inset-inline-start': '30%',
+  'inset-inline-end': '30%'
+});
+
+test_shorthand_value('inset-inline', 'auto 40px', {
+  'inset-inline-start': 'auto',
+  'inset-inline-end': '40px'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html
new file mode 100644
index 0000000000..b08975251d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inset-block and inset-inline with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset-block">
+<meta name="assert" content="inset-block, inset-inline support the full grammar '<'top'>{1,2}'.">
+<meta name="assert" content="inset-block, inset-inline longhands support the full grammar '<'top'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("inset-block-start", "auto");
+test_valid_value("inset-block-end", "-10px");
+test_valid_value("inset-inline-start", "-20%");
+test_valid_value("inset-inline-end", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
+
+test_valid_value("inset-block", "auto");
+test_valid_value("inset-block", "-10px");
+test_valid_value("inset-block", "calc(10px - 0.5em) -20%", "calc(-0.5em + 10px) -20%");
+test_valid_value("inset-block", "auto auto", "auto");
+test_valid_value("inset-inline", "-20%");
+test_valid_value("inset-inline", "calc(10px - 0.5em)", "calc(-0.5em + 10px)");
+test_valid_value("inset-inline", "-10px auto");
+test_valid_value("inset-inline", "auto calc(10px + 0.5em)", "auto calc(0.5em + 10px)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html b/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html
new file mode 100644
index 0000000000..8a08830bd4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-computed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().inset</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset">
+<meta name="assert" content="Computed value is as specified, with lengths made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("inset", "auto");
+test_computed_value("inset", "-10px");
+
+test_computed_value("inset", "calc(10px - 0.5em) -20%", "-10px -20%");
+test_computed_value("inset", "auto auto", "auto");
+
+test_computed_value("inset", "10px calc(10px - 0.5em) -30px", "10px -10px -30px");
+test_computed_value("inset", "auto auto auto", "auto");
+
+test_computed_value("inset", "10px 20px auto -30px");
+test_computed_value("inset", "auto auto auto auto", "auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html
new file mode 100644
index 0000000000..604b801c76
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inset with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset">
+<meta name="assert" content="inset supports only the grammar '<'top'>{1,4}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("inset", "none");
+test_invalid_value("inset", "20%, calc(10px - 0.5em)");
+test_invalid_value("inset", "10px auto 20px auto 30px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html
new file mode 100644
index 0000000000..4557879129
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: inset sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset">
+<meta name="assert" content="inset supports the full grammar '<'top'>{1,4}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('inset', '1px 2px 3px 4px', {
+  'top': '1px',
+  'right': '2px',
+  'bottom': '3px',
+  'left': '4px'
+});
+
+test_shorthand_value('inset', '1px 2px 3px', {
+  'top': '1px',
+  'right': '2px',
+  'bottom': '3px',
+  'left': '2px'
+});
+
+test_shorthand_value('inset', '1px 2px', {
+  'top': '1px',
+  'right': '2px',
+  'bottom': '1px',
+  'left': '2px'
+});
+
+test_shorthand_value('inset', '1px', {
+  'top': '1px',
+  'right': '1px',
+  'bottom': '1px',
+  'left': '1px'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html b/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html
new file mode 100644
index 0000000000..2d8f937f07
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/inset-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing inset with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-inset">
+<meta name="assert" content="inset supports the full grammar '<'top'>{1,4}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("inset", "auto");
+test_valid_value("inset", "-10px");
+
+test_valid_value("inset", "calc(-0.5em + 10px) -20%");
+test_valid_value("inset", "auto auto", "auto");
+
+test_valid_value("inset", "10px calc(-0.5em + 10px) -30px");
+test_valid_value("inset", "auto auto auto", "auto");
+
+test_valid_value("inset", "10px calc(-0.5em + 10px) auto -30px");
+test_valid_value("inset", "auto auto auto auto", "auto");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html
new file mode 100644
index 0000000000..6ef52bda3b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().marginBlockStart etc.</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block">
+<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
+<meta name="assert" content="margin-block, margin-inline resolved values have absolute length.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #container {
+    will-change: transform; /* containing block for #target */
+    width: 200px;
+  }
+  #parent {
+    width: 0px;
+  }
+  #target {
+    position: absolute;
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="parent">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+test_computed_value("margin-block-start", "10px");
+test_computed_value("margin-block-end", "10%", "20px");
+test_computed_value("margin-inline-start", "30px");
+test_computed_value("margin-inline-end", "1em", "40px");
+
+test_computed_value('margin-block-start', 'calc(10% + 40px)', '60px');
+test_computed_value('margin-block-end', 'calc(10px + 0.5em)', '30px');
+test_computed_value('margin-inline-start', 'calc(10px + 0.5em)', '30px');
+test_computed_value('margin-inline-end', 'calc(10% + 40px)', '60px');
+
+test_computed_value("margin-block", "10px");
+test_computed_value("margin-block", "10px 20px");
+test_computed_value("margin-inline", "30px");
+test_computed_value("margin-inline", "30px 40px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html
new file mode 100644
index 0000000000..a1e0cbf388
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing margin-block and margin-inline with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block">
+<meta name="assert" content="margin-block, margin-inline support only the grammar '<'margin-top'>{1,2}'.">
+<meta name="assert" content="margin-block, margin-inline longhands support only the grammar '<'margin-top'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("margin-block-start", "none");
+test_invalid_value("margin-block-end", "10");
+test_invalid_value("margin-inline-start", "20% calc(10px - 0.5em)");
+test_invalid_value("margin-inline-end", "10px, auto");
+
+test_invalid_value("margin-block", "none");
+test_invalid_value("margin-block", "20%, calc(10px - 0.5em)");
+test_invalid_value("margin-inline", "10px auto 20px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html
new file mode 100644
index 0000000000..9cdae57402
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: margin-block and margin-inline sets longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block">
+<meta name="assert" content="margin-block, margin-inline support the full grammar '<'margin-top'>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('margin-block', '10px', {
+  'margin-block-start': '10px',
+  'margin-block-end': '10px'
+});
+
+test_shorthand_value('margin-block', '20% auto', {
+  'margin-block-start': '20%',
+  'margin-block-end': 'auto'
+});
+
+test_shorthand_value('margin-inline', '30%', {
+  'margin-inline-start': '30%',
+  'margin-inline-end': '30%'
+});
+
+test_shorthand_value('margin-inline', 'auto 40px', {
+  'margin-inline-start': 'auto',
+  'margin-inline-end': '40px'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html
new file mode 100644
index 0000000000..4a278f9034
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing margin-block and margin-inline with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block">
+<meta name="assert" content="margin-block, margin-inline support the full grammar '<'margin-top'>{1,2}'.">
+<meta name="assert" content="margin-block, margin-inline longhands support the full grammar '<'margin-top'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("margin-block-start", "calc(20% + 10px)");
+test_valid_value("margin-block-start", "auto");
+test_valid_value("margin-block-end", "-10px");
+test_valid_value("margin-inline-start", "-20%");
+test_valid_value("margin-inline-end", "calc(2em + 3ex)");
+
+test_valid_value("margin-block", "auto");
+test_valid_value("margin-block", "-10px");
+test_valid_value("margin-block", "calc(2em + 3ex) -20%");
+test_valid_value("margin-block", "auto auto", "auto");
+test_valid_value("margin-block", "-20% calc(20% + 10px)");
+test_valid_value("margin-inline", "20%");
+test_valid_value("margin-inline", "calc(2em + 3ex)");
+test_valid_value("margin-inline", "-10px auto");
+test_valid_value("margin-inline", "auto calc(2em + 3ex)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html
new file mode 100644
index 0000000000..12764d3ea6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().maxBlockSize</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-max-block-size">
+<meta name="assert" content="Computed max-block-size is the specified keyword, or the length-percentage made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("max-block-size", "none");
+
+test_computed_value("max-block-size", "10px");
+test_computed_value("max-block-size", "20%");
+test_computed_value("max-block-size", "calc(10px + 0.5em)", "30px");
+test_computed_value("max-block-size", "calc(10px - 0.5em)", "0px");
+test_computed_value("max-block-size", "calc(20% + 10px)");
+
+test_computed_value("max-block-size", "min-content");
+test_computed_value("max-block-size", "max-content");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html
new file mode 100644
index 0000000000..adcf6e497e
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-block-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("max-block-size", "auto");
+
+test_invalid_value("max-block-size", "min-content available");
+test_invalid_value("max-block-size", "max-content 10px");
+test_invalid_value("max-block-size", "20% available");
+
+test_invalid_value("max-block-size", "-10px");
+test_invalid_value("max-block-size", "-20%");
+test_invalid_value("max-block-size", "60");
+test_invalid_value("max-block-size", "10px 20%");
+
+test_invalid_value("max-block-size", "10px border-box");
+test_invalid_value("max-block-size", "content-box 20%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html
new file mode 100644
index 0000000000..75b5c6f549
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-block-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-block-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("max-block-size", "none");
+
+test_valid_value("max-block-size", "10px");
+test_valid_value("max-block-size", "20%");
+test_valid_value("max-block-size", "calc(2em + 3ex)");
+
+test_valid_value("max-block-size", "min-content");
+test_valid_value("max-block-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("max-block-size", "fit-content(100px)");
+// test_valid_value("max-block-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html
new file mode 100644
index 0000000000..693262f250
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().maxInlineSize</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-max-inline-size">
+<meta name="assert" content="Computed max-inline-size is the specified keyword, or the length-percentage made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<script>
+test_computed_value("max-inline-size", "none");
+
+test_computed_value("max-inline-size", "10px");
+test_computed_value("max-inline-size", "20%");
+test_computed_value("max-inline-size", "calc(10px + 0.5em)", "30px");
+test_computed_value("max-inline-size", "calc(10px - 0.5em)", "0px");
+test_computed_value("max-inline-size", "calc(20% + 10px)");
+
+test_computed_value("max-inline-size", "min-content");
+test_computed_value("max-inline-size", "max-content");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html
new file mode 100644
index 0000000000..fa695551b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-inline-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("max-inline-size", "auto");
+
+test_invalid_value("max-inline-size", "min-content available");
+test_invalid_value("max-inline-size", "max-content 10px");
+test_invalid_value("max-inline-size", "20% available");
+
+test_invalid_value("max-inline-size", "-10px");
+test_invalid_value("max-inline-size", "-20%");
+test_invalid_value("max-inline-size", "60");
+test_invalid_value("max-inline-size", "10px 20%");
+
+test_invalid_value("max-inline-size", "10px border-box");
+test_invalid_value("max-inline-size", "content-box 20%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html
new file mode 100644
index 0000000000..19d582962d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing max-inline-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="max-inline-size supports the full grammar 'none | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("max-inline-size", "none");
+
+test_valid_value("max-inline-size", "10px");
+test_valid_value("max-inline-size", "20%");
+test_valid_value("max-inline-size", "calc(2em + 3ex)");
+
+test_valid_value("max-inline-size", "min-content");
+test_valid_value("max-inline-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("max-inline-size", "fit-content(100px)");
+// test_valid_value("max-inline-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html
new file mode 100644
index 0000000000..7c59eb5a49
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().minBlockSize</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-min-block-size">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
+<meta name="assert" content="Computed min-block-size is the specified keyword, or the length-percentage made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+  #container {
+    display: flex;
+  }
+  #box {
+    min-block-size: auto;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<div id="container">
+  <div id="box"></div>
+</div>
+<script>
+test_computed_value("min-block-size", "auto", "0px");
+
+test_computed_value("min-block-size", "10px");
+test_computed_value("min-block-size", "20%");
+test_computed_value("min-block-size", "calc(10px + 0.5em)", "30px");
+test_computed_value("min-block-size", "calc(10px - 0.5em)", "0px");
+test_computed_value("min-block-size", "calc(20% + 10px)");
+
+test_computed_value("min-block-size", "min-content");
+test_computed_value("min-block-size", "max-content");
+
+test(() => {
+  const picture = document.getElementById('box');
+  assert_equals(getComputedStyle(picture).minBlockSize, 'auto');
+}, 'min-block-size auto computes to auto with flex layout.');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html
new file mode 100644
index 0000000000..325dc2e0ae
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-block-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("min-block-size", "none");
+
+test_invalid_value("min-block-size", "min-content available");
+test_invalid_value("min-block-size", "max-content 10px");
+test_invalid_value("min-block-size", "20% available");
+
+test_invalid_value("min-block-size", "-10px");
+test_invalid_value("min-block-size", "-20%");
+test_invalid_value("min-block-size", "60");
+test_invalid_value("min-block-size", "10px 20%");
+
+test_invalid_value("min-block-size", "10px border-box");
+test_invalid_value("min-block-size", "content-box 20%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html
new file mode 100644
index 0000000000..5a5d4a4385
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-block-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-block-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("min-block-size", "auto");
+
+test_valid_value("min-block-size", "10px");
+test_valid_value("min-block-size", "20%");
+test_valid_value("min-block-size", "calc(2em + 3ex)");
+
+test_valid_value("min-block-size", "min-content");
+test_valid_value("min-block-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("min-block-size", "fit-content(100px)");
+// test_valid_value("min-block-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html
new file mode 100644
index 0000000000..730ad4e474
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().minInlineSize</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-min-inline-size">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
+<meta name="assert" content="Computed min-inline-size is the specified keyword, or the length-percentage made absolute.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #target {
+    font-size: 40px;
+  }
+  #container {
+    display: flex;
+  }
+  #box {
+    min-inline-size: auto;
+  }
+</style>
+</head>
+<body>
+<div id="target"></div>
+<div id="container">
+  <div id="box"></div>
+</div>
+<script>
+test_computed_value("min-inline-size", "auto", "0px");
+
+test_computed_value("min-inline-size", "10px");
+test_computed_value("min-inline-size", "20%");
+test_computed_value("min-inline-size", "calc(10px + 0.5em)", "30px");
+test_computed_value("min-inline-size", "calc(10px - 0.5em)", "0px");
+test_computed_value("min-inline-size", "calc(20% + 10px)");
+
+test_computed_value("min-inline-size", "min-content");
+test_computed_value("min-inline-size", "max-content");
+
+test(() => {
+  const picture = document.getElementById('box');
+  assert_equals(getComputedStyle(picture).minInlineSize, 'auto');
+}, 'min-inline-size auto computes to auto with flex layout.');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html
new file mode 100644
index 0000000000..eb2cc8bb10
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-inline-size with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("min-inline-size", "none");
+
+test_invalid_value("min-inline-size", "min-content available");
+test_invalid_value("min-inline-size", "max-content 10px");
+test_invalid_value("min-inline-size", "20% available");
+
+test_invalid_value("min-inline-size", "-10px");
+test_invalid_value("min-inline-size", "-20%");
+test_invalid_value("min-inline-size", "60");
+test_invalid_value("min-inline-size", "10px 20%");
+
+test_invalid_value("min-inline-size", "10px border-box");
+test_invalid_value("min-inline-size", "content-box 20%");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html
new file mode 100644
index 0000000000..fa4ba0d1bb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing min-inline-size with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#dimension-properties">
+<meta name="assert" content="min-inline-size supports the full grammar 'auto | <length-percentage> | min-content | max-content | fit-content(<length-percentage>)'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("min-inline-size", "auto");
+
+test_valid_value("min-inline-size", "10px");
+test_valid_value("min-inline-size", "20%");
+test_valid_value("min-inline-size", "calc(2em + 3ex)");
+
+test_valid_value("min-inline-size", "min-content");
+test_valid_value("min-inline-size", "max-content");
+
+// The following are not yet supported by browsers:
+// test_valid_value("min-inline-size", "fit-content(100px)");
+// test_valid_value("min-inline-size", "fit-content(calc(10% + 10px))");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html
new file mode 100644
index 0000000000..230f18525a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: getComputedStyle().paddingBlockStart etc.</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block">
+<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
+<meta name="assert" content="padding-block, padding-inline resolved values have absolute length.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/computed-testcommon.js"></script>
+<style>
+  #container {
+    will-change: transform; /* containing block for #target */
+    width: 200px;
+  }
+  #parent {
+    width: 0px;
+  }
+  #target {
+    position: absolute;
+    font-size: 40px;
+  }
+</style>
+</head>
+<body>
+<div id="container">
+  <div id="parent">
+    <div id="target"></div>
+  </div>
+</div>
+<script>
+test_computed_value("padding-block-start", "10px");
+test_computed_value("padding-block-end", "10%", "20px");
+test_computed_value("padding-inline-start", "30px");
+test_computed_value("padding-inline-end", "1em", "40px");
+
+test_computed_value('padding-block-start', 'calc(10% + 40px)', '60px');
+test_computed_value('padding-block-end', 'calc(10% - 40px)', '0px');
+test_computed_value('padding-inline-start', 'calc(10% - 40px)', '0px');
+test_computed_value('padding-inline-end', 'calc(10% + 40px)', '60px');
+
+test_computed_value('padding-block-start', 'calc(10px - 0.5em)', '0px');
+test_computed_value('padding-block-end', 'calc(10px + 0.5em)', '30px');
+test_computed_value('padding-inline-start', 'calc(10px + 0.5em)', '30px');
+test_computed_value('padding-inline-end', 'calc(10px - 0.5em)', '0px');
+
+test_computed_value("padding-block", "10px");
+test_computed_value("padding-block", "10px 20px");
+test_computed_value("padding-inline", "30px");
+test_computed_value("padding-inline", "30px 40px");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html
new file mode 100644
index 0000000000..56c2adb078
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing padding-block and padding-inline with invalid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block">
+<meta name="assert" content="padding-block, padding-inline support only the grammar '<'padding-top'>{1,2}'.">
+<meta name="assert" content="padding-block, padding-inline longhands support only the grammar '<'padding-top'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_invalid_value("padding-block-start", "none");
+test_invalid_value("padding-block-start", "-10px");
+test_invalid_value("padding-block-end", "1px 2px");
+test_invalid_value("padding-block-end", "auto");
+test_invalid_value("padding-block-end", "10");
+test_invalid_value("padding-block-end", "1px, 2px");
+test_invalid_value("padding-inline-start", "20% calc(10px - 0.5em)");
+test_invalid_value("padding-inline-start", "2px auto");
+test_invalid_value("padding-inline-end", "-20%");
+test_invalid_value("padding-inline-end", "10px, auto");
+
+test_invalid_value("padding-block", "none");
+test_invalid_value("padding-block", "20% -10px");
+test_invalid_value("padding-block", "auto, -10px");
+test_invalid_value("padding-block", "20%, calc(10px - 0.5em)");
+test_invalid_value("padding-inline", "10px auto 20px");
+test_invalid_value("padding-inline", "1px 2px 3px");
+test_invalid_value("padding-inline", "-20% calc(20% + 10px)");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html
new file mode 100644
index 0000000000..d0811c27dc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: padding-block and padding-inline set longhands</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block">
+<meta name="assert" content="padding-block, padding-inline support the full grammar '<'padding-top'>{1,2}'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/shorthand-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_shorthand_value('padding-block', '0% 10px', {
+  'padding-block-start': '0%',
+  'padding-block-end': '10px'
+});
+
+test_shorthand_value('padding-block', '20%', {
+  'padding-block-start': '20%',
+  'padding-block-end': '20%'
+});
+
+test_shorthand_value('padding-inline', '10px 30%', {
+  'padding-inline-start': '10px',
+  'padding-inline-end': '30%'
+});
+
+test_shorthand_value('padding-inline', '0%', {
+  'padding-inline-start': '0%',
+  'padding-inline-end': '0%'
+});
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html
new file mode 100644
index 0000000000..1f3be17784
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CSS Logical Properties and Values: parsing padding-block and padding-inline with valid values</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block">
+<meta name="assert" content="padding-block, padding-inline support the full grammar '<'padding-top'>{1,2}'.">
+<meta name="assert" content="padding-block, padding-inline longhands support the full grammar '<'padding-top'>'.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("padding-block-start", "0", "0px");
+test_valid_value("padding-block-start", "calc(20% + 10px)");
+test_valid_value("padding-block-end", "10px");
+test_valid_value("padding-inline-start", "20%");
+test_valid_value("padding-inline-end", "calc(2em + 2ex)");
+
+test_valid_value("padding-block", "10px");
+test_valid_value("padding-block", "10px 20%");
+test_valid_value("padding-inline", "20%");
+test_valid_value("padding-inline", "20% calc(20% + 10px)");
+</script>
+</body>
+</html>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/css-logical/parsing
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip