From ceb1c37ba3141ef227dcf6e7f3fb426427a87eec Mon Sep 17 00:00:00 2001
From: Callum Law <callumlaw1709@outlook.com>
Date: Wed, 9 Jul 2025 19:34:47 +1200
Subject: [PATCH] LibWeb: Import CSS logical border property parsing WPT tests

---
 .../parsing/border-block-color-computed.txt   | 14 ++++
 .../parsing/border-block-style-computed.txt   | 18 +++++
 .../parsing/border-block-valid.txt            | 12 +++
 .../parsing/border-block-width-computed.txt   | 17 +++++
 .../parsing/border-inline-color-computed.txt  | 14 ++++
 .../parsing/border-inline-style-computed.txt  | 18 +++++
 .../parsing/border-inline-valid.txt           | 12 +++
 .../parsing/border-inline-width-computed.txt  | 17 +++++
 .../parsing/border-block-color-computed.html  | 31 ++++++++
 .../parsing/border-block-style-computed.html  | 30 ++++++++
 .../parsing/border-block-valid.html           | 25 ++++++
 .../parsing/border-block-width-computed.html  | 76 +++++++++++++++++++
 .../parsing/border-inline-color-computed.html | 31 ++++++++
 .../parsing/border-inline-style-computed.html | 30 ++++++++
 .../parsing/border-inline-valid.html          | 25 ++++++
 .../parsing/border-inline-width-computed.html | 76 +++++++++++++++++++
 16 files changed, 446 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-style-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-style-computed.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-valid.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-color-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-style-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-width-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-color-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-style-computed.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-valid.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-width-computed.html

diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt
new file mode 100644
index 00000000000..52f61aedb57
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-color-computed.txt
@@ -0,0 +1,14 @@
+Harness status: OK
+
+Found 8 tests
+
+6 Pass
+2 Fail
+Pass	Property border-block-start-color value 'currentcolor'
+Pass	Property border-block-start-color value 'rgb(2, 3, 4)'
+Pass	Property border-block-end-color value 'rgb(34, 51, 68)'
+Pass	Property border-block-end-color value 'transparent'
+Fail	Property border-block-color value 'rgb(34, 51, 68)'
+Pass	Property border-block-color value 'transparent rgb(2, 3, 4)'
+Fail	Property border-block-color value 'rgb(2, 3, 4) rgb(2, 3, 4)'
+Pass	Property border-block-color value 'currentcolor lime'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-style-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-style-computed.txt
new file mode 100644
index 00000000000..550c6501902
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-style-computed.txt
@@ -0,0 +1,18 @@
+Harness status: OK
+
+Found 13 tests
+
+13 Pass
+Pass	Property border-block-start-style value 'dotted'
+Pass	Property border-block-start-style value 'groove'
+Pass	Property border-block-start-style value 'inset'
+Pass	Property border-block-start-style value 'none'
+Pass	Property border-block-start-style value 'solid'
+Pass	Property border-block-end-style value 'dashed'
+Pass	Property border-block-end-style value 'double'
+Pass	Property border-block-end-style value 'hidden'
+Pass	Property border-block-end-style value 'outset'
+Pass	Property border-block-end-style value 'ridge'
+Pass	Property border-block-style value 'dotted'
+Pass	Property border-block-style value 'double groove'
+Pass	Property border-block-style value 'hidden hidden'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-valid.txt
new file mode 100644
index 00000000000..d93ca08ee50
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-valid.txt
@@ -0,0 +1,12 @@
+Harness status: OK
+
+Found 6 tests
+
+4 Pass
+2 Fail
+Fail	e.style['border-block'] = "1px dotted red" should set the property value
+Fail	e.style['border-block'] = "double" should set the property value
+Pass	e.style['border-block-start'] = "green double thin" should set the property value
+Pass	e.style['border-block-start'] = "green" should set the property value
+Pass	e.style['border-block-end'] = "thin" should set the property value
+Pass	e.style['border-block-end'] = "calc(10px - 0.5em) dotted red" should set the property value
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt
new file mode 100644
index 00000000000..3bcd165bea0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-block-width-computed.txt
@@ -0,0 +1,17 @@
+Harness status: OK
+
+Found 11 tests
+
+6 Pass
+5 Fail
+Pass	Property border-block-start-width value 'calc(10px + 0.5em)'
+Pass	Property border-block-start-width value 'calc(10px - 0.5em)'
+Pass	Property border-block-start-width value 'thin'
+Pass	Property border-block-start-width value 'medium'
+Fail	Property border-block-end-width value 'calc(10px + 0.5em)'
+Pass	Property border-block-end-width value 'calc(10px - 0.5em)'
+Fail	Property border-block-end-width value 'thick'
+Fail	Property border-block-width value '10px'
+Fail	Property border-block-width value '10px 20px'
+Fail	Property border-block-width value '10px 10px'
+Pass	width is zero if the border block style is none or hidden
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt
new file mode 100644
index 00000000000..0e2e0a836da
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-color-computed.txt
@@ -0,0 +1,14 @@
+Harness status: OK
+
+Found 8 tests
+
+6 Pass
+2 Fail
+Pass	Property border-inline-start-color value 'currentcolor'
+Pass	Property border-inline-start-color value 'rgb(2, 3, 4)'
+Pass	Property border-inline-end-color value 'rgb(34, 51, 68)'
+Pass	Property border-inline-end-color value 'transparent'
+Fail	Property border-inline-color value 'rgb(34, 51, 68)'
+Pass	Property border-inline-color value 'transparent rgb(2, 3, 4)'
+Fail	Property border-inline-color value 'rgb(2, 3, 4) rgb(2, 3, 4)'
+Pass	Property border-inline-color value 'currentcolor lime'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-style-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-style-computed.txt
new file mode 100644
index 00000000000..5ec93c84c1a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-style-computed.txt
@@ -0,0 +1,18 @@
+Harness status: OK
+
+Found 13 tests
+
+13 Pass
+Pass	Property border-inline-start-style value 'dotted'
+Pass	Property border-inline-start-style value 'groove'
+Pass	Property border-inline-start-style value 'inset'
+Pass	Property border-inline-start-style value 'none'
+Pass	Property border-inline-start-style value 'solid'
+Pass	Property border-inline-end-style value 'dashed'
+Pass	Property border-inline-end-style value 'double'
+Pass	Property border-inline-end-style value 'hidden'
+Pass	Property border-inline-end-style value 'outset'
+Pass	Property border-inline-end-style value 'ridge'
+Pass	Property border-inline-style value 'dotted'
+Pass	Property border-inline-style value 'double groove'
+Pass	Property border-inline-style value 'hidden hidden'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-valid.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-valid.txt
new file mode 100644
index 00000000000..cd2af1d9a2c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-valid.txt
@@ -0,0 +1,12 @@
+Harness status: OK
+
+Found 6 tests
+
+4 Pass
+2 Fail
+Fail	e.style['border-inline'] = "1px dotted red" should set the property value
+Fail	e.style['border-inline'] = "double" should set the property value
+Pass	e.style['border-inline-start'] = "green double thin" should set the property value
+Pass	e.style['border-inline-start'] = "green" should set the property value
+Pass	e.style['border-inline-end'] = "thin" should set the property value
+Pass	e.style['border-inline-end'] = "calc(10px - 0.5em) dotted red" should set the property value
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt
new file mode 100644
index 00000000000..1a605c02367
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/parsing/border-inline-width-computed.txt
@@ -0,0 +1,17 @@
+Harness status: OK
+
+Found 11 tests
+
+6 Pass
+5 Fail
+Pass	Property border-inline-start-width value 'calc(10px + 0.5em)'
+Pass	Property border-inline-start-width value 'calc(10px - 0.5em)'
+Pass	Property border-inline-start-width value 'thin'
+Pass	Property border-inline-start-width value 'medium'
+Fail	Property border-inline-end-width value 'calc(10px + 0.5em)'
+Pass	Property border-inline-end-width value 'calc(10px - 0.5em)'
+Fail	Property border-inline-end-width value 'thick'
+Fail	Property border-inline-width value '10px'
+Fail	Property border-inline-width value '10px 20px'
+Fail	Property border-inline-width value '10px 10px'
+Pass	width is zero if the border block style is none or hidden
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-color-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-color-computed.html
new file mode 100644
index 00000000000..96b38cb4f7e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-style-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-style-computed.html
new file mode 100644
index 00000000000..681fdcde6f9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-valid.html
new file mode 100644
index 00000000000..13acf88f112
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-width-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-block-width-computed.html
new file mode 100644
index 00000000000..fd9cd79fc43
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-color-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-color-computed.html
new file mode 100644
index 00000000000..26ab5730d23
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-style-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-style-computed.html
new file mode 100644
index 00000000000..59a1258b15d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-valid.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-valid.html
new file mode 100644
index 00000000000..af13b5612cd
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-width-computed.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/parsing/border-inline-width-computed.html
new file mode 100644
index 00000000000..5d2d393848f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/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>