From af431d800b05e0c1e16e0f4330bc52285eae3a27 Mon Sep 17 00:00:00 2001
From: Callum Law <callumlaw1709@outlook.com>
Date: Thu, 11 Sep 2025 15:47:41 +1200
Subject: [PATCH] Tests: Import/create tests related to transition property
 handling

Done in a distinct commit to see progress over following commits
---
 .../css/expanded-longhand-transition.txt      |  1 +
 .../animations/margin-block-interpolation.txt | 30 +++++++++++++++++++
 .../margin-inline-interpolation.txt           | 30 +++++++++++++++++++
 .../padding-block-interpolation.txt           | 30 +++++++++++++++++++
 .../padding-inline-interpolation.txt          | 30 +++++++++++++++++++
 .../css/expanded-longhand-transition.html     | 22 ++++++++++++++
 .../margin-block-interpolation.html           | 26 ++++++++++++++++
 .../margin-inline-interpolation.html          | 26 ++++++++++++++++
 .../padding-block-interpolation.html          | 26 ++++++++++++++++
 .../padding-inline-interpolation.html         | 26 ++++++++++++++++
 10 files changed, 247 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/css/expanded-longhand-transition.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-block-interpolation.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-inline-interpolation.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-block-interpolation.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-inline-interpolation.txt
 create mode 100644 Tests/LibWeb/Text/input/css/expanded-longhand-transition.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-block-interpolation.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-inline-interpolation.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-block-interpolation.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-inline-interpolation.html

diff --git a/Tests/LibWeb/Text/expected/css/expanded-longhand-transition.txt b/Tests/LibWeb/Text/expected/css/expanded-longhand-transition.txt
new file mode 100644
index 00000000000..573541ac970
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/css/expanded-longhand-transition.txt
@@ -0,0 +1 @@
+0
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-block-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-block-interpolation.txt
new file mode 100644
index 00000000000..48839924306
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-block-interpolation.txt
@@ -0,0 +1,30 @@
+Harness status: OK
+
+Found 24 tests
+
+19 Pass
+5 Fail
+Fail	CSS Transitions: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
+Fail	CSS Transitions: property <margin-block> from [10px] to [20px] at (0) should be [10px]
+Fail	CSS Transitions: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
+Fail	CSS Transitions: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions: property <margin-block> from [10px] to [20px] at (1) should be [20px]
+Fail	CSS Transitions: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Transitions with transition: all: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Animations: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Animations: property <margin-block> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Animations: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Animations: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Animations: property <margin-block> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Animations: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
+Pass	Web Animations: property <margin-block> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	Web Animations: property <margin-block> from [10px] to [20px] at (0) should be [10px]
+Pass	Web Animations: property <margin-block> from [10px] to [20px] at (0.3) should be [13px]
+Pass	Web Animations: property <margin-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	Web Animations: property <margin-block> from [10px] to [20px] at (1) should be [20px]
+Pass	Web Animations: property <margin-block> from [10px] to [20px] at (1.5) should be [25px]
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-inline-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-inline-interpolation.txt
new file mode 100644
index 00000000000..b3c3c48a6ca
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/margin-inline-interpolation.txt
@@ -0,0 +1,30 @@
+Harness status: OK
+
+Found 24 tests
+
+19 Pass
+5 Fail
+Fail	CSS Transitions: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Fail	CSS Transitions: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
+Fail	CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
+Fail	CSS Transitions: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
+Fail	CSS Transitions: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Transitions with transition: all: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Animations: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Animations: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Animations: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Animations: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Animations: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Animations: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
+Pass	Web Animations: property <margin-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	Web Animations: property <margin-inline> from [10px] to [20px] at (0) should be [10px]
+Pass	Web Animations: property <margin-inline> from [10px] to [20px] at (0.3) should be [13px]
+Pass	Web Animations: property <margin-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	Web Animations: property <margin-inline> from [10px] to [20px] at (1) should be [20px]
+Pass	Web Animations: property <margin-inline> from [10px] to [20px] at (1.5) should be [25px]
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-block-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-block-interpolation.txt
new file mode 100644
index 00000000000..ff80a75bf08
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-block-interpolation.txt
@@ -0,0 +1,30 @@
+Harness status: OK
+
+Found 24 tests
+
+19 Pass
+5 Fail
+Fail	CSS Transitions: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
+Fail	CSS Transitions: property <padding-block> from [10px] to [20px] at (0) should be [10px]
+Fail	CSS Transitions: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
+Fail	CSS Transitions: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions: property <padding-block> from [10px] to [20px] at (1) should be [20px]
+Fail	CSS Transitions: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Transitions with transition: all: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Animations: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Animations: property <padding-block> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Animations: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Animations: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Animations: property <padding-block> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Animations: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
+Pass	Web Animations: property <padding-block> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	Web Animations: property <padding-block> from [10px] to [20px] at (0) should be [10px]
+Pass	Web Animations: property <padding-block> from [10px] to [20px] at (0.3) should be [13px]
+Pass	Web Animations: property <padding-block> from [10px] to [20px] at (0.6) should be [16px]
+Pass	Web Animations: property <padding-block> from [10px] to [20px] at (1) should be [20px]
+Pass	Web Animations: property <padding-block> from [10px] to [20px] at (1.5) should be [25px]
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-inline-interpolation.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-inline-interpolation.txt
new file mode 100644
index 00000000000..c60a2f7a71b
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-logical/animations/padding-inline-interpolation.txt
@@ -0,0 +1,30 @@
+Harness status: OK
+
+Found 24 tests
+
+19 Pass
+5 Fail
+Fail	CSS Transitions: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Fail	CSS Transitions: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
+Fail	CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
+Fail	CSS Transitions: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
+Fail	CSS Transitions: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Transitions with transition: all: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
+Pass	CSS Animations: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	CSS Animations: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
+Pass	CSS Animations: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
+Pass	CSS Animations: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	CSS Animations: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
+Pass	CSS Animations: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
+Pass	Web Animations: property <padding-inline> from [10px] to [20px] at (-0.3) should be [7px]
+Pass	Web Animations: property <padding-inline> from [10px] to [20px] at (0) should be [10px]
+Pass	Web Animations: property <padding-inline> from [10px] to [20px] at (0.3) should be [13px]
+Pass	Web Animations: property <padding-inline> from [10px] to [20px] at (0.6) should be [16px]
+Pass	Web Animations: property <padding-inline> from [10px] to [20px] at (1) should be [20px]
+Pass	Web Animations: property <padding-inline> from [10px] to [20px] at (1.5) should be [25px]
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/css/expanded-longhand-transition.html b/Tests/LibWeb/Text/input/css/expanded-longhand-transition.html
new file mode 100644
index 00000000000..acf3e931b42
--- /dev/null
+++ b/Tests/LibWeb/Text/input/css/expanded-longhand-transition.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+    <style>
+        #foo {
+            transition: border 1s linear;
+            border-top: 1px solid red;
+        }
+    </style>
+    <div id="foo"></div>
+    <script src="../include.js"></script>
+    <script>
+        test(() => {
+            // FIXME: We call getComputedStyle to ensure that style is computed before we update the style attribute
+            //        below to ensure that transitions are triggered.
+            getComputedStyle(foo).border;
+
+            foo.style = "border-top-width: 5px";
+
+            println(document.getAnimations().length);
+        });
+    </script>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-block-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-block-interpolation.html
new file mode 100644
index 00000000000..bb1913f7bcc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-block-interpolation.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>margin-block interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-block">
+<meta name="assert" content="margin-block supports animation">
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_interpolation({
+  property: 'margin-block',
+  from: '10px',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+</script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-inline-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-inline-interpolation.html
new file mode 100644
index 00000000000..344d20628b6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/margin-inline-interpolation.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>margin-inline interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-margin-inline">
+<meta name="assert" content="margin-inline supports animation">
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_interpolation({
+  property: 'margin-inline',
+  from: '10px',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+</script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-block-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-block-interpolation.html
new file mode 100644
index 00000000000..973c6f177e0
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-block-interpolation.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>padding-block interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-block">
+<meta name="assert" content="padding-block supports animation">
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_interpolation({
+  property: 'padding-block',
+  from: '10px',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+</script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-inline-interpolation.html b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-inline-interpolation.html
new file mode 100644
index 00000000000..fb726560583
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-logical/animations/padding-inline-interpolation.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>padding-inline interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-logical/#propdef-padding-inline">
+<meta name="assert" content="padding-inline supports animation">
+
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../css/support/interpolation-testcommon.js"></script>
+
+<body>
+<script>
+test_interpolation({
+  property: 'padding-inline',
+  from: '10px',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+</script>
+</body>