From 36d22d82aa202bb199967e9512281e9a53db42c9 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 21:33:14 +0200
Subject: Adding upstream version 115.7.0esr.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../web-platform/tests/css/css-logical/META.yml    |   3 +
 .../tests/css/css-logical/animation-001.html       | 335 +++++++++++++++++++++
 .../tests/css/css-logical/animation-002.html       | 226 ++++++++++++++
 .../css/css-logical/animation-003.tentative.html   |  37 +++
 .../tests/css/css-logical/animation-004.html       | 284 +++++++++++++++++
 .../animations/caption-side-no-interpolation.html  |  15 +
 .../animations/float-interpolation.html            |  24 ++
 .../tests/css/css-logical/cascading-001-ref.html   |  39 +++
 .../tests/css/css-logical/cascading-001.html       |  57 ++++
 .../css/css-logical/getComputedStyle-listing.html  | 106 +++++++
 .../tests/css/css-logical/inheritance.html         |  95 ++++++
 .../css/css-logical/logical-box-border-color.html  |  15 +
 .../css/css-logical/logical-box-border-radius.html |  18 ++
 .../css-logical/logical-box-border-shorthands.html |  15 +
 .../css/css-logical/logical-box-border-style.html  |  15 +
 .../css/css-logical/logical-box-border-width.html  |  18 ++
 .../tests/css/css-logical/logical-box-inset.html   |  18 ++
 .../tests/css/css-logical/logical-box-margin.html  |  15 +
 .../tests/css/css-logical/logical-box-padding.html |  15 +
 .../tests/css/css-logical/logical-box-size.html    |  17 ++
 .../css-logical/logical-values-float-clear-1.html  |  39 +++
 .../css-logical/logical-values-float-clear-2.html  |  40 +++
 .../css-logical/logical-values-float-clear-3.html  |  39 +++
 .../css-logical/logical-values-float-clear-4.html  |  40 +++
 .../logical-values-float-clear-reftest.html        |  68 +++++
 .../css-logical/logical-values-float-clear.html    |  17 ++
 .../css/css-logical/logical-values-resize.html     |  15 +
 .../css-logical/logicalprops-block-size-vlr.html   | 122 ++++++++
 .../css/css-logical/logicalprops-block-size.html   | 123 ++++++++
 .../css-logical/logicalprops-inline-size-vlr.html  | 122 ++++++++
 .../css/css-logical/logicalprops-inline-size.html  | 119 ++++++++
 .../css/css-logical/logicalprops-quirklength.html  |  36 +++
 .../logicalprops-with-deferred-writing-mode.html   | 175 +++++++++++
 .../css-logical/logicalprops-with-variables.html   |  69 +++++
 .../css-logical/parsing/block-size-computed.html   |  44 +++
 .../css-logical/parsing/block-size-invalid.html    |  29 ++
 .../css/css-logical/parsing/block-size-valid.html  |  28 ++
 .../parsing/border-block-color-computed.html       |  31 ++
 .../parsing/border-block-color-invalid.html        |  31 ++
 .../parsing/border-block-color-valid.html          |  23 ++
 .../parsing/border-block-style-computed.html       |  30 ++
 .../parsing/border-block-style-invalid.html        |  22 ++
 .../parsing/border-block-style-valid.html          |  30 ++
 .../css-logical/parsing/border-block-valid.html    |  25 ++
 .../parsing/border-block-width-computed.html       |  76 +++++
 .../parsing/border-block-width-invalid.html        |  25 ++
 .../parsing/border-block-width-valid.html          |  27 ++
 .../parsing/border-inline-color-computed.html      |  31 ++
 .../parsing/border-inline-color-invalid.html       |  31 ++
 .../parsing/border-inline-color-valid.html         |  23 ++
 .../parsing/border-inline-style-computed.html      |  30 ++
 .../parsing/border-inline-style-invalid.html       |  22 ++
 .../parsing/border-inline-style-valid.html         |  30 ++
 .../css-logical/parsing/border-inline-valid.html   |  25 ++
 .../parsing/border-inline-width-computed.html      |  76 +++++
 .../parsing/border-inline-width-invalid.html       |  25 ++
 .../parsing/border-inline-width-valid.html         |  27 ++
 .../css-logical/parsing/inline-size-computed.html  |  44 +++
 .../css-logical/parsing/inline-size-invalid.html   |  29 ++
 .../css/css-logical/parsing/inline-size-valid.html |  28 ++
 .../parsing/inset-block-inline-computed.html       |  35 +++
 .../parsing/inset-block-inline-invalid.html        |  25 ++
 .../parsing/inset-block-inline-shorthand.html      |  35 +++
 .../parsing/inset-block-inline-valid.html          |  30 ++
 .../css/css-logical/parsing/inset-computed.html    |  33 ++
 .../css/css-logical/parsing/inset-invalid.html     |  19 ++
 .../css/css-logical/parsing/inset-shorthand.html   |  43 +++
 .../tests/css/css-logical/parsing/inset-valid.html |  27 ++
 .../parsing/margin-block-inline-computed.html      |  49 +++
 .../parsing/margin-block-inline-invalid.html       |  25 ++
 .../parsing/margin-block-inline-shorthand.html     |  35 +++
 .../parsing/margin-block-inline-valid.html         |  32 ++
 .../parsing/max-block-size-computed.html           |  32 ++
 .../parsing/max-block-size-invalid.html            |  29 ++
 .../css-logical/parsing/max-block-size-valid.html  |  28 ++
 .../parsing/max-inline-size-computed.html          |  32 ++
 .../parsing/max-inline-size-invalid.html           |  29 ++
 .../css-logical/parsing/max-inline-size-valid.html |  28 ++
 .../parsing/min-block-size-computed.html           |  47 +++
 .../parsing/min-block-size-invalid.html            |  29 ++
 .../css-logical/parsing/min-block-size-valid.html  |  28 ++
 .../parsing/min-inline-size-computed.html          |  47 +++
 .../parsing/min-inline-size-invalid.html           |  29 ++
 .../css-logical/parsing/min-inline-size-valid.html |  28 ++
 .../parsing/padding-block-inline-computed.html     |  54 ++++
 .../parsing/padding-block-inline-invalid.html      |  35 +++
 .../parsing/padding-block-inline-shorthand.html    |  35 +++
 .../parsing/padding-block-inline-valid.html        |  27 ++
 .../logical-values-float-clear-1-ref.html          |  36 +++
 .../logical-values-float-clear-2-ref.html          |  37 +++
 .../logical-values-float-clear-3-ref.html          |  38 +++
 .../logical-values-float-clear-4-ref.html          |  39 +++
 .../logical-values-float-clear-reftest-ref.html    |  68 +++++
 .../css-logical/resources/test-box-properties.js   | 297 ++++++++++++++++++
 .../css-logical/resources/test-logical-values.js   |  27 ++
 .../tests/css/css-logical/resources/test-shared.js | 112 +++++++
 96 files changed, 4812 insertions(+)
 create mode 100644 testing/web-platform/tests/css/css-logical/META.yml
 create mode 100644 testing/web-platform/tests/css/css-logical/animation-001.html
 create mode 100644 testing/web-platform/tests/css/css-logical/animation-002.html
 create mode 100644 testing/web-platform/tests/css/css-logical/animation-003.tentative.html
 create mode 100644 testing/web-platform/tests/css/css-logical/animation-004.html
 create mode 100644 testing/web-platform/tests/css/css-logical/animations/caption-side-no-interpolation.html
 create mode 100644 testing/web-platform/tests/css/css-logical/animations/float-interpolation.html
 create mode 100644 testing/web-platform/tests/css/css-logical/cascading-001-ref.html
 create mode 100644 testing/web-platform/tests/css/css-logical/cascading-001.html
 create mode 100644 testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html
 create mode 100644 testing/web-platform/tests/css/css-logical/inheritance.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-border-color.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-border-radius.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-border-shorthands.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-border-style.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-border-width.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-inset.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-margin.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-padding.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-box-size.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-values-float-clear-1.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-values-float-clear-2.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-values-float-clear-3.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-values-float-clear-4.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-values-float-clear.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logical-values-resize.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logicalprops-block-size.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logicalprops-quirklength.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logicalprops-with-deferred-writing-mode.html
 create mode 100644 testing/web-platform/tests/css/css-logical/logicalprops-with-variables.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/block-size-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/block-size-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/block-size-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-color-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-color-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-color-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-style-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-style-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-style-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-width-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-width-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-block-width-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-color-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-color-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-color-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-style-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-style-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-style-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-width-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-width-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/border-inline-width-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inline-size-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inline-size-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inline-size-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-block-inline-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/inset-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/margin-block-inline-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/max-block-size-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/max-block-size-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/max-block-size-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/max-inline-size-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/max-inline-size-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/max-inline-size-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/min-block-size-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/min-block-size-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/min-block-size-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/min-inline-size-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/min-inline-size-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/min-inline-size-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-computed.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-invalid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-shorthand.html
 create mode 100644 testing/web-platform/tests/css/css-logical/parsing/padding-block-inline-valid.html
 create mode 100644 testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-1-ref.html
 create mode 100644 testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-2-ref.html
 create mode 100644 testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-3-ref.html
 create mode 100644 testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-4-ref.html
 create mode 100644 testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html
 create mode 100644 testing/web-platform/tests/css/css-logical/resources/test-box-properties.js
 create mode 100644 testing/web-platform/tests/css/css-logical/resources/test-logical-values.js
 create mode 100644 testing/web-platform/tests/css/css-logical/resources/test-shared.js

(limited to 'testing/web-platform/tests/css/css-logical')

diff --git a/testing/web-platform/tests/css/css-logical/META.yml b/testing/web-platform/tests/css/css-logical/META.yml
new file mode 100644
index 0000000000..cf789d631b
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/META.yml
@@ -0,0 +1,3 @@
+spec: https://drafts.csswg.org/css-logical/
+suggested_reviewers:
+  - fantasai
diff --git a/testing/web-platform/tests/css/css-logical/animation-001.html b/testing/web-platform/tests/css/css-logical/animation-001.html
new file mode 100644
index 0000000000..71542022c9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/animation-001.html
@@ -0,0 +1,335 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Animating CSS logical properties using Web Animations</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../css-animations/support/testcommon.js"></script>
+<style>
+:root {
+  --200px: 200px;
+  --300px: 300px;
+  --writingMode: horizontal-tb;
+}
+</style>
+
+<div id="log"></div>
+<script>
+'use strict';
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).height, '50px');
+}, 'Logical properties can be animated using object notation');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    [{ blockSize: '0px' }, { blockSize: '100px' }],
+    1000
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).height, '50px');
+}, 'Logical properties can be animated using array notation');
+
+test(t => {
+  const anim = addDiv(t).animate({ blockSize: ['0px', '100px'] }, 1000);
+  assert_equals(anim.effect.getKeyframes().length, 2);
+
+  assert_own_property(anim.effect.getKeyframes()[0], 'blockSize');
+  assert_false(anim.effect.getKeyframes()[0].hasOwnProperty('height'));
+
+  assert_own_property(anim.effect.getKeyframes()[1], 'blockSize');
+  assert_false(anim.effect.getKeyframes()[1].hasOwnProperty('height'));
+}, 'Logical properties are NOT stored as physical properties');
+
+test(t => {
+  const div = addDiv(t, { style: 'writing-mode: vertical-rl' });
+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Logical properties in animations respect the writing-mode');
+
+test(t => {
+  const div = addDiv(t, { style: 'direction: rtl' });
+  const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000);
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).marginLeft, '0px');
+  assert_equals(getComputedStyle(div).marginRight, '50px');
+}, 'Logical properties in animations respect the direction');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      blockSize: ['0px', '100px'],
+      height: ['200px', '300px'],
+    },
+    1000
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Physical properties win over logical properties in object notation');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    [
+      { height: '200px', blockSize: '0px' },
+      { height: '300px', blockSize: '100px' },
+    ],
+    1000
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Physical properties win over logical properties in array notation');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      blockSize: ['0px', '100px'],
+      height: ['var(--200px)', 'var(--300px)'],
+    },
+    1000
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Physical properties with variables win over logical properties');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      marginInlineStart: '100px',
+      marginInline: '200px',
+      margin: 'logical 300px',
+    },
+    { duration: 1, easing: 'step-start' }
+  );
+  assert_equals(getComputedStyle(div).marginLeft, '100px');
+  assert_equals(getComputedStyle(div).marginRight, '200px');
+  assert_equals(getComputedStyle(div).marginTop, '300px');
+  assert_equals(getComputedStyle(div).marginBottom, '300px');
+}, 'Logical shorthands follow the usual prioritization based on number of'
+   + ' component longhands');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      marginInline: '100px',
+      marginLeft: '200px',
+    },
+    { duration: 1, easing: 'step-start' }
+  );
+  assert_equals(getComputedStyle(div).marginLeft, '200px');
+  assert_equals(getComputedStyle(div).marginRight, '100px');
+}, 'Physical longhands win over logical shorthands');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      marginInlineStart: '100px',
+      margin: '200px',
+    },
+    { duration: 1, easing: 'step-start' }
+  );
+  assert_equals(getComputedStyle(div).marginLeft, '100px');
+  assert_equals(getComputedStyle(div).marginRight, '200px');
+}, 'Logical longhands win over physical shorthands');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      marginInline: '100px',
+      margin: '200px',
+    },
+    { duration: 1, easing: 'step-start' }
+  );
+  assert_equals(getComputedStyle(div).marginLeft, '200px');
+  assert_equals(getComputedStyle(div).marginRight, '200px');
+}, 'Physical shorthands win over logical shorthands');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      marginInline: '100px',
+      margin: 'var(--200px)',
+    },
+    { duration: 1, easing: 'step-start' }
+  );
+  assert_equals(getComputedStyle(div).marginLeft, '200px');
+  assert_equals(getComputedStyle(div).marginRight, '200px');
+}, 'Physical shorthands using variables win over logical shorthands');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate([{ blockSize: '200px' }, { height: '300px' }], 1000);
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Physical properties and logical properties can be mixed');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    [{ marginInline: '200px' }, { marginRight: '300px' }],
+    1000
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).marginRight, '250px');
+}, 'Physical shorthands and logical shorthands can be mixed');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    [{ blockSize: '100px', height: '200px' }, { height: '300px' }],
+    1000
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Physical properties win over logical properties even when some keyframes'
+   + ' only have logical properties');
+
+test(t => {
+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
+  anim.currentTime = 500;
+
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '50px');
+
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Animations update when the writing-mode is changed');
+
+test(t => {
+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
+  const anim = div.animate(
+    { blockSize: ['0px', '100px'] },
+    {
+      duration: 1000,
+      fill: 'forwards',
+    }
+  );
+  anim.finish();
+
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '100px');
+
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '100px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Filling animations update when the writing-mode is changed');
+
+test(t => {
+  const div = addDiv(t, { style: 'width: 100px; height: 200px' });
+  const anim = div.animate({ blockSize: '300px' }, 1000);
+  anim.currentTime = 500;
+
+  // Initially we are animating height from 200px -> 300px
+  assert_equals(getComputedStyle(div).width, '100px');
+  assert_equals(getComputedStyle(div).height, '250px');
+
+  // After the change we are animating width from 100px -> 300px
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '200px');
+  assert_equals(getComputedStyle(div).height, '200px');
+}, 'Animations with implicit from values update when the writing-mode'
+   + ' is changed');
+
+test(t => {
+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
+  const anim = div.animate(
+    [
+      { height: '200px', blockSize: '0px' },
+      { height: '300px', blockSize: '100px' },
+    ],
+    1000
+  );
+  anim.currentTime = 500;
+
+  // Initially writing-mode is horizontal-tb so the 'block-size' values are
+  // clobbered by the 'height' values.
+
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '250px');
+
+  // After updating the writing-mode to vertical-rl the 'block-size' values
+  // should no longer be overridden and should apply to the height.
+
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Animations with overlapping physical and logical properties update'
+   + ' when the writing-mode is changed');
+
+test(t => {
+  const div = addDiv(t, { style: 'width: 0px; height: 0px' });
+  div.style.writingMode = 'var(--writingMode)';
+  const anim = div.animate({ blockSize: ['0px', '100px'] }, 1000);
+  anim.currentTime = 500;
+
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '50px');
+
+  div.style.setProperty('--writingMode', 'vertical-rl');
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Animations update when the writing-mode is changed through a CSS variable');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate({ marginInlineStart: ['0px', '100px'] }, 1000);
+  anim.currentTime = 500;
+
+  assert_equals(getComputedStyle(div).marginLeft, '50px');
+  assert_equals(getComputedStyle(div).marginRight, '0px');
+
+  div.style.direction = 'rtl';
+  assert_equals(getComputedStyle(div).marginLeft, '0px');
+  assert_equals(getComputedStyle(div).marginRight, '50px');
+}, 'Animations update when the direction is changed');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    {
+      insetBlock: ['var(--200px)', 'var(--300px)'],
+    },
+    1000
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).insetBlockStart, '250px');
+}, 'Logical shorthand with variable references animates correctly');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    { writingMode: 'vertical-rl' },
+    { duration: 1, easing: 'step-start' }
+  );
+  assert_equals(getComputedStyle(div).writingMode, 'horizontal-tb');
+  assert_equals(anim.effect.getKeyframes().length, 0);
+}, 'writing-mode is not animatable');
+
+test(t => {
+  const div = addDiv(t);
+  const anim = div.animate(
+    { writingMode: 'rtl' },
+    { duration: 1, easing: 'step-start' }
+  );
+  anim.currentTime = 500;
+  assert_equals(getComputedStyle(div).direction, 'ltr');
+  assert_equals(anim.effect.getKeyframes().length, 0);
+}, 'direction is not animatable');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/animation-002.html b/testing/web-platform/tests/css/css-logical/animation-002.html
new file mode 100644
index 0000000000..9213a05d83
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/animation-002.html
@@ -0,0 +1,226 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Animating CSS logical properties using CSS Animations</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../css-animations/support/testcommon.js"></script>
+
+<div id="log"></div>
+<script>
+'use strict';
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
+  });
+  const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' });
+  assert_equals(getComputedStyle(div).height, '50px');
+}, 'Logical properties can be animated');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear; writing-mode: vertical-rl',
+  });
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Logical properties in animations respect the writing-mode');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim':
+      'from { margin-inline-start: 0px } to { margin-inline-start: 100px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear; direction: rtl',
+  });
+  assert_equals(getComputedStyle(div).marginLeft, '0px');
+  assert_equals(getComputedStyle(div).marginRight, '50px');
+}, 'Logical properties in animations respect the direction');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim':
+      'from { block-size: 0px; height: 200px }'
+      + ' to { block-size: 100px; height: 300px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear',
+  });
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Declaration order is respected within @keyframes declaration blocks');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim':
+      'to { margin-top: 200px;'
+        + ' margin-block-start: 100px }'
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s paused step-start',
+  });
+  assert_equals(getComputedStyle(div).marginTop, '100px');
+}, 'Logical properties are able to override physical properties in'
+   + ' @keyframes declaration blocks');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim':
+      'to {'
+      + ' margin-inline: 200px;'
+      + ' margin-inline-start: 0px;'
+      + ' margin-inline-start: 100px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s paused step-start',
+  });
+  assert_equals(getComputedStyle(div).marginLeft, '100px');
+}, 'Declaration order is respected amongst logical properties within'
+   + ' @keyframes declaration blocks');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim': 'from { block-size: 200px } to { height: 300px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear',
+  });
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Physical properties and logical properties can be mixed');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim':
+      'from { height: 100px; block-size: 200px }'
+      + ' to { block-size: 100px; height: 300px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear',
+  });
+  assert_equals(getComputedStyle(div).height, '250px');
+}, 'Declaration order is respected on each keyframe individually');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px',
+  });
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '50px');
+
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Animations update when the writing-mode is changed');
+
+promise_test(async t => {
+  addStyle(t, {
+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -9.9s linear forwards;'
+      + ' width: 0px; height: 0px',
+  });
+  const watcher = new EventWatcher(t, div, [ 'animationend' ]);
+  await watcher.wait_for('animationend');
+
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '100px');
+
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '100px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Filling animations update when the writing-mode is changed');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim': 'to { block-size: 100px; height: 200px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear; width: 0px; height: 0px',
+  });
+  // Initially we are interpolating the height from 0 to 200px
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '100px');
+
+  // But once we change the writing-mode, we will be interpolating *both*
+  // the height (from 0px to 200px) *and* the width (from 0px to 100px).
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '100px');
+}, 'The number of interpolating properties can be increased when the'
+   + ' writing-mode is changed');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim': 'to { width: 300px; block-size: 200px }',
+  });
+  const div = addDiv(t, {
+    style: 'animation: anim 10s -5s paused linear; width: 100px; height: 100px',
+  });
+  // Initially we are interpolating the width (100px -> 300px) and the height
+  // (100px -> 200px).
+  assert_equals(getComputedStyle(div).width, '200px');
+  assert_equals(getComputedStyle(div).height, '150px');
+
+  // Once we change the writing-mode, we will be interpolating *only* the
+  // width (100px -> 200px).
+  div.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(div).width, '150px');
+  assert_equals(getComputedStyle(div).height, '100px');
+}, 'The number of interpolating properties can be decreased when the'
+   + ' writing-mode is changed');
+
+test(t => {
+  addStyle(t, { ':root': '--writingMode: horizontal-tb' });
+  addStyle(t, {
+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
+  });
+  const div = addDiv(t, {
+    style:
+      'animation: anim 10s -5s paused linear;'
+      + ' width: 0px; height: 0px;'
+      + ' writing-mode: var(--writingMode)'
+  });
+  assert_equals(getComputedStyle(div).width, '0px');
+  assert_equals(getComputedStyle(div).height, '50px');
+
+  div.style.setProperty('--writingMode', 'vertical-rl');
+  assert_equals(getComputedStyle(div).width, '50px');
+  assert_equals(getComputedStyle(div).height, '0px');
+}, 'Animations update when the writing-mode is changed through a CSS variable');
+
+test(t => {
+  addStyle(t, { ':root': '--200px: 200px; --300px: 300px' });
+  addStyle(t, {
+    '@keyframes anim': 'from { inset-block: var(--200px) } to { inset-block: var(--300px) }',
+  });
+  const div = addDiv(t, {
+    style:
+      'animation: anim 10s -5s paused linear;'
+      + ' width: 0px; height: 0px;'
+  });
+  assert_equals(getComputedStyle(div).insetBlockStart, '250px');
+}, 'Logical shorthand with variable references animates correctly');
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim':
+      'from { margin-inline-start: 0px } to { margin-inline-start: 100px }',
+  });
+  const div = addDiv(t, { style: 'animation: anim 10s -5s paused linear' });
+  assert_equals(getComputedStyle(div).marginLeft, '50px');
+  assert_equals(getComputedStyle(div).marginRight, '0px');
+
+  div.style.direction = 'rtl';
+  assert_equals(getComputedStyle(div).marginLeft, '0px');
+  assert_equals(getComputedStyle(div).marginRight, '50px');
+}, 'Animations update when the direction is changed');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/animation-003.tentative.html b/testing/web-platform/tests/css/css-logical/animation-003.tentative.html
new file mode 100644
index 0000000000..bcb4e15d80
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/animation-003.tentative.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Animating CSS logical properties using CSS Animations - Web Animations reflection</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../css-animations/support/testcommon.js"></script>
+
+<div id="log"></div>
+<script>
+'use strict';
+
+/*
+ * The mapping from CSS Animations to Web Animations has yet to be specified
+ * but, when it is, we expect it to require that logical properties in CSS
+ * keyframes be represented as physical properties in the result returned from
+ * getKeyframes() since this is consistent with the behavior of expanding out
+ * all shorthands in to their consituent longhands in order to resolve
+ * overlapping properties.
+ */
+
+test(t => {
+  addStyle(t, {
+    '@keyframes anim': 'from { block-size: 0px } to { block-size: 100px }',
+  });
+  const div = addDiv(t, { style: 'animation: anim 10s' });
+  const anim = div.getAnimations()[0];
+
+  assert_own_property(anim.effect.getKeyframes()[0], 'height');
+  assert_false(anim.effect.getKeyframes()[0].hasOwnProperty('blockSize'));
+
+  assert_own_property(anim.effect.getKeyframes()[1], 'height');
+  assert_false(anim.effect.getKeyframes()[1].hasOwnProperty('blockSize'));
+}, 'Logical properties are represented as physical properties in keyframes');
+
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/animation-004.html b/testing/web-platform/tests/css/css-logical/animation-004.html
new file mode 100644
index 0000000000..c1bed63872
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/animation-004.html
@@ -0,0 +1,284 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Animating CSS logical properties using CSS Transitions</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#box">
+<meta name="assert" content="The specified values of these properties are separate from the specified values of the parallel physical properties, but the flow-relative and physical properties share computed values.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../css-animations/support/testcommon.js"></script>
+
+<div id="log"></div>
+<div id="test"></div>
+<script>
+'use strict';
+
+const testEl = document.getElementById("test");
+
+function makeDeclaration(object = {}) {
+  return Object.entries(object).map(([prop, val]) => prop + ": " + val).join("; ");
+}
+
+/**
+ * Starts a CSS transition in testEl. By default, the transition will affect the properies
+ * specified in finalStyles, be linear, last 10 seconds and start halfway, but this can be
+ * overridden in baseStyles.
+ *
+ * @param t  The testharness.js Test object.
+ * @param baseStyles  A dictionary object with property names and values to set on the
+ *                    element before starting the transition.
+ * @param finalStyles  A dictionary object with property names and values towards which
+ *                     the element will transition.
+ * @param [transitionStyles]  An optional dictionary object to costumize the transition.
+ */
+function transition(t, baseStyles, finalStyles, transitionStyles = {}) {
+  // Clear styles from previous test.
+  testEl.style.cssText = "";
+  testEl.className = "";
+  getComputedStyle(testEl).height;
+
+  // Set base and final styles
+  addStyle(t, {
+    "#test": makeDeclaration(baseStyles),
+    "#test.transition": makeDeclaration(finalStyles),
+  });
+  getComputedStyle(testEl).height;
+
+  // Set transition styles
+  const defaultTransition = {
+    "transition-property": Object.keys(finalStyles).join(", "),
+    "transition-timing-function": "linear",
+    "transition-duration": "10s",
+    "transition-delay": "-5s",
+  };
+  addStyle(t, {
+    "#test": makeDeclaration(Object.assign(defaultTransition, transitionStyles)),
+  });
+
+  // Start the transition
+  testEl.className = "transition";
+}
+
+test(t => {
+  transition(t, {
+    "block-size": "0px",
+  }, {
+    "block-size": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).height, '50px');
+}, 'Logical properties can be transitioned');
+
+test(t => {
+  transition(t, {
+    "block-size": "0px",
+    "writing-mode": "vertical-rl",
+  }, {
+    "block-size": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).width, '50px');
+  assert_equals(getComputedStyle(testEl).height, '0px');
+}, 'Logical properties in transitions respect the writing-mode');
+
+test(t => {
+  transition(t, {
+    "margin-inline-start": "0px",
+    "direction": "rtl",
+  }, {
+    "margin-inline-start": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '0px');
+  assert_equals(getComputedStyle(testEl).marginRight, '50px');
+}, 'Logical properties in transitions respect the direction');
+
+test(t => {
+  transition(t, {
+    "block-size": "0px",
+    "height": "200px",
+  }, {
+    "block-size": "100px",
+    "height": "300px",
+  });
+  assert_equals(getComputedStyle(testEl).height, '250px');
+}, 'Declaration order is respected within declaration blocks');
+
+test(t => {
+  transition(t, {}, {
+    "margin-top": "200px",
+    "margin-block-start": "100px"
+  }, {
+    "transition-timing-function": "step-start",
+  });
+  assert_equals(getComputedStyle(testEl).marginTop, '100px');
+}, 'Logical properties are able to override physical properties in declaration blocks');
+
+test(t => {
+  transition(t, {}, {
+    "margin-inline": "200px",
+    "margin-inline-start": "0px",
+    "margin-inline-start": "100px",
+  }, {
+    "transition-timing-function": "step-start",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '100px');
+}, 'Declaration order is respected amongst logical properties within declaration blocks');
+
+test(t => {
+  transition(t, {
+    "block-size": "200px",
+  }, {
+    "height": "300px",
+  });
+  assert_equals(getComputedStyle(testEl).height, '250px');
+}, 'Physical properties and logical properties can be mixed');
+
+test(t => {
+  transition(t, {
+    "height": "100px",
+    "block-size": "200px",
+  }, {
+    "block-size": "100px",
+    "height": "300px",
+  });
+  assert_equals(getComputedStyle(testEl).height, '250px');
+}, 'Declaration order is respected on each keyframe individually');
+
+test(t => {
+  transition(t, {
+    "width": "0px",
+    "height": "0px",
+    "block-size": "0px",
+  }, {
+    "block-size": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).width, '0px');
+  assert_equals(getComputedStyle(testEl).height, '50px');
+
+  testEl.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(testEl).width, '50px');
+  assert_equals(getComputedStyle(testEl).height, '0px');
+}, 'Transitions update when the writing-mode is changed');
+
+promise_test(async t => {
+  transition(t, {
+    "width": "0px",
+    "height": "0px",
+    "block-size": "0px",
+  }, {
+    "block-size": "100px",
+  }, {
+    "transition-delay": "-9.9s",
+  });
+  const watcher = new EventWatcher(t, testEl, [ 'transitionend' ]);
+  await watcher.wait_for('transitionend');
+
+  assert_equals(getComputedStyle(testEl).width, '0px');
+  assert_equals(getComputedStyle(testEl).height, '100px');
+
+  testEl.style.transition = 'none';
+  testEl.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(testEl).width, '100px');
+  assert_equals(getComputedStyle(testEl).height, '0px');
+}, 'Filling transitions update when the writing-mode is changed');
+
+test(t => {
+  transition(t, {
+    "width": "0px",
+    "height": "0px",
+  }, {
+    "block-size": "100px",
+    "height": "200px",
+  });
+
+  // Initially we are interpolating the height from 0 to 200px
+  assert_equals(getComputedStyle(testEl).width, '0px');
+  assert_equals(getComputedStyle(testEl).height, '100px');
+
+  // But once we change the writing-mode, we will be interpolating *both*
+  // the height (from 0px to 200px) *and* the width (from 0px to 100px).
+  testEl.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(testEl).width, '50px');
+  assert_equals(getComputedStyle(testEl).height, '100px');
+}, 'The number of interpolating properties can be increased when the'
+   + ' writing-mode is changed');
+
+test(t => {
+  transition(t, {
+    "width": "100px",
+    "height": "100px",
+  }, {
+    "width": "500px",
+    "block-size": "200px",
+  });
+
+  // Initially we are interpolating the width (100px -> 500px) and the height
+  // (100px -> 200px).
+  assert_equals(getComputedStyle(testEl).width, '300px');
+  assert_equals(getComputedStyle(testEl).height, '150px');
+
+  // Once we change the writing-mode, we will be interpolating *only* the
+  // width (300px -> 200px).
+  testEl.style.writingMode = 'vertical-rl';
+  assert_equals(getComputedStyle(testEl).width, '250px');
+  assert_equals(getComputedStyle(testEl).height, '100px');
+}, 'The number of interpolating properties can be decreased when the'
+   + ' writing-mode is changed');
+
+test(t => {
+  addStyle(t, { ':root': '--writingMode: horizontal-tb' });
+  transition(t, {
+    "width": "0px",
+    "height": "0px",
+    "writing-mode": "var(--writingMode)",
+    "block-size": "0px",
+  }, {
+    "block-size": "100px"
+  });
+  assert_equals(getComputedStyle(testEl).width, '0px');
+  assert_equals(getComputedStyle(testEl).height, '50px');
+
+  testEl.style.setProperty('--writingMode', 'vertical-rl');
+  assert_equals(getComputedStyle(testEl).width, '50px');
+  assert_equals(getComputedStyle(testEl).height, '0px');
+}, 'Transitions update when the writing-mode is changed through a CSS variable');
+
+test(t => {
+  transition(t, {
+    "margin-inline-start": "0px",
+  }, {
+    "margin-inline-start": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '50px');
+  assert_equals(getComputedStyle(testEl).marginRight, '0px');
+
+  testEl.style.direction = 'rtl';
+  assert_equals(getComputedStyle(testEl).marginLeft, '0px');
+  assert_equals(getComputedStyle(testEl).marginRight, '50px');
+}, 'Transitions update when the direction is changed');
+
+test(t => {
+  transition(t, {
+    "margin-inline-start": "100px",
+  }, {
+    "margin-left": "200px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '150px');
+  assert_equals(getComputedStyle(testEl).marginRight, '0px');
+
+  testEl.style.direction = 'rtl';
+  assert_equals(getComputedStyle(testEl).marginLeft, '150px');
+  assert_equals(getComputedStyle(testEl).marginRight, '100px');
+}, 'Transitions from logical to physical update when the direction is changed');
+
+test(t => {
+  transition(t, {
+    "margin-left": "200px",
+  }, {
+    "margin-inline-start": "100px",
+  });
+  assert_equals(getComputedStyle(testEl).marginLeft, '150px');
+  assert_equals(getComputedStyle(testEl).marginRight, '0px');
+
+  testEl.style.direction = 'rtl';
+  assert_equals(getComputedStyle(testEl).marginLeft, '200px');
+  assert_equals(getComputedStyle(testEl).marginRight, '50px');
+}, 'Transitions from physical to logical update when the direction is changed');
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/animations/caption-side-no-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/caption-side-no-interpolation.html
new file mode 100644
index 0000000000..2eef093e46
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/animations/caption-side-no-interpolation.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_no_interpolation({
+  property: 'caption-side',
+  from: 'initial',
+  to: 'bottom'
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/animations/float-interpolation.html b/testing/web-platform/tests/css/css-logical/animations/float-interpolation.html
new file mode 100644
index 0000000000..c067f2f03c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/animations/float-interpolation.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>float interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<meta name="assert" content="float supports animation">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.expected { color: green; }
+</style>
+
+<body>
+<template id="target-template">float</template>
+<script>
+test_no_interpolation({
+  property: 'float',
+  from: 'left',
+  to: 'right',
+});
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-logical/cascading-001-ref.html b/testing/web-platform/tests/css/css-logical/cascading-001-ref.html
new file mode 100644
index 0000000000..79a432c455
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/cascading-001-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Logical Properties Cascading Reference</title>
+  <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+  <style>
+    div {
+      writing-mode: horizontal-tb;
+      direction: ltr;
+      background-color: blue;
+    }
+    .horizontal {
+      width: 100px;
+      height: 10px;
+    }
+    #horizontal {
+      width: 100px;
+      height: 10px;
+    }
+    .vertical {
+      width: 10px;
+      height: 100px;
+    }
+    #vertical {
+      width: 10px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p>
+
+<div class="horizontal" id="vertical"></div><br>
+<div class="horizontal" id="vertical"></div><br>
+<div class="vertical" id="horizontal"></div><br>
+<div class="vertical" id="horizontal"></div><br>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/cascading-001.html b/testing/web-platform/tests/css/css-logical/cascading-001.html
new file mode 100644
index 0000000000..61399a8330
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/cascading-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Logical Properties: "A computed value that has logical and physical properties is determined by applying the CSS cascade to declarations of both."</title>
+  <link rel="author" title="Manish Goregaokar" href="mailto:manishearth@gmail.com">
+  <link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-box-props">
+  <link rel="match" href="cascading-001-ref.html">
+  <meta name="assert" content="Physical property declarations with higher specificity should override logical ones and vice versa.">
+  <style>
+    div {
+      writing-mode: horizontal-tb;
+      direction: ltr;
+      background-color: blue;
+    }
+    .horizontal-logical {
+      inline-size: 100px;
+      block-size: 10px;
+    }
+    #horizontal-logical {
+      inline-size: 100px;
+      block-size: 10px;
+    }
+    .horizontal-physical {
+      width: 100px;
+      height: 10px;
+    }
+    #horizontal-physical {
+      width: 100px;
+      height: 10px;
+    }
+    .vertical-logical {
+      inline-size: 10px;
+      block-size: 100px;
+    }
+    #vertical-logical {
+      inline-size: 10px;
+      block-size: 100px;
+    }
+    .vertical-physical {
+      width: 10px;
+      height: 100px;
+    }
+    #vertical-physical {
+      width: 10px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <p>Test passes if there are two vertical blue boxes followed by two horizontal blue boxes.</p>
+<div class="horizontal-logical" id="vertical-physical"></div><br>
+<div class="horizontal-physical" id="vertical-logical"></div><br>
+<div class="vertical-logical" id="horizontal-physical"></div><br>
+<div class="vertical-physical" id="horizontal-logical"></div><br>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html b/testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html
new file mode 100644
index 0000000000..5970bcea63
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/getComputedStyle-listing.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: computed style listing</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties">
+<meta name="assert" content="This test checks that the logical properties are properly exposed in a computed CSSStyleDeclaration." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script>
+function hasProperty(object, property) {
+  // This checks the [[HasProperty]] internal method.
+  return property in object;
+}
+
+function hasPropertyValue(object, property) {
+  // This checks the [[Get]] internal method.
+  return object[property] !== undefined;
+}
+
+function hasPropertyDescriptor(object, property) {
+  // This checks [[GetOwnProperty]], iterating the prototype chain.
+  while (object) {
+    if (Reflect.getOwnPropertyDescriptor(object, property)) {
+      return true;
+    }
+    object = Reflect.getPrototypeOf(object);
+  }
+  return false;
+}
+
+function hasPropertyKey(object, property) {
+  // This checks [[OwnPropertyKeys]], iterating the prototype chain.
+  while (object) {
+    if (Reflect.ownKeys(object).includes(property)) {
+      return true;
+    }
+    object = Reflect.getPrototypeOf(object);
+  }
+  return false;
+}
+
+function hasItem(object, item) {
+  // This checks the CSSStyleDeclaration::item WebIDL getter.
+  for (let i = 0; i < object.length; ++i) {
+    if (object.item(i) === item) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function check(property) {
+  const cs = getComputedStyle(document.body);
+  const camelCase = property.replace(/-(.)/g, (_, b) => b.toUpperCase());
+  test(function() {
+    assert_true(hasProperty(cs, property) || hasProperty(cs, camelCase),
+      `The computed style has the property ${property} or ${camelCase}.`);
+    assert_true(hasPropertyValue(cs, property) || hasPropertyValue(cs, camelCase),
+      `The computed style has a value for for the property ${property} or ${camelCase}.`);
+    assert_true(hasPropertyDescriptor(cs, property) || hasPropertyDescriptor(cs, camelCase),
+      `The computed style has a property descriptor for ${property} or ${camelCase}.`);
+    assert_true(hasPropertyKey(cs, property) || hasPropertyKey(cs, camelCase),
+      `The computed style contains ${property} or ${camelCase} in the property list.`);
+    assert_true(hasItem(cs, property) || hasItem(cs, camelCase),
+      `The computed style contains the item ${property} or ${camelCase}.`);
+  }, property);
+}
+
+check("border-block-end-color");
+check("border-block-end-style");
+check("border-block-end-width");
+check("border-block-start-color");
+check("border-block-start-style");
+check("border-block-start-width");
+check("border-inline-end-color");
+check("border-inline-end-style");
+check("border-inline-end-width");
+check("border-inline-start-color");
+check("border-inline-start-style");
+check("border-inline-start-width");
+
+check("inset-block-start");
+check("inset-block-end");
+check("inset-inline-start");
+check("inset-inline-end");
+
+check("margin-block-start");
+check("margin-block-end");
+check("margin-inline-start");
+check("margin-inline-end");
+
+check("padding-block-start");
+check("padding-block-end");
+check("padding-inline-start");
+check("padding-inline-end");
+
+check("block-size");
+check("inline-size");
+check("max-block-size");
+check("max-inline-size");
+check("min-block-size");
+check("min-inline-size");
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/inheritance.html b/testing/web-platform/tests/css/css-logical/inheritance.html
new file mode 100644
index 0000000000..5546a20d6c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/inheritance.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Inheritance of CSS Logical Properties and Values properties</title>
+<link rel="help" href="https://www.w3.org/TR/css-logical-1/#property-index">
+<meta name="assert" content="Properties do not inherit.">
+<meta name="assert" content="Properties have initial values according to the spec.">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/inheritance-testcommon.js"></script>
+</head>
+<body>
+<div id="reference-container">
+  <div id="reference"></div>
+</div>
+<div id="container">
+  <div id="target"></div>
+</div>
+<style>
+#reference-container {
+  width: 300px;
+}
+#reference-container, #reference {
+  border-style: solid; /* Avoid border-top-width computed style 0 */
+  border-top-width: medium;
+}
+
+#container, #target {
+  border-block-end-style: solid; /* Avoid border-block-end-width computed style 0 */
+  border-block-start-style: solid;
+  border-inline-end-style: solid;
+  border-inline-start-style: solid;
+}
+
+#container {
+  color: blue;
+  width: 300px;
+}
+</style>
+<script>
+'use strict';
+const blue = "rgb(0, 0, 255)";
+const green = "rgb(0, 128, 0)";
+const mediumWidth = getComputedStyle(reference).borderTopWidth; // e.g. 3px
+const referenceWidth = getComputedStyle(reference).width; // e.g. 294px
+
+assert_not_inherited('block-size', '0px', '10px');
+
+assert_not_inherited('border-block-end-color', blue, green);
+assert_not_inherited('border-block-end-style', 'none', 'dotted');
+assert_not_inherited('border-block-end-width', mediumWidth, '10px');
+
+assert_not_inherited('border-block-start-color', blue, green);
+assert_not_inherited('border-block-start-style', 'none', 'dotted');
+assert_not_inherited('border-block-start-width', mediumWidth, '10px');
+
+assert_not_inherited('border-end-end-radius', '0px', '10px 20px');
+assert_not_inherited('border-end-start-radius', '0px', '10px 20px');
+
+assert_not_inherited('border-inline-end-color', blue, green);
+assert_not_inherited('border-inline-end-style', 'none', 'dotted');
+assert_not_inherited('border-inline-end-width', mediumWidth, '10px');
+
+assert_not_inherited('border-inline-start-color', blue, green);
+assert_not_inherited('border-inline-start-style', 'none', 'dotted');
+assert_not_inherited('border-inline-start-width', mediumWidth, '10px');
+
+assert_not_inherited('border-start-end-radius', '0px', '10px 20px');
+assert_not_inherited('border-start-start-radius', '0px', '10px 20px');
+
+assert_not_inherited('inline-size', referenceWidth, '10px');
+
+assert_not_inherited('inset-block-end', 'auto', '10px');
+assert_not_inherited('inset-block-start', 'auto', '10px');
+assert_not_inherited('inset-inline-end', 'auto', '10px');
+assert_not_inherited('inset-inline-start', 'auto', '10px');
+
+assert_not_inherited('margin-block-end', '0px', '10px');
+assert_not_inherited('margin-block-start', '0px', '10px');
+assert_not_inherited('margin-inline-end', '0px', '10px');
+assert_not_inherited('margin-inline-start', '0px', '10px');
+
+assert_not_inherited('max-block-size', 'none', '10px');
+assert_not_inherited('max-inline-size', 'none', '10px');
+assert_not_inherited('min-block-size', '0px', '10px');
+assert_not_inherited('min-inline-size', '0px', '10px');
+
+assert_not_inherited('padding-block-end', '0px', '10px');
+assert_not_inherited('padding-block-start', '0px', '10px');
+assert_not_inherited('padding-inline-end', '0px', '10px');
+assert_not_inherited('padding-inline-start', '0px', '10px');
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-color.html b/testing/web-platform/tests/css/css-logical/logical-box-border-color.html
new file mode 100644
index 0000000000..b33528d9cd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-border-color.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Border Colors</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-color">
+<meta name="assert" content="This test checks the interaction of the flow-relative border-*-color properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createBoxPropertyGroup("border-*-color", {type: "color"}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-radius.html b/testing/web-platform/tests/css/css-logical/logical-box-border-radius.html
new file mode 100644
index 0000000000..81b8fa0fec
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-border-radius.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: flow-relative border-radius</title>
+<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#border-radius-properties">
+<meta name="assert" content="This test checks the interaction of the flow-relative border-*-radius properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createCornerPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createCornerPropertyGroup("border-*-radius", {
+  type: "length",
+  prerequisites: {"border-style": "solid"},
+}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-shorthands.html b/testing/web-platform/tests/css/css-logical/logical-box-border-shorthands.html
new file mode 100644
index 0000000000..d05d864f59
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-border-shorthands.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Border Shorthands</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-shorthands">
+<meta name="assert" content="This test checks the interaction of the flow-relative border-* shorthand properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createBoxPropertyGroup("border-*", {type: ["length", "border-style", "color"]}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-style.html b/testing/web-platform/tests/css/css-logical/logical-box-border-style.html
new file mode 100644
index 0000000000..448499ddaa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-border-style.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Border Styles</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-style">
+<meta name="assert" content="This test checks the interaction of the flow-relative border-*-style properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createBoxPropertyGroup("border-*-style", {type: "border-style"}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-border-width.html b/testing/web-platform/tests/css/css-logical/logical-box-border-width.html
new file mode 100644
index 0000000000..d7cac485b5
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-border-width.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Border Widths</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#border-width">
+<meta name="assert" content="This test checks the interaction of the flow-relative border-*-width properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createBoxPropertyGroup("border-*-width", {
+  type: "length",
+  prerequisites: {"border-*-style": "solid"},
+}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-inset.html b/testing/web-platform/tests/css/css-logical/logical-box-inset.html
new file mode 100644
index 0000000000..8587d79ed9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-inset.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Offsets</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#inset-properties">
+<meta name="assert" content="This test checks the interaction of the flow-relative inset-* properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createBoxPropertyGroup("inset-*", {
+  type: "length",
+  prerequisites: {"position": "relative"},
+}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-margin.html b/testing/web-platform/tests/css/css-logical/logical-box-margin.html
new file mode 100644
index 0000000000..86240f96a6
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-margin.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Margins</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#margin-properties">
+<meta name="assert" content="This test checks the interaction of the flow-relative margin-* properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createBoxPropertyGroup("margin-*", {type: "length"}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-padding.html b/testing/web-platform/tests/css/css-logical/logical-box-padding.html
new file mode 100644
index 0000000000..f96f02757c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-padding.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Padding</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#padding-properties">
+<meta name="assert" content="This test checks the interaction of the flow-relative padding-* properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createBoxPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createBoxPropertyGroup("padding-*", {type: "length"}));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-box-size.html b/testing/web-platform/tests/css/css-logical/logical-box-size.html
new file mode 100644
index 0000000000..f90346b839
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-box-size.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Properties: Flow-Relative Sizing</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#dimension-properties">
+<meta name="assert" content="This test checks the interaction of the flow-relative sizing properties with the physical ones in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests, createSizingPropertyGroup} from "./resources/test-box-properties.js";
+runTests(createSizingPropertyGroup(""));
+runTests(createSizingPropertyGroup("max-"));
+runTests(createSizingPropertyGroup("min-"));
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-1.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-1.html
new file mode 100644
index 0000000000..d7f37fffdd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-1.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<link rel="match" href="reference/logical-values-float-clear-1-ref.html">
+<style>
+body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.is { float: inline-start; }
+.ie { float: inline-end; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-2.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-2.html
new file mode 100644
index 0000000000..f5af837595
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-2.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<link rel="match" href="reference/logical-values-float-clear-2-ref.html">
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.is { float: inline-start; }
+.ie { float: inline-end; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="is">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="ie">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-3.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-3.html
new file mode 100644
index 0000000000..b49711b7b2
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<link rel="match" href="reference/logical-values-float-clear-3-ref.html">
+<style>
+body > div { width: 15em; height: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: inline-start; }
+.b { clear: inline-end; }
+.is { float: inline-start; height: 4em; }
+.ie { float: inline-end; height: 2em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-4.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-4.html
new file mode 100644
index 0000000000..d585d38bf3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-4.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<link rel="match" href="reference/logical-values-float-clear-4-ref.html">
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 15em; width: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: inline-start; }
+.b { clear: inline-end; }
+.is { float: inline-start; width: 4em; }
+.ie { float: inline-end; width: 2em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="is">Start</div>
+ <div class="ie">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html
new file mode 100644
index 0000000000..c0fe9a52bc
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear-reftest.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Values: Flow-Relative Values for the 'float' property</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<meta name="assert" content="This test checks that the 'inline-start' and 'inline-end' values of the 'float' and 'clear' properties map to the correct physical value." />
+<link rel="match" href="reference/logical-values-float-clear-reftest-ref.html">
+<style>
+.test {
+  display: block;
+  overflow: hidden;
+  width: 300px;
+}
+.inline {
+  display: inline;
+}
+.float, .clear {
+  display: block;
+  overflow: hidden;
+  height: 3px;
+  width: 100px;
+  background: #f0f;
+}
+.clear {
+  background: #0ff;
+}
+</style>
+<body>
+<script>
+const sides = ["inline-start", "inline-end"];
+const directions = ["ltr", "rtl"];
+for (const floatSide of sides) {
+  for (const clearSide of sides) {
+    for (const containerDirection of directions) {
+      for (const inlineParentDirection of [null, ...directions]) {
+        for (const floatDirection of directions) {
+          for (const clearDirection of directions) {
+            const containerEl = document.createElement("div");
+            containerEl.className = "test";
+            containerEl.style.direction = containerDirection;
+            const floatEl = document.createElement("div");
+            floatEl.className = "float";
+            floatEl.style.direction = floatDirection;
+            floatEl.style.float = floatSide;
+            const clearEl = document.createElement("div");
+            clearEl.className = "clear";
+            clearEl.style.direction = floatDirection;
+            clearEl.style.clear = clearSide;
+            if (inlineParentDirection) {
+              const inlineParent = document.createElement("div");
+              inlineParent.className = "inline";
+              inlineParent.style.direction = inlineParentDirection;
+              inlineParent.appendChild(floatEl);
+              inlineParent.appendChild(clearEl);
+              containerEl.appendChild(inlineParent);
+            } else {
+              containerEl.appendChild(floatEl);
+              containerEl.appendChild(clearEl);
+            }
+            document.body.appendChild(containerEl);
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-logical/logical-values-float-clear.html b/testing/web-platform/tests/css/css-logical/logical-values-float-clear.html
new file mode 100644
index 0000000000..e82765809f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-float-clear.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Values: Flow-Relative Values for the 'float' and 'clear' Properties</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear">
+<meta name="assert" content="This test checks the flow-relative values for 'float' and 'clear' in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests} from "./resources/test-logical-values.js";
+const values = ["inline-start", "inline-end"];
+runTests("clear", values);
+runTests("float", values);
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logical-values-resize.html b/testing/web-platform/tests/css/css-logical/logical-values-resize.html
new file mode 100644
index 0000000000..3be65dacf9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logical-values-resize.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Logical Values: Flow-Relative Values for the 'resize' Property</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical/#resize">
+<meta name="assert" content="This test checks the flow-relative values for 'resize' in different writing modes." />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id="log"></div>
+
+<script type="module">
+import {runTests} from "./resources/test-logical-values.js";
+runTests("resize", ["block", "inline"]);
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html b/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html
new file mode 100644
index 0000000000..da02e759d8
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-block-size-vlr.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}block-size vertical-lr</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<style>
+.block {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#block1 {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#block2 {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#block3 {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+
+.override {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#override1 {
+  block-size: 100px;
+  width: 50px;
+}
+#override2 {
+  width: 50px;
+  block-size: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+  writing-mode: vertical-lr;
+}
+.tablecell {
+  display: table-cell;
+}
+#table1_cell {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="log"></div>
+
+<h3>Maximum and minimim block sizes in blocks with vertical-lr</h3>
+<div>
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
+
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div>
+</div>
+
+<h3>Overridance of <code>width</code> and <code>block-size</code> in vertical-lr</h3>
+<div>
+  <p>Check that <code>width</code> overrides <code>block-size</code></p>
+  <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
+
+  <p>Check that <code>block-size</code> overrides <code>width</code></p>
+  <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div>
+</div>
+
+<h3>Maximum and minimim block sizes in table cells with vertical-lr</h3>
+<div>
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="40" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="120" data-expected-client-height="100"></div>
+  </div>
+</div>
+
+<script>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html b/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html
new file mode 100644
index 0000000000..8d90c07a98
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-block-size.html
@@ -0,0 +1,123 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}block-size</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<style>
+.tests {
+  width: 600px;
+}
+
+.block {
+  border: 1px solid #000;
+}
+#block1 {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#block2 {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+#block3 {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+}
+
+.override {
+  border: 1px solid #000;
+}
+#override1 {
+  block-size: 100px;
+  height: 50px;
+}
+#override2 {
+  height: 50px;
+  block-size: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+}
+.tablecell {
+  display: table-cell;
+}
+#table1_cell {
+  block-size: 40px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  block-size: 100px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  block-size: 120px;
+  min-block-size: 50px;
+  max-block-size: 100px;
+  inline-size: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="log"></div>
+
+<h3>Maximum and minimim block sizes in blocks</h3>
+<div class="tests">
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="block" id="block1" data-expected-width="600" data-expected-client-height="50"></div>
+
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="block" id="block2" data-expected-width="600" data-expected-client-height="100"></div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="block" id="block3" data-expected-width="600" data-expected-client-height="100"></div>
+</div>
+
+<h3>Overridance of <code>height</code> and <code>block-size</code></h3>
+<div class="tests">
+  <p>Check that <code>height</code> overrides <code>block-size</code></p>
+  <div class="override" id="override1" data-expected-width="600" data-expected-client-height="50"></div>
+
+  <p>Check that <code>block-size</code> overrides <code>height</code></p>
+  <div class="override" id="override2" data-expected-width="600" data-expected-client-height="100"></div>
+</div>
+
+<h3>Maximum and minimim block sizes in table cells</h3>
+<div class="tests">
+  <p><code>block-size</code> &lt; <code>min-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="40"></div>
+  </div>
+
+  <p><code>min-block-size</code> &lt; <code>block-size</code> &le; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>block-size</code> &gt; <code>max-block-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="120"></div>
+  </div>
+</div>
+
+<script>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html
new file mode 100644
index 0000000000..0a53dbbc5c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size-vlr.html
@@ -0,0 +1,122 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}inline-size vertical-lr</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<style>
+.block {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#block1 {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#block2 {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#block3 {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+
+.override {
+  border: 1px solid #000;
+  writing-mode: vertical-lr;
+}
+#override1 {
+  inline-size: 100px;
+  height: 50px;
+}
+#override2 {
+  height: 50px;
+  inline-size: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+  writing-mode: vertical-lr;
+}
+.tablecell {
+  display: table-cell;
+}
+#table1_cell {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="log"></div>
+
+<h3>Maximum and minimim inline sizes in blocks with vertical-lr</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="block" id="block1" data-expected-client-width="0" data-expected-client-height="50"></div>
+
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="block" id="block2" data-expected-client-width="0" data-expected-client-height="100"></div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="block" id="block3" data-expected-client-width="0" data-expected-client-height="100"></div>
+</div>
+
+<h3>Overridance of <code>height</code> and <code>inline-size</code> in vertical-lr</h3>
+<div>
+  <p>Check that <code>height</code> overrides <code>inline-size</code></p>
+  <div class="override" id="override1" data-expected-client-width="0" data-expected-client-height="50"></div>
+
+  <p>Check that <code>inline-size</code> overrides <code>height</code></p>
+  <div class="override" id="override2" data-expected-client-width="0" data-expected-client-height="100"></div>
+</div>
+
+<h3>Maximum and minimim inline sizes in table cells with vertical-lr</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="100" data-expected-client-height="50"></div>
+  </div>
+
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+</div>
+
+<script>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html
new file mode 100644
index 0000000000..3ec169924a
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-inline-size.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Logical Properties: {max-,min-}inline-size</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/check-layout-th.js"></script>
+
+<style>
+.block {
+  border: 1px solid #000;
+}
+#block1 {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#block2 {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+#block3 {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+}
+
+.override {
+  border: 1px solid #000;
+}
+#override1 {
+  inline-size: 100px;
+  width: 50px;
+}
+#override2 {
+  width: 50px;
+  inline-size: 100px;
+}
+
+.table {
+  border: 1px solid #000;
+  display: table;
+}
+.tablecell {
+  display: table-cell;
+}
+#table1_cell {
+  inline-size: 40px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: red;
+}
+#table2_cell {
+  inline-size: 100px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: blue;
+}
+#table3_cell {
+  inline-size: 120px;
+  min-inline-size: 50px;
+  max-inline-size: 100px;
+  block-size: 100px;
+  background-color: green;
+}
+</style>
+
+<div id="log"></div>
+
+<h3>Maximum and minimim inline sizes in blocks</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="block" id="block1" data-expected-client-width="50" data-expected-client-height="0"></div>
+
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="block" id="block2" data-expected-client-width="100" data-expected-client-height="0"></div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="block" id="block3" data-expected-client-width="100" data-expected-client-height="0"></div>
+</div>
+
+<h3>Overridance of <code>width</code> and <code>inline-size</code></h3>
+<div>
+  <p>Check that <code>width</code> overrides <code>inline-size</code></p>
+  <div class="override" id="override1" data-expected-client-width="50" data-expected-client-height="0"></div>
+
+  <p>Check that <code>inline-size</code> overrides <code>width</code></p>
+  <div class="override" id="override2" data-expected-client-width="100" data-expected-client-height="0"></div>
+</div>
+
+<h3>Maximum and minimim inline sizes in table cells</h3>
+<div>
+  <p><code>inline-size</code> &lt; <code>min-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table1_cell" data-expected-client-width="50" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>min-inline-size</code> &lt; <code>inline-size</code> &le; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table2_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+
+  <p><code>inline-size</code> &gt; <code>max-inline-size</code></p>
+  <div class="table">
+    <div class="tablecell" id="table3_cell" data-expected-client-width="100" data-expected-client-height="100"></div>
+  </div>
+</div>
+
+<script>
+checkLayout(".block", false);
+checkLayout(".override", false);
+checkLayout(".tablecell", false);
+done();
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-quirklength.html b/testing/web-platform/tests/css/css-logical/logicalprops-quirklength.html
new file mode 100644
index 0000000000..3e133db880
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-quirklength.html
@@ -0,0 +1,36 @@
+<meta charset="utf-8">
+<title>CSS Logical Properties</title>
+<link rel="author" title="Xu Xing" href="mailto:openxu@gmail.com">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-dimension-properties">
+<link rel="help" href="https://drafts.csswg.org/css-logical-props-1/#logical-prop">
+<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#logical-to-physical">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style> #dummy {} </style>
+
+<script>
+function isValidDeclaration(cssText) {
+  var cssRule = document.styleSheets[0].cssRules[0];
+  cssRule.style = cssText;
+  var valid = (cssRule.style.length > 0);
+  cssRule.style = "";
+  return valid;
+}
+var tests = [
+  {cssText:"block-size: 1"},
+  {cssText:"min-block-size: 1"},
+  {cssText:"max-block-size: 1"},
+  {cssText:"inline-size: 1"},
+  {cssText:"min-inline-size: 1"},
+  {cssText:"max-inline-size: 1"},
+  {cssText:"margin-block-start: 1"},
+  {cssText:"margin-block-end: 1"},
+  {cssText:"margin-inline-start: 1"},
+  {cssText:"margin-inline-end: 1"},
+];
+
+tests.forEach(function(t) {
+  test(() => assert_false(isValidDeclaration(t.cssText)), 'Check that "' + t.cssText + '" is not valid in quirks mode');
+});
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-with-deferred-writing-mode.html b/testing/web-platform/tests/css/css-logical/logicalprops-with-deferred-writing-mode.html
new file mode 100644
index 0000000000..a213d375bd
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-with-deferred-writing-mode.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Logical properties with deferred <code>writing-mode</code></title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box">
+<link rel="help" href="https://drafts.csswg.org/css-variables-1/">
+<link rel="help" href="https://drafts.csswg.org/css-values-4/#common-keywords">
+<meta name="assert" content="Checks that logical properties are resolved correctly when the writing mode isn't known until computed-value time.">
+<style>
+#parent {
+  writing-mode: vertical-lr;
+}
+
+@layer {
+  .revert-layer {
+    writing-mode: vertical-rl;
+  }
+}
+@layer {
+  .revert-layer {
+    writing-mode: horizontal-tb;
+    writing-mode: revert-layer;
+  }
+}
+</style>
+<div id="parent">
+  <div id="target"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const target = document.getElementById("target");
+const computedStyle = getComputedStyle(target);
+
+function check(expected) {
+  for (let [prop, value] of Object.entries(expected)) {
+    assert_equals(computedStyle.getPropertyValue(prop), value, prop);
+  }
+}
+
+test(function() {
+  target.style.cssText = `
+    --wm: vertical-rl;
+    writing-mode: var(--wm);
+    margin-block-start: 1px;
+    margin-block-end: 2px;
+    margin-inline-start: 3px;
+    margin-inline-end: 4px;
+  `;
+  check({
+    // Logicals
+    "margin-block-start": "1px",
+    "margin-block-end": "2px",
+    "margin-inline-start": "3px",
+    "margin-inline-end": "4px",
+    // Physicals
+    "margin-right": "1px",
+    "margin-left": "2px",
+    "margin-top": "3px",
+    "margin-bottom": "4px",
+  });
+}, "Writing mode with variable");
+
+test(function() {
+  target.style.cssText = `
+    --wm1: vertical-rl;
+    --wm2: var(--wm1);
+    writing-mode: var(--wm2);
+    margin-block-start: 1px;
+    margin-block-end: 2px;
+    margin-inline-start: 3px;
+    margin-inline-end: 4px;
+  `;
+  check({
+    // Logicals
+    "margin-block-start": "1px",
+    "margin-block-end": "2px",
+    "margin-inline-start": "3px",
+    "margin-inline-end": "4px",
+    // Physicals
+    "margin-right": "1px",
+    "margin-left": "2px",
+    "margin-top": "3px",
+    "margin-bottom": "4px",
+  });
+}, "Writing mode with nested variables");
+
+test(function() {
+  target.style.cssText = `
+    writing-mode: inherit;
+    margin-block-start: 1px;
+    margin-block-end: 2px;
+    margin-inline-start: 3px;
+    margin-inline-end: 4px;
+  `;
+  check({
+    // Logicals
+    "margin-block-start": "1px",
+    "margin-block-end": "2px",
+    "margin-inline-start": "3px",
+    "margin-inline-end": "4px",
+    // Physicals
+    "margin-left": "1px",
+    "margin-right": "2px",
+    "margin-top": "3px",
+    "margin-bottom": "4px",
+  });
+}, "Writing mode with 'inherit'");
+
+test(function() {
+  target.style.cssText = `
+    writing-mode: initial;
+    margin-block-start: 1px;
+    margin-block-end: 2px;
+    margin-inline-start: 3px;
+    margin-inline-end: 4px;
+  `;
+  check({
+    // Logicals
+    "margin-block-start": "1px",
+    "margin-block-end": "2px",
+    "margin-inline-start": "3px",
+    "margin-inline-end": "4px",
+    // Physicals
+    "margin-top": "1px",
+    "margin-bottom": "2px",
+    "margin-left": "3px",
+    "margin-right": "4px",
+  });
+}, "Writing mode with 'initial'");
+
+test(function() {
+  target.style.cssText = `
+    writing-mode: revert;
+    margin-block-start: 1px;
+    margin-block-end: 2px;
+    margin-inline-start: 3px;
+    margin-inline-end: 4px;
+  `;
+  check({
+    // Logicals
+    "margin-block-start": "1px",
+    "margin-block-end": "2px",
+    "margin-inline-start": "3px",
+    "margin-inline-end": "4px",
+    // Physicals
+    "margin-left": "1px",
+    "margin-right": "2px",
+    "margin-top": "3px",
+    "margin-bottom": "4px",
+  });
+}, "Writing mode with 'revert'");
+
+test(function() {
+  target.className = "revert-layer";
+  target.style.cssText = `
+    margin-block-start: 1px;
+    margin-block-end: 2px;
+    margin-inline-start: 3px;
+    margin-inline-end: 4px;
+  `;
+  check({
+    // Logicals
+    "margin-block-start": "1px",
+    "margin-block-end": "2px",
+    "margin-inline-start": "3px",
+    "margin-inline-end": "4px",
+    // Physicals
+    "margin-right": "1px",
+    "margin-left": "2px",
+    "margin-top": "3px",
+    "margin-bottom": "4px",
+  });
+}, "Writing mode with 'revert-layer'");
+</script>
diff --git a/testing/web-platform/tests/css/css-logical/logicalprops-with-variables.html b/testing/web-platform/tests/css/css-logical/logicalprops-with-variables.html
new file mode 100644
index 0000000000..fc52495bc0
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/logicalprops-with-variables.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Logical properties with <code>var()</code></title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<link rel="help" href="https://drafts.csswg.org/css-logical-1/#box">
+<link rel="help" href="https://drafts.csswg.org/css-variables-1/">
+<meta name="assert" content="Checks that logical properties can use the 'var()' notation to reference custom properties.">
+<div id="target"></div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const target = document.getElementById("target");
+const {style} = target;
+const computedStyle = getComputedStyle(target);
+let title;
+
+function check(property, specifiedExpected, expectedComputed) {
+  test(() => {
+    const specifiedActual = style.getPropertyValue(property);
+    assert_equals(specifiedActual, specifiedExpected, "Specified value");
+    const computedActual = computedStyle.getPropertyValue(property);
+    assert_equals(computedActual, expectedComputed, "Computed value");
+  }, title + " - " + property);
+}
+
+{
+  title = "Logical longhands with variables";
+  style.cssText = "";
+  style.setProperty("--one", "1px");
+  style.setProperty("--two", "2px");
+  style.setProperty("margin-inline-start", "var(--one)");
+  style.setProperty("margin-inline-end", "var(--two)");
+
+  check("margin-inline-start", "var(--one)", "1px");
+  check("margin-inline-end", "var(--two)", "2px");
+  check("margin-inline", "", "1px 2px");
+}
+{
+  title = "Logical shorthand with 1 variable";
+  style.cssText = "";
+  style.setProperty("--one", "1px");
+  style.setProperty("margin-inline", "var(--one)");
+
+  check("margin-inline-start", "", "1px");
+  check("margin-inline-end", "", "1px");
+  check("margin-inline", "var(--one)", "1px");
+}
+{
+  title = "Logical shorthand with 2 variables";
+  style.cssText = "";
+  style.setProperty("--one", "1px");
+  style.setProperty("--two", "2px");
+  style.setProperty("margin-inline", "var(--one) var(--two)");
+
+  check("margin-inline-start", "", "1px");
+  check("margin-inline-end", "", "2px");
+  check("margin-inline", "var(--one) var(--two)", "1px 2px");
+}
+{
+  title = "Logical shorthand with 1 variable and 1 length";
+  style.cssText = "";
+  style.setProperty("--one", "1px");
+  style.setProperty("margin-inline", "var(--one) 2px");
+
+  check("margin-inline-start", "", "1px");
+  check("margin-inline-end", "", "2px");
+  check("margin-inline", "var(--one) 2px", "1px 2px");
+}
+</script>
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>
diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-1-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-1-ref.html
new file mode 100644
index 0000000000..0dac4c29b1
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<style>
+body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.left { float: left; }
+.right { float: right; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="left">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="right">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="right">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="left">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-2-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-2-ref.html
new file mode 100644
index 0000000000..82bfcd2d36
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-2-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 20em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.left { float: left; }
+.right { float: right; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="left">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="right">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
+
+<div class="rtl">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Phasellus efficitur nisi at sollicitudin eleifend.
+ <div class="right">Inline-start</div>
+ Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis.
+ Nam bibendum, dolor id porttitor egestas, metus sem pretium eros,
+ ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc.
+ <div class="left">Inline-end</div>
+ Nam vitae eleifend tellus. Vestibulum ut accumsan lacus.
+ Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo.
+ Aliquam erat volutpat.
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-3-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-3-ref.html
new file mode 100644
index 0000000000..654afd856f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-3-ref.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<style>
+body > div { width: 15em; height: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: left; }
+.b { clear: right; }
+.fl { float: left; height: 4em; }
+.fr { float: right; height: 2em; }
+.fl2 { float: left; height: 2em; }
+.fr4 { float: right; height: 4em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-4-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-4-ref.html
new file mode 100644
index 0000000000..0c2065b3e9
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-4-ref.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<style>
+html { writing-mode: vertical-rl; }
+body > div { height: 15em; width: 10em; margin: 1em; padding: 2px; border: 1px solid silver; }
+div > div { margin: .5em; padding: .5em; background: yellow; }
+.a { clear: left; }
+.b { clear: right; }
+.fl { float: left; width: 4em; }
+.fr { float: right; width: 2em; }
+.fl2 { float: left; width: 2em; }
+.fr4 { float: right; width: 4em; }
+.ltr { direction: ltr; }
+.rtl { direction: rtl; }
+</style>
+
+<body>
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-start</p>
+</div>
+
+<div class="ltr">
+ <div class="fl">Start</div>
+ <div class="fr">End</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z LTR clear:inline-end</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="b">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-start</p>
+</div>
+
+<div class="rtl">
+ <div class="fl2">End</div>
+ <div class="fr4">Start</div>
+ <p class="a">a b c d e f g h i j k l m n o p q r s t u v w x y z RTL clear:inline-end</p>
+</div>
diff --git a/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html
new file mode 100644
index 0000000000..28c275ebb3
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/reference/logical-values-float-clear-reftest-ref.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>CSS Reftest Reference</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
+<style>
+.test {
+  display: block;
+  overflow: hidden;
+  width: 300px;
+}
+.inline {
+  display: inline;
+}
+.float, .clear {
+  display: block;
+  overflow: hidden;
+  height: 3px;
+  width: 100px;
+  background: #f0f;
+}
+.clear {
+  background: #0ff;
+}
+</style>
+<body>
+<script>
+function physicalValue(value, containerDirection) {
+  return ((value === "inline-start") === (containerDirection === "ltr")) ? "left" : "right";
+}
+const sides = ["inline-start", "inline-end"];
+const directions = ["ltr", "rtl"];
+for (const floatSide of sides) {
+  for (const clearSide of sides) {
+    for (const containerDirection of directions) {
+      for (const inlineParentDirection of [null, ...directions]) {
+        for (const floatDirection of directions) {
+          for (const clearDirection of directions) {
+            const containerEl = document.createElement("div");
+            containerEl.className = "test";
+            containerEl.style.direction = containerDirection;
+            const floatEl = document.createElement("div");
+            floatEl.className = "float";
+            floatEl.style.direction = floatDirection;
+            floatEl.style.float = physicalValue(floatSide, containerDirection);
+            const clearEl = document.createElement("div");
+            clearEl.className = "clear";
+            clearEl.style.direction = floatDirection;
+            clearEl.style.clear = physicalValue(clearSide, containerDirection);
+            if (inlineParentDirection) {
+              const inlineParent = document.createElement("div");
+              inlineParent.className = "inline";
+              inlineParent.style.direction = inlineParentDirection;
+              inlineParent.appendChild(floatEl);
+              inlineParent.appendChild(clearEl);
+              containerEl.appendChild(inlineParent);
+            } else {
+              containerEl.appendChild(floatEl);
+              containerEl.appendChild(clearEl);
+            }
+            document.body.appendChild(containerEl);
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+</body>
diff --git a/testing/web-platform/tests/css/css-logical/resources/test-box-properties.js b/testing/web-platform/tests/css/css-logical/resources/test-box-properties.js
new file mode 100644
index 0000000000..ef1854f97d
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/resources/test-box-properties.js
@@ -0,0 +1,297 @@
+import {
+  testElement,
+  writingModes,
+  testCSSValues,
+  testComputedValues,
+  makeDeclaration
+} from "./test-shared.js";
+
+// Values to use while testing
+const testValues = {
+  "length": ["1px", "2px", "3px", "4px", "5px"],
+  "color": ["rgb(1, 1, 1)", "rgb(2, 2, 2)", "rgb(3, 3, 3)", "rgb(4, 4, 4)", "rgb(5, 5, 5)"],
+  "border-style": ["solid", "dashed", "dotted", "double", "groove"],
+};
+
+/**
+ * Creates a group of physical and logical box properties, such as
+ *
+ * { physical: {
+ *     left: "margin-left", right: "margin-right",
+ *     top: "margin-top", bottom: "margin-bottom",
+ *   }, logical: {
+ *     inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end",
+ *     blockStart: "margin-block-start", blockEnd: "margin-block-end",
+ *   }, shorthands: {
+ *     "margin": ["margin-top", "margin-right", "margin-bottom", "margin-left"],
+ *     "margin-inline": ["margin-inline-start", "margin-inline-end"],
+ *     "margin-block": ["margin-block-start", "margin-block-end"],
+ *   }, type: ["length"], prerequisites: "...", property: "margin-*" }
+ *
+ * @param {string} property
+ *        A string representing the property names, like "margin-*".
+ * @param {Object} descriptor
+ * @param {string|string[]} descriptor.type
+ *        Describes the kind of values accepted by the property, like "length".
+ *        Must be a key or a collection of keys from the `testValues` object.
+ * @param {Object={}} descriptor.prerequisites
+ *        Represents property declarations that are needed by `property` to work.
+ *        For example, border-width properties require a border style.
+ */
+export function createBoxPropertyGroup(property, descriptor) {
+  const logical = {};
+  const physical = {};
+  const shorthands = {};
+  for (const axis of ["inline", "block"]) {
+    const shorthand = property.replace("*", axis);
+    const longhands = [];
+    shorthands[shorthand] = longhands;
+    for (const side of ["start", "end"]) {
+      const logicalSide = axis + "-" + side;
+      const camelCase = logicalSide.replace(/-(.)/g, (match, $1) => $1.toUpperCase());
+      const longhand = property.replace("*", logicalSide);
+      logical[camelCase] = longhand;
+      longhands.push(longhand);
+    }
+  }
+  const isInset = property === "inset-*";
+  let prerequisites = "";
+  for (const physicalSide of ["left", "right", "top", "bottom"]) {
+    physical[physicalSide] = isInset ? physicalSide : property.replace("*", physicalSide);
+    prerequisites += makeDeclaration(descriptor.prerequisites, physicalSide);
+  }
+  shorthands[property.replace("-*", "")] =
+    ["top", "right", "bottom", "left"].map(physicalSide => physical[physicalSide]);
+  const type = [].concat(descriptor.type);
+  return {logical, physical, shorthands, type, prerequisites, property};
+}
+
+/**
+ * Creates a group physical and logical box-corner properties.
+ *
+ * @param {string} property
+ *        A string representing the property names, like "border-*-radius".
+ * @param {Object} descriptor
+ * @param {string|string[]} descriptor.type
+ *        Describes the kind of values accepted by the property, like "length".
+ *        Must be a key or a collection of keys from the `testValues` object.
+ * @param {Object={}} descriptor.prerequisites
+ *        Represents property declarations that are needed by `property` to work.
+ *        For example, border-width properties require a border style.
+ */
+export function createCornerPropertyGroup(property, descriptor) {
+  const logical = {};
+  const physical = {};
+  const shorthands = {};
+  for (const logicalCorner of ["start-start", "start-end", "end-start", "end-end"]) {
+    const prop = property.replace("*", logicalCorner);
+    const [block_side, inline_side] = logicalCorner.split("-");
+    const b = "block" + block_side.charAt(0).toUpperCase() + block_side.slice(1);
+    const i = "inline" + inline_side.charAt(0).toUpperCase() + inline_side.slice(1);
+    const index = b + "-" + i; // e.g. "blockStart-inlineEnd"
+    logical[index] = prop;
+  }
+  let prerequisites = "";
+  for (const physicalCorner of ["top-left", "top-right", "bottom-left", "bottom-right"]) {
+    const prop = property.replace("*", physicalCorner);
+    physical[physicalCorner] = prop;
+    prerequisites += makeDeclaration(descriptor.prerequisites, physicalCorner);
+  }
+  const type = [].concat(descriptor.type);
+  return {logical, physical, shorthands, type, prerequisites, property};
+}
+
+/**
+ * Creates a group of physical and logical sizing properties.
+ *
+ * @param {string} prefix
+ *        One of "", "max-" or "min-".
+ */
+export function createSizingPropertyGroup(prefix) {
+  return {
+    logical: {
+      inline: `${prefix}inline-size`,
+      block: `${prefix}block-size`,
+    },
+    physical: {
+      horizontal: `${prefix}width`,
+      vertical: `${prefix}height`,
+    },
+    type: ["length"],
+    prerequisites: makeDeclaration({display: "block"}),
+    property: (prefix ? prefix.slice(0, -1) + " " : "") + "sizing",
+  };
+}
+
+/**
+ * Tests a grup of logical and physical properties in different writing modes.
+ *
+ * @param {Object} group
+ *        An object returned by createBoxPropertyGroup or createSizingPropertyGroup.
+ */
+export function runTests(group) {
+  const values = testValues[group.type[0]].map(function(_, i) {
+    return group.type.map(type => testValues[type][i]).join(" ");
+  });
+  const logicals = Object.values(group.logical);
+  const physicals = Object.values(group.physical);
+  const shorthands = group.shorthands ? Object.entries(group.shorthands) : null;
+  const is_corner = group.property == "border-*-radius";
+
+  test(function() {
+    const expected = [];
+    for (const [i, logicalProp] of logicals.entries()) {
+      testElement.style.setProperty(logicalProp, values[i]);
+      expected.push([logicalProp, values[i]]);
+    }
+    testCSSValues("logical properties in inline style", testElement.style, expected);
+  }, `Test that logical ${group.property} properties are supported.`);
+  testElement.style.cssText = "";
+
+  const shorthandValues = {};
+  for (const [shorthand, longhands] of shorthands || []) {
+    let valueArray;
+    if (group.type.length > 1) {
+      valueArray = [values[0]];
+    } else {
+      valueArray = testValues[group.type].slice(0, longhands.length);
+    }
+    shorthandValues[shorthand] = valueArray;
+    const value = valueArray.join(" ");
+    const expected = [[shorthand, value]];
+    for (let [i, longhand] of longhands.entries()) {
+      expected.push([longhand, valueArray[group.type.length > 1 ? 0 : i]]);
+    }
+    test(function() {
+      testElement.style.setProperty(shorthand, value);
+      testCSSValues("shorthand in inline style", testElement.style, expected);
+      const stylesheet = `.test { ${group.prerequisites} }`;
+      testComputedValues("shorthand in computed style", stylesheet, expected);
+    }, `Test that ${shorthand} shorthand sets longhands and serializes correctly.`);
+    testElement.style.cssText = "";
+  }
+
+  for (const writingMode of writingModes) {
+    for (const style of writingMode.styles) {
+      const writingModeDecl = makeDeclaration(style);
+
+      const associated = {};
+      for (const [logicalSide, logicalProp] of Object.entries(group.logical)) {
+        let physicalProp;
+        if (is_corner) {
+          const [ block_side, inline_side] = logicalSide.split("-");
+          const physicalSide1 = writingMode[block_side];
+          const physicalSide2 = writingMode[inline_side];
+          let physicalCorner;
+          // mirror "left-top" to "top-left" etc
+          if (["top", "bottom"].includes(physicalSide1)) {
+            physicalCorner = physicalSide1 + "-" + physicalSide2;
+          } else {
+            physicalCorner = physicalSide2 + "-" + physicalSide1;
+          }
+          physicalProp = group.physical[physicalCorner];
+        } else {
+          physicalProp = group.physical[writingMode[logicalSide]];
+        }
+        associated[logicalProp] = physicalProp;
+        associated[physicalProp] = logicalProp;
+      }
+
+      // Test that logical properties are converted to their physical
+      // equivalent correctly when all in the group are present on a single
+      // declaration, with no overwriting of previous properties and
+      // no physical properties present.  We put the writing mode properties
+      // on a separate declaration to test that the computed values of these
+      // properties are used, rather than those on the same declaration.
+      test(function() {
+        let decl = group.prerequisites;
+        const expected = [];
+        for (const [i, logicalProp] of logicals.entries()) {
+          decl += `${logicalProp}: ${values[i]}; `;
+          expected.push([logicalProp, values[i]]);
+          expected.push([associated[logicalProp], values[i]]);
+        }
+        testComputedValues("logical properties on one declaration, writing " +
+                           `mode properties on another, '${writingModeDecl}'`,
+                           `.test { ${writingModeDecl} } .test { ${decl} }`,
+                           expected);
+      }, `Test that logical ${group.property} properties share computed values `
+       + `with their physical associates, with '${writingModeDecl}'.`);
+
+      // Test logical shorthand properties.
+      if (shorthands) {
+        test(function() {
+          for (const [shorthand, longhands] of shorthands) {
+            let valueArray = shorthandValues[shorthand];
+            const decl = group.prerequisites + `${shorthand}: ${valueArray.join(" ")}; `;
+            const expected = [];
+            for (let [i, longhand] of longhands.entries()) {
+              const longhandValue = valueArray[group.type.length > 1 ? 0 : i];
+              expected.push([longhand, longhandValue]);
+              expected.push([associated[longhand], longhandValue]);
+            }
+            testComputedValues("shorthand properties on one declaration, writing " +
+                               `mode properties on another, '${writingModeDecl}'`,
+                               `.test { ${writingModeDecl} } .test { ${decl} }`,
+                               expected);
+          }
+        }, `Test that ${group.property} shorthands set the computed value of both `
+         + `logical and physical longhands, with '${writingModeDecl}'.`);
+      }
+
+      // Test that logical and physical properties are cascaded together,
+      // honoring their relative order on a single declaration
+      // (a) with a single logical property after the physical ones
+      // (b) with a single physical property after the logical ones
+      test(function() {
+        for (const lastIsLogical of [true, false]) {
+          const lasts = lastIsLogical ? logicals : physicals;
+          const others = lastIsLogical ? physicals : logicals;
+          for (const lastProp of lasts) {
+            let decl = writingModeDecl + group.prerequisites;
+            const expected = [];
+            for (const [i, prop] of others.entries()) {
+              decl += `${prop}: ${values[i]}; `;
+              const valueIdx = associated[prop] === lastProp ? others.length : i;
+              expected.push([prop, values[valueIdx]]);
+              expected.push([associated[prop], values[valueIdx]]);
+            }
+            decl += `${lastProp}: ${values[others.length]}; `;
+            testComputedValues(`'${lastProp}' last on single declaration, '${writingModeDecl}'`,
+                               `.test { ${decl} }`,
+                               expected);
+          }
+        }
+      }, `Test that ${group.property} properties honor order of appearance when both `
+       + `logical and physical associates are declared, with '${writingModeDecl}'.`);
+
+      // Test that logical and physical properties are cascaded properly when
+      // on different declarations
+      // (a) with a logical property in the high specificity rule
+      // (b) with a physical property in the high specificity rule
+      test(function() {
+        for (const highIsLogical of [true, false]) {
+          let lowDecl = writingModeDecl + group.prerequisites;
+          const high = highIsLogical ? logicals : physicals;
+          const others = highIsLogical ? physicals : logicals;
+          for (const [i, prop] of others.entries()) {
+            lowDecl += `${prop}: ${values[i]}; `;
+          }
+          for (const highProp of high) {
+            const highDecl = `${highProp}: ${values[others.length]}; `;
+            const expected = [];
+            for (const [i, prop] of others.entries()) {
+              const valueIdx = associated[prop] === highProp ? others.length : i;
+              expected.push([prop, values[valueIdx]]);
+              expected.push([associated[prop], values[valueIdx]]);
+            }
+            testComputedValues(`'${highProp}', two declarations, '${writingModeDecl}'`,
+                               `#test { ${highDecl} } .test { ${lowDecl} }`,
+                               expected);
+          }
+        }
+      }, `Test that ${group.property} properties honor selector specificty when both `
+       + `logical and physical associates are declared, with '${writingModeDecl}'.`);
+    }
+  }
+}
diff --git a/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js b/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js
new file mode 100644
index 0000000000..7a039379cb
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/resources/test-logical-values.js
@@ -0,0 +1,27 @@
+import {
+  testElement,
+  writingModes,
+  testCSSValues,
+  testComputedValues,
+  makeDeclaration
+} from "./test-shared.js";
+
+/**
+ * Tests flow-relative values for a CSS property in different writing modes.
+ *
+ * @param {string} property
+ *        The CSS property to be tested.
+ * @param {string[]} values
+ *        An array with the flow-relative values to be tested.
+ */
+export function runTests(property, values) {
+  for (const value of values) {
+    test(function() {
+      const {style} = testElement;
+      style.cssText = "";
+      style.setProperty(property, value);
+      testCSSValues("logical values in inline style", style, [[property, value]]);
+      testComputedValues("logical values in computed style", style, [[property, value]]);
+    }, `Test that '${property}: ${value}' is supported.`);
+  }
+}
diff --git a/testing/web-platform/tests/css/css-logical/resources/test-shared.js b/testing/web-platform/tests/css/css-logical/resources/test-shared.js
new file mode 100644
index 0000000000..7a1da2e649
--- /dev/null
+++ b/testing/web-platform/tests/css/css-logical/resources/test-shared.js
@@ -0,0 +1,112 @@
+const sheet = document.head.appendChild(document.createElement("style"));
+
+// Specify size for outer <div> to avoid unconstrained-size warnings
+// when writing-mode of the inner test <div> is vertical-*
+const wrapper = document.body.appendChild(document.createElement("div"));
+wrapper.style.cssText = "width:100px; height: 100px;";
+export const testElement = wrapper.appendChild(document.createElement("div"));
+testElement.id = testElement.className = "test";
+
+// Six unique overall writing modes for property-mapping purposes.
+export const writingModes = [
+  {
+    styles: [
+      {"writing-mode": "horizontal-tb", "direction": "ltr"},
+    ],
+    blockStart: "top", blockEnd: "bottom", inlineStart: "left", inlineEnd: "right",
+    over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
+    block: "vertical", inline: "horizontal" },
+  {
+    styles: [
+      {"writing-mode": "horizontal-tb", "direction": "rtl"},
+    ],
+    blockStart: "top", blockEnd: "bottom", inlineStart: "right", inlineEnd: "left",
+    over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
+    block: "vertical", inline: "horizontal" },
+  {
+    styles: [
+      {"writing-mode": "vertical-rl", "direction": "rtl"},
+      {"writing-mode": "sideways-rl", "direction": "rtl"},
+    ],
+    blockStart: "right", blockEnd: "left", inlineStart: "bottom", inlineEnd: "top",
+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
+    block: "horizontal", inline: "vertical" },
+  {
+    styles: [
+      {"writing-mode": "vertical-rl", "direction": "ltr"},
+      {"writing-mode": "sideways-rl", "direction": "ltr"},
+    ],
+    blockStart: "right", blockEnd: "left", inlineStart: "top", inlineEnd: "bottom",
+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
+    block: "horizontal", inline: "vertical" },
+  {
+    styles: [
+      {"writing-mode": "vertical-lr", "direction": "rtl"},
+    ],
+    blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
+    block: "horizontal", inline: "vertical" },
+  {
+    styles: [
+      {"writing-mode": "sideways-lr", "direction": "ltr"},
+    ],
+    blockStart: "left", blockEnd: "right", inlineStart: "bottom", inlineEnd: "top",
+    over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
+    block: "horizontal", inline: "vertical" },
+  {
+    styles: [
+      {"writing-mode": "vertical-lr", "direction": "ltr"},
+    ],
+    blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
+    over: "right", under: "left", lineLeft: "top", lineRight: "bottom",
+    block: "horizontal", inline: "vertical" },
+  {
+    styles: [
+      {"writing-mode": "sideways-lr", "direction": "rtl"},
+    ],
+    blockStart: "left", blockEnd: "right", inlineStart: "top", inlineEnd: "bottom",
+    over: "left", under: "right", lineLeft: "bottom", lineRight: "top",
+    block: "horizontal", inline: "vertical" },
+];
+
+// Check if logical properties work well in WebKit non-standard
+// '-webkit-writing-mode: horizontal-bt' mode
+if (CSS.supports("-webkit-writing-mode", "horizontal-bt")) {
+  writingModes.push (
+  {
+    styles: [
+      {"-webkit-writing-mode": "horizontal-bt", "direction": "ltr"},
+    ],
+    blockStart: "bottom", blockEnd: "top", inlineStart: "left", inlineEnd: "right",
+    over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
+    block: "vertical", inline: "horizontal" },
+  {
+    styles: [
+      {"-webkit-writing-mode": "horizontal-bt", "direction": "rtl"},
+    ],
+    blockStart: "bottom", blockEnd: "top", inlineStart: "right", inlineEnd: "left",
+    over: "top", under: "bottom", lineLeft: "left", lineRight: "right",
+    block: "vertical", inline: "horizontal" },
+  )
+}
+
+export function testCSSValues(testName, style, expectedValues) {
+  for (const [property, value] of expectedValues) {
+    assert_equals(style.getPropertyValue(property), value, `${testName}, ${property}`);
+  }
+}
+
+export function testComputedValues(testName, rules, expectedValues) {
+  sheet.textContent = rules;
+  const cs = getComputedStyle(testElement);
+  testCSSValues(testName, cs, expectedValues);
+  sheet.textContent = "";
+}
+
+export function makeDeclaration(object = {}, replacement = "*") {
+  let decl = "";
+  for (const [property, value] of Object.entries(object)) {
+    decl += `${property.replace("*", replacement)}: ${value}; `;
+  }
+  return decl;
+}
-- 
cgit v1.2.3