diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-001.txt
new file mode 100644
index 00000000000..a66b6d954ff
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	column-gap is interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-002.txt
new file mode 100644
index 00000000000..06ef49bcd88
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	column-gap: normal is not interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-003.txt
new file mode 100644
index 00000000000..35efb89eabb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-animation-003.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Default column-gap is not interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-parsing-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-parsing-001.txt
new file mode 100644
index 00000000000..15e3088bbe9
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/column-gap-parsing-001.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	Default column-gap is 'normal'	
+Pass	column-gap accepts pixels	
+Pass	column-gap accepts em	
+Pass	column-gap accepts vw	
+Pass	column-gap accepts percentage	
+Fail	column-gap accepts calc()	
+Fail	column-gap accepts calc() mixing fixed and percentage values	
+Fail	Initial column-gap is 'normal'	
+Fail	Initial column-gap is 'normal' 2	
+Fail	Initial inherited column-gap is 'normal'	
+Pass	column-gap is inheritable	
+Fail	Negative column-gap is invalid	
+Fail	'max-content' column-gap is invalid	
+Fail	'none' column-gap is invalid	
+Fail	column-gap with multiple values is invalid	
+Fail	Angle column-gap is invalid	
+Fail	Resolution column-gap is invalid	
+Fail	Time column-gap is invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-001.txt
new file mode 100644
index 00000000000..21c6a0d626d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	gap is interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-002.txt
new file mode 100644
index 00000000000..cc3dca85743
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	gap: normal is not interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-003.txt
new file mode 100644
index 00000000000..cbb94bf30bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-003.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	Default gap is not interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-004.txt
new file mode 100644
index 00000000000..42e0b055ef4
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-animation-004.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	gap is interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-normal-computed-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-normal-computed-001.txt
new file mode 100644
index 00000000000..bc475776584
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-normal-computed-001.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Fail
+Details
+Result	Test Name	MessageFail	colum-gap:normal computes to normal on multicol elements	
+Fail	row-gap:normal computes to normal on multicol elements	
+Fail	colum-gap:normal computes to normal on grid	
+Fail	row-gap:normal computes to normal on grid	
+Fail	colum-gap:normal (main axis) computes to normal on flexbox	
+Fail	row-gap:normal (cross axis) computes to normal on flexbox	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-parsing-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-parsing-001.txt
new file mode 100644
index 00000000000..ffe945e3951
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-parsing-001.txt
@@ -0,0 +1,37 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 26 tests
+
+10 Pass
+16 Fail
+Details
+Result	Test Name	MessageFail	Default gap is 'normal'	
+Pass	gap accepts pixels	
+Pass	gap accepts pixels 2	
+Pass	gap accepts pixels combined with percentage	
+Pass	gap accepts em	
+Pass	gap accepts em 2	
+Pass	gap accepts vw	
+Pass	gap accepts vw and vh	
+Pass	gap accepts percentage	
+Pass	gap accepts percentage 2	
+Fail	gap accepts calc()	
+Fail	gap accepts calc() mixing fixed and percentage values	
+Fail	gap accepts calc() 2	
+Fail	Initial gap is 'normal'	
+Fail	Initial gap is 'normal' 2	
+Fail	Initial inherited gap is 'normal'	
+Pass	gap is inheritable	
+Fail	Negative gap is invalid	
+Fail	'max-content' gap is invalid	
+Fail	'none' gap is invalid	
+Fail	Angle gap is invalid	
+Fail	Resolution gap is invalid	
+Fail	Time gap is invalid	
+Fail	gap with three values is invalid	
+Fail	gap with slash is invalid	
+Fail	gap with one wrong value is invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-parsing-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-parsing-002.txt
new file mode 100644
index 00000000000..77d05784d31
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/gap-parsing-002.txt
@@ -0,0 +1,27 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 16 tests
+
+2 Pass
+14 Fail
+Details
+Result	Test Name	MessageFail	e.style['gap'] = "normal" should set the property value	
+Fail	e.style['gap'] = "10px" should set the property value	
+Fail	e.style['gap'] = "normal normal" should set the property value	
+Fail	e.style['gap'] = "10px 10px" should set the property value	
+Fail	e.style['column-gap'] = "normal" should set the property value	
+Pass	e.style['column-gap'] = "10px" should set the property value	
+Fail	e.style['row-gap'] = "normal" should set the property value	
+Pass	e.style['row-gap'] = "10px" should set the property value	
+Fail	'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'	
+Fail	getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'	
+Fail	'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'	
+Fail	getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'	
+Fail	'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'	
+Fail	getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'	
+Fail	'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'	
+Fail	getPropertyValue for 'column-gap: normal; row-gap: 10px;' returns '10px normal'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-column-gap-parsing-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-column-gap-parsing-001.txt
new file mode 100644
index 00000000000..23097f1f06a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-column-gap-parsing-001.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	Default grid-column-gap is 'normal'	
+Pass	grid-column-gap accepts pixels	
+Pass	grid-column-gap accepts em	
+Pass	grid-column-gap accepts vw	
+Pass	grid-column-gap accepts percentage	
+Fail	grid-column-gap accepts calc()	
+Fail	grid-column-gap accepts calc() mixing fixed and percentage values	
+Fail	Initial grid-column-gap is 'normal'	
+Fail	Initial grid-column-gap is 'normal' 2	
+Fail	Initial inherited grid-column-gap is 'normal'	
+Pass	grid-column-gap is inheritable	
+Fail	Negative grid-column-gap is invalid	
+Fail	'max-content' grid-column-gap is invalid	
+Fail	'none' grid-column-gap is invalid	
+Fail	grid-column-gap with multiple values is invalid	
+Fail	Angle grid-column-gap is invalid	
+Fail	Resolution grid-column-gap is invalid	
+Fail	Time grid-column-gap is invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-gap-parsing-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-gap-parsing-001.txt
new file mode 100644
index 00000000000..1c06204e5eb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-gap-parsing-001.txt
@@ -0,0 +1,37 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 26 tests
+
+10 Pass
+16 Fail
+Details
+Result	Test Name	MessageFail	Default grid-gap is 'normal'	
+Pass	grid-gap accepts pixels	
+Pass	grid-gap accepts pixels 2	
+Pass	grid-gap accepts pixels combined with percentage	
+Pass	grid-gap accepts em	
+Pass	grid-gap accepts em 2	
+Pass	grid-gap accepts vw	
+Pass	grid-gap accepts vw and vh	
+Pass	grid-gap accepts percentage	
+Pass	grid-gap accepts percentage 2	
+Fail	grid-gap accepts calc()	
+Fail	grid-gap accepts calc() mixing fixed and percentage values	
+Fail	grid-gap accepts calc() 2	
+Fail	Initial grid-gap is 'normal'	
+Fail	Initial grid-gap is 'normal' 2	
+Fail	Initial inherited grid-gap is 'normal'	
+Pass	grid-gap is inheritable	
+Fail	Negative grid-gap is invalid	
+Fail	'max-content' grid-gap is invalid	
+Fail	'none' grid-gap is invalid	
+Fail	Angle grid-gap is invalid	
+Fail	Resolution grid-gap is invalid	
+Fail	Time grid-gap is invalid	
+Fail	grid-gap with three values is invalid	
+Fail	grid-gap with slash is invalid	
+Fail	grid-gap with one wrong value is invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-row-gap-parsing-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-row-gap-parsing-001.txt
new file mode 100644
index 00000000000..b6341e682cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/grid-row-gap-parsing-001.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	Default grid-row-gap is 'normal'	
+Pass	grid-row-gap accepts pixels	
+Pass	grid-row-gap accepts em	
+Pass	grid-row-gap accepts vw	
+Pass	grid-row-gap accepts percentage	
+Fail	grid-row-gap accepts calc()	
+Fail	grid-row-gap accepts calc() mixing fixed and percentage values	
+Fail	Initial grid-row-gap is 'normal'	
+Fail	Initial grid-row-gap is 'normal' 2	
+Fail	Initial inherited grid-row-gap is 'normal'	
+Pass	grid-row-gap is inheritable	
+Fail	Negative grid-row-gap is invalid	
+Fail	'max-content' grid-row-gap is invalid	
+Fail	'none' grid-row-gap is invalid	
+Fail	grid-row-gap with multiple values is invalid	
+Fail	Angle grid-row-gap is invalid	
+Fail	Resolution grid-row-gap is invalid	
+Fail	Time grid-row-gap is invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/legacy-gap-aliases-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/legacy-gap-aliases-001.txt
new file mode 100644
index 00000000000..e2a80fd667f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/legacy-gap-aliases-001.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 3 tests
+
+2 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	grid-row-gap is a legacy name alias for row-gap	
+Pass	grid-column-gap is a legacy name alias for column-gap	
+Fail	grid-gap is a legacy name alias for gap	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-001.txt
new file mode 100644
index 00000000000..8f209ee9e81
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	row-gap is interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-002.txt
new file mode 100644
index 00000000000..7bb56a2c63d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	row-gap: normal is not interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-003.txt
new file mode 100644
index 00000000000..392374795d1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-animation-003.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Default row-gap is not interpolable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-parsing-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-parsing-001.txt
new file mode 100644
index 00000000000..07d8a9c4434
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-align/gaps/row-gap-parsing-001.txt
@@ -0,0 +1,29 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 18 tests
+
+5 Pass
+13 Fail
+Details
+Result	Test Name	MessageFail	Default row-gap is 'normal'	
+Pass	row-gap accepts pixels	
+Pass	row-gap accepts em	
+Pass	row-gap accepts vw	
+Pass	row-gap accepts percentage	
+Fail	row-gap accepts calc()	
+Fail	row-gap accepts calc() mixing fixed and percentage values	
+Fail	Initial row-gap is 'normal'	
+Fail	Initial row-gap is 'normal' 2	
+Fail	Initial inherited row-gap is 'normal'	
+Pass	row-gap is inheritable	
+Fail	Negative row-gap is invalid	
+Fail	'max-content' row-gap is invalid	
+Fail	'none' row-gap is invalid	
+Fail	row-gap with multiple values is invalid	
+Fail	Angle row-gap is invalid	
+Fail	Resolution row-gap is invalid	
+Fail	Time row-gap is invalid	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-001.html
new file mode 100644
index 00000000000..1dc028cc6f4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: column-gap test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that column-gap property is interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes column-gap-0-to-100 {
+    from { column-gap: 0px; }
+    to { column-gap: 100px; }
+  }
+
+  #target {
+    animation-name: column-gap-0-to-100;
+    animation-timing-function: linear;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).columnGap, "50px");
+      }, "column-gap is interpolable");
+  </script>
+</body>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-002.html
new file mode 100644
index 00000000000..e1a15eaf7aa
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: column-gap normal test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that 'normal' value for column-gap property is not interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes column-gap-normal-to-100 {
+    from { column-gap: normal; }
+    to { column-gap: 100px; }
+  }
+
+  #target {
+    animation-name: column-gap-normal-to-100;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).columnGap, "100px");
+      }, "column-gap: normal is not interpolable");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-003.html
new file mode 100644
index 00000000000..b25e5000d32
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-animation-003.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: Default column-gap test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that the default value for column-gap property, which is 'normal', is not interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes column-gap-to-100 {
+    to { column-gap: 100px; }
+  }
+
+  #target {
+    animation-name: column-gap-to-100;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).columnGap, "100px");
+      }, "Default column-gap is not interpolable");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-parsing-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-parsing-001.html
new file mode 100644
index 00000000000..af486db755b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/column-gap-parsing-001.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: column-gap parsing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  .columnGapPx { column-gap: 12px; }
+  #columnGapEm { column-gap: 2em; font: 10px/1 Monospace; }
+  #columnGapVw { column-gap: 2vw; }
+  #columnGapPercent { column-gap: 15%; }
+  #columnGapCalc { column-gap: calc(10px + 4px); }
+  #columnGapCalcFixedPercent { column-gap: calc(5px + 10%); }
+  .columnGapInitial { column-gap: initial; }
+  .columnGapInherit { column-gap: inherit; }
+
+  #invalidColumnGapNegative { column-gap: -10px; }
+  #invalidColumnGapMaxContent { column-gap: max-content; }
+  #invalidColumnGapNone { column-gap: none; }
+  #invalidColumnGapMultiple { column-gap: 10px 1px; }
+  #invalidColumnGapAngle { column-gap: 3rad; }
+  #invalidColumnGapResolution { column-gap: 2dpi; }
+  #invalidColumnGapTime { column-gap: 200ms; }
+</style>
+<body>
+  <div id="log"></div>
+
+  <div id="default"></div>
+  <div id="columnGapPx" class="columnGapPx"></div>
+  <div id="columnGapEm"></div>
+  <div id="columnGapVw"></div>
+  <div id="columnGapPercent"></div>
+  <div id="columnGapCalc"></div>
+  <div id="columnGapCalcFixedPercent"></div>
+  <div id="columnGapInitial" class="columnGapInitial"></div>
+  <div class="columnGapPx">
+    <div id="columnGapInitialPx" class="columnGapInitial"></div>
+  </div>
+  <div id="columnGapInherit" class="columnGapInherit"></div>
+  <div class="columnGapPx">
+    <div id="columnGapInheritPx" class="columnGapInherit"></div>
+  </div>
+
+  <div id="invalidColumnGapNegative"></div>
+  <div id="invalidColumnGapMaxContent"></div>
+  <div id="invalidColumnGapNone"></div>
+  <div id="invalidColumnGapMultiple"></div>
+  <div id="invalidColumnGapAngle"></div>
+  <div id="invalidColumnGapResolution"></div>
+  <div id="invalidColumnGapTime"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("default");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Default column-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("columnGapPx");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "column-gap accepts pixels");
+    test(
+      function(){
+        var target = document.getElementById("columnGapEm");
+        assert_equals(getComputedStyle(target).columnGap, "20px");
+      }, "column-gap accepts em");
+    test(
+      function(){
+        var target = document.getElementById("columnGapVw");
+        // The columnGap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).columnGap, "normal");
+      }, "column-gap accepts vw");
+    test(
+      function(){
+        var target = document.getElementById("columnGapPercent");
+        assert_equals(getComputedStyle(target).columnGap, "15%");
+      }, "column-gap accepts percentage");
+    test(
+      function(){
+        var target = document.getElementById("columnGapCalc");
+        assert_equals(getComputedStyle(target).columnGap, "14px");
+      }, "column-gap accepts calc()");
+    test(
+      function(){
+        var target = document.getElementById("columnGapCalcFixedPercent");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
+      }, "column-gap accepts calc() mixing fixed and percentage values");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInitial");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial column-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInitialPx");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial column-gap is 'normal' 2");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInherit");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial inherited column-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInheritPx");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "column-gap is inheritable");
+
+
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapNegative");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Negative column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapMaxContent");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'max-content' column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapNone");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'none' column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapMultiple");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "column-gap with multiple values is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapAngle");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Angle column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapResolution");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Resolution column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapTime");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Time column-gap is invalid");
+  </script>
+</body>
+
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-001.html
new file mode 100644
index 00000000000..d5ae0ac8135
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-001.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: gap test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that gap property is interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes gap-0-to-100 {
+    from { gap: 0px; }
+    to { gap: 100px; }
+  }
+
+  #target {
+    animation-name: gap-0-to-100;
+    animation-timing-function: linear;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).gap, "50px");
+        assert_equals(getComputedStyle(target).rowGap, "50px");
+        assert_equals(getComputedStyle(target).columnGap, "50px");
+      }, "gap is interpolable");
+  </script>
+</body>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-002.html
new file mode 100644
index 00000000000..64020b1b686
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-002.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: gap normal test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that 'normal' value for gap property is not interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes gap-normal-to-100 {
+    from { gap: normal; }
+    to { gap: 100px; }
+  }
+
+  #target {
+    animation-name: gap-normal-to-100;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).gap, "100px");
+        assert_equals(getComputedStyle(target).rowGap, "100px");
+        assert_equals(getComputedStyle(target).columnGap, "100px");
+      }, "gap: normal is not interpolable");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-003.html
new file mode 100644
index 00000000000..bc294893996
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-003.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: Default gap test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that the default value for gap property, which is 'normal', is not interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes gap-to-100 {
+    to { gap: 100px; }
+  }
+
+  #target {
+    animation-name: gap-to-100;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).gap, "100px");
+        assert_equals(getComputedStyle(target).rowGap, "100px");
+        assert_equals(getComputedStyle(target).columnGap, "100px");
+      }, "Default gap is not interpolable");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-004.html
new file mode 100644
index 00000000000..81ee9a95912
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-animation-004.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: gap test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that gap property is interpolable for each longhand (row-gap and column-gap) independently.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes gap-100-200-to-200-400 {
+    from { gap: 100px 200px; }
+    to { gap: 200px 400px; }
+  }
+
+  #target {
+    animation-name: gap-100-200-to-200-400;
+    animation-timing-function: linear;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).gap, "150px 300px");
+        assert_equals(getComputedStyle(target).rowGap, "150px");
+        assert_equals(getComputedStyle(target).columnGap, "300px");
+      }, "gap is interpolable");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-normal-computed-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-normal-computed-001.html
new file mode 100644
index 00000000000..c250c9acb6e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-normal-computed-001.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: computed value of normal on *-gap properties</title>
+<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<meta assert="The computed value of [row-|column-]?gap is normal for all elements it applies to. Checking explicitely because earlier version of the spec called for 0px in some cases.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+#col,
+#grid,
+#flex {
+  /* Not using the shorthand because that's not what we're interested in,
+     and there are implementations that support column-gap without supporting the shorthand */
+  colum-gap: normal;
+  row-gap: normal;
+  float: right; /* for shrinkwrap*/
+}
+#col {
+  column-count: 2;
+  column-width: 50px;
+}
+#grid {
+  display: grid;
+  grid-template-columns: 50px 50px;
+  grid-template-rows: 50px 50px;
+}
+#flex {
+  display: flex;
+}
+#flex * { width: 50px; height: 50px;}
+</style>
+<body>
+  <div id="log"></div>
+
+  <div id=col></div>
+  <div id=grid></div>
+  <div id=flex><span></span><span></span></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("col");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "colum-gap:normal computes to normal on multicol elements");
+    test(
+      function(){
+        var target = document.getElementById("col");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "row-gap:normal computes to normal on multicol elements");
+    test(
+      function(){
+        var target = document.getElementById("grid");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "colum-gap:normal computes to normal on grid");
+    test(
+      function(){
+        var target = document.getElementById("grid");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "row-gap:normal computes to normal on grid");
+    test(
+      function(){
+        var target = document.getElementById("flex");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "colum-gap:normal (main axis) computes to normal on flexbox");
+    test(
+      function(){
+        var target = document.getElementById("flex");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "row-gap:normal (cross axis) computes to normal on flexbox");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-parsing-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-parsing-001.html
new file mode 100644
index 00000000000..703edd3ce92
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-parsing-001.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: gap shorthand parsing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#row-row-gap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  .gapPx { gap: 12px; }
+  #gapPxTwo { gap: 12px 8px; }
+  #gapPxPercent { gap: 12px 10%; }
+  #gapEm { gap: 2em; font: 10px/1 Monospace; }
+  #gapEmTwo { gap: 2em 4em; font: 10px/1 Monospace; }
+  #gapVw { gap: 2vw; }
+  #gapVwTwo { gap: 2vw 1vh; }
+  #gapPercent { gap: 15%; }
+  #gapPercentTwo { gap: 15% 10%; }
+  #gapCalc { gap: calc(10px + 4px); }
+  #gapCalcFixedPercent { gap: calc(5px + 10%); }
+  #gapCalcTwo { gap: calc(10px + 4px) calc(20px - 8px); }
+  .gapInitial { gap: initial; }
+  .gapInherit { gap: inherit; }
+
+  #invalidGapNegative { gap: -10px; }
+  #invalidGapMaxContent { gap: max-content; }
+  #invalidGapNone { gap: none; }
+  #invalidGapAngle { gap: 3rad; }
+  #invalidGapResolution { gap: 2dpi; }
+  #invalidGapTime { gap: 200ms; }
+  #invalidGapThree { gap: 10px 1px 5px; }
+  #invalidGapSlash { gap: 10px / 5px; }
+  #invalidGapOneWrong { gap: 10px -5px; }
+</style>
+<body>
+  <div id="log"></div>
+
+  <div id="default"></div>
+  <div id="gapPx" class="gapPx"></div>
+  <div id="gapPxTwo"></div>
+  <div id="gapPxPercent"></div>
+  <div id="gapEm"></div>
+  <div id="gapEmTwo"></div>
+  <div id="gapVw"></div>
+  <div id="gapVwTwo"></div>
+  <div id="gapPercent"></div>
+  <div id="gapPercentTwo"></div>
+  <div id="gapCalc"></div>
+  <div id="gapCalcFixedPercent"></div>
+  <div id="gapCalcTwo"></div>
+  <div id="gapInitial" class="gapInitial"></div>
+  <div class="gapPx">
+    <div id="gapInitialPx" class="gapInitial"></div>
+  </div>
+  <div id="gapInherit" class="gapInherit"></div>
+  <div class="gapPx">
+    <div id="gapInheritPx" class="gapInherit"></div>
+  </div>
+
+  <div id="invalidGapNegative"></div>
+  <div id="invalidGapMaxContent"></div>
+  <div id="invalidGapNone"></div>
+  <div id="invalidGapAngle"></div>
+  <div id="invalidGapResolution"></div>
+  <div id="invalidGapTime"></div>
+  <div id="invalidGapThree"></div>
+  <div id="invalidGapSlash"></div>
+  <div id="invalidGapOneWrong"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("default");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Default gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("gapPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "gap accepts pixels");
+    test(
+      function(){
+        var target = document.getElementById("gapPxTwo");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "8px");
+      }, "gap accepts pixels 2");
+    test(
+      function(){
+        var target = document.getElementById("gapPxPercent");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "10%");
+      }, "gap accepts pixels combined with percentage");
+    test(
+      function(){
+        var target = document.getElementById("gapEm");
+        assert_equals(getComputedStyle(target).rowGap, "20px");
+        assert_equals(getComputedStyle(target).columnGap, "20px");
+      }, "gap accepts em");
+    test(
+      function(){
+        var target = document.getElementById("gapEmTwo");
+        assert_equals(getComputedStyle(target).rowGap, "20px");
+        assert_equals(getComputedStyle(target).columnGap, "40px");
+      }, "gap accepts em 2");
+    test(
+      function(){
+        var target = document.getElementById("gapVw");
+        // The gap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).rowGap, "normal");
+        assert_not_equals(getComputedStyle(target).columnGap, "normal");
+      }, "gap accepts vw");
+    test(
+      function(){
+        var target = document.getElementById("gapVwTwo");
+        // The gap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).rowGap, "normal");
+        assert_not_equals(getComputedStyle(target).columnGap, "normal");
+      }, "gap accepts vw and vh");
+    test(
+      function(){
+        var target = document.getElementById("gapPercent");
+        assert_equals(getComputedStyle(target).rowGap, "15%");
+        assert_equals(getComputedStyle(target).columnGap, "15%");
+      }, "gap accepts percentage");
+    test(
+      function(){
+        var target = document.getElementById("gapPercentTwo");
+        assert_equals(getComputedStyle(target).rowGap, "15%");
+        assert_equals(getComputedStyle(target).columnGap, "10%");
+      }, "gap accepts percentage 2");
+    test(
+      function(){
+        var target = document.getElementById("gapCalc");
+        assert_equals(getComputedStyle(target).rowGap, "14px");
+        assert_equals(getComputedStyle(target).columnGap, "14px");
+      }, "gap accepts calc()");
+    test(
+      function(){
+        var target = document.getElementById("gapCalcFixedPercent");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
+      }, "gap accepts calc() mixing fixed and percentage values");
+    test(
+      function(){
+        var target = document.getElementById("gapCalcTwo");
+        assert_equals(getComputedStyle(target).rowGap, "14px");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "gap accepts calc() 2");
+    test(
+      function(){
+        var target = document.getElementById("gapInitial");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("gapInitialPx");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial gap is 'normal' 2");
+    test(
+      function(){
+        var target = document.getElementById("gapInherit");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial inherited gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("gapInheritPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "gap is inheritable");
+
+    test(
+      function(){
+        var target = document.getElementById("invalidGapNegative");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Negative gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapMaxContent");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'max-content' gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapNone");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'none' gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapAngle");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Angle gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapResolution");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Resolution gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapTime");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Time gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapThree");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "gap with three values is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapSlash");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "gap with slash is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGapOneWrong");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "gap with one wrong value is invalid");
+  </script>
+</body>
+
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-parsing-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-parsing-002.html
new file mode 100644
index 00000000000..9e0fdd8b1e8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/gap-parsing-002.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>CSS Align Gap Values: longhand and shorthand gap parsing for style attribute</title>
+<link rel="help" href="https://drafts.csswg.org/css-align/#gaps">
+<link rel="author" title="Karl Dubost" href="mailto:karlcow@apple.com">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/parsing-testcommon.js"></script>
+</head>
+<body>
+<script>
+test_valid_value("gap", "normal");
+test_valid_value("gap", "10px");
+test_valid_value("gap", "normal normal", "normal");
+test_valid_value("gap", "10px 10px", "10px");
+test_valid_value("column-gap", "normal");
+test_valid_value("column-gap", "10px");
+test_valid_value("row-gap", "normal");
+test_valid_value("row-gap", "10px");
+
+const div = document.createElement("div");
+const style = div.style;
+
+test(function() {
+  style.cssText = "row-gap: normal; column-gap: normal;";
+  assert_equals(style.cssText, "gap: normal;");
+}, "'row-gap: normal; column-gap: normal;' is serialized to 'gap: normal;'");
+
+test(function() {
+  style.cssText = "row-gap: normal; column-gap: normal;";
+  assert_equals(style.getPropertyValue('gap'), "normal");
+}, "getPropertyValue for 'row-gap: normal; column-gap: normal;' returns 'normal'");
+
+test(function() {
+  style.cssText = "row-gap: 10px; column-gap: 10px;";
+  assert_equals(style.cssText, "gap: 10px;");
+}, "'row-gap: 10px; column-gap: 10px;' is serialized to 'gap: 10px;'");
+
+test(function() {
+  style.cssText = "row-gap: 10px; column-gap: 10px;";
+  assert_equals(style.getPropertyValue('gap'), "10px");
+}, "getPropertyValue for 'row-gap: 10px; column-gap: 10px;' returns '10px'");
+
+test(function() {
+  style.cssText = "row-gap: 10px; column-gap: normal;";
+  assert_equals(style.cssText, "gap: 10px normal;");
+}, "'row-gap: 10px; column-gap: normal;' is serialized to 'gap: 10px normal;'");
+
+test(function() {
+  style.cssText = "row-gap: 10px; column-gap: normal;";
+  assert_equals(style.getPropertyValue('gap'), "10px normal");
+}, "getPropertyValue for 'row-gap: 10px; column-gap: normal;' returns '10px normal'");
+
+test(function() {
+  style.cssText = "column-gap: normal; row-gap: 10px;";
+  assert_equals(style.cssText, "gap: 10px normal;");
+}, "'column-gap: normal; row-gap: 10px;' is serialized to 'gap: 10px normal;'");
+
+test(function() {
+  style.cssText = "column-gap: normal; row-gap: 10px;";
+  assert_equals(style.getPropertyValue('gap'), "10px normal");
+}, "getPropertyValue for 'column-gap: normal; row-gap: 10px;' returns '10px normal'");
+
+</script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-column-gap-parsing-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-column-gap-parsing-001.html
new file mode 100644
index 00000000000..6b418dc95e8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-column-gap-parsing-001.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: grid-column-gap parsing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  .columnGapPx { grid-column-gap: 12px; }
+  #columnGapEm { grid-column-gap: 2em; font: 10px/1 Monospace; }
+  #columnGapVw { grid-column-gap: 2vw; }
+  #columnGapPercent { grid-column-gap: 15%; }
+  #columnGapCalc { grid-column-gap: calc(10px + 4px); }
+  #columnGapCalcFixedPercent { grid-column-gap: calc(5px + 10%); }
+  .columnGapInitial { grid-column-gap: initial; }
+  .columnGapInherit { grid-column-gap: inherit; }
+
+  #invalidColumnGapNegative { grid-column-gap: -10px; }
+  #invalidColumnGapMaxContent { grid-column-gap: max-content; }
+  #invalidColumnGapNone { grid-column-gap: none; }
+  #invalidColumnGapMultiple { grid-column-gap: 10px 1px; }
+  #invalidColumnGapAngle { grid-column-gap: 3rad; }
+  #invalidColumnGapResolution { grid-column-gap: 2dpi; }
+  #invalidColumnGapTime { grid-column-gap: 200ms; }
+</style>
+<body>
+  <div id="log"></div>
+
+  <div id="default"></div>
+  <div id="columnGapPx" class="columnGapPx"></div>
+  <div id="columnGapEm"></div>
+  <div id="columnGapVw"></div>
+  <div id="columnGapPercent"></div>
+  <div id="columnGapCalc"></div>
+  <div id="columnGapCalcFixedPercent"></div>
+  <div id="columnGapInitial" class="columnGapInitial"></div>
+  <div class="columnGapPx">
+    <div id="columnGapInitialPx" class="columnGapInitial"></div>
+  </div>
+  <div id="columnGapInherit" class="columnGapInherit"></div>
+  <div class="columnGapPx">
+    <div id="columnGapInheritPx" class="columnGapInherit"></div>
+  </div>
+
+  <div id="invalidColumnGapNegative"></div>
+  <div id="invalidColumnGapMaxContent"></div>
+  <div id="invalidColumnGapNone"></div>
+  <div id="invalidColumnGapMultiple"></div>
+  <div id="invalidColumnGapAngle"></div>
+  <div id="invalidColumnGapResolution"></div>
+  <div id="invalidColumnGapTime"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("default");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Default grid-column-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("columnGapPx");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "grid-column-gap accepts pixels");
+    test(
+      function(){
+        var target = document.getElementById("columnGapEm");
+        assert_equals(getComputedStyle(target).columnGap, "20px");
+      }, "grid-column-gap accepts em");
+    test(
+      function(){
+        var target = document.getElementById("columnGapVw");
+        // The columnGap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).columnGap, "normal");
+      }, "grid-column-gap accepts vw");
+    test(
+      function(){
+        var target = document.getElementById("columnGapPercent");
+        assert_equals(getComputedStyle(target).columnGap, "15%");
+      }, "grid-column-gap accepts percentage");
+    test(
+      function(){
+        var target = document.getElementById("columnGapCalc");
+        assert_equals(getComputedStyle(target).columnGap, "14px");
+      }, "grid-column-gap accepts calc()");
+    test(
+      function(){
+        var target = document.getElementById("columnGapCalcFixedPercent");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
+      }, "grid-column-gap accepts calc() mixing fixed and percentage values");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInitial");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial grid-column-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInitialPx");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial grid-column-gap is 'normal' 2");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInherit");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial inherited grid-column-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("columnGapInheritPx");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "grid-column-gap is inheritable");
+
+
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapNegative");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Negative grid-column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapMaxContent");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'max-content' grid-column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapNone");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'none' grid-column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapMultiple");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "grid-column-gap with multiple values is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapAngle");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Angle grid-column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapResolution");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Resolution grid-column-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidColumnGapTime");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Time grid-column-gap is invalid");
+  </script>
+</body>
+
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-gap-parsing-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-gap-parsing-001.html
new file mode 100644
index 00000000000..20f1a3ebbe4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-gap-parsing-001.html
@@ -0,0 +1,234 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: gap shorthand parsing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  .gapPx { grid-gap: 12px; }
+  #gapPxTwo { grid-gap: 12px 8px; }
+  #gapPxPercent { grid-gap: 12px 10%; }
+  #gapEm { grid-gap: 2em; font: 10px/1 Monospace; }
+  #gapEmTwo { grid-gap: 2em 4em; font: 10px/1 Monospace; }
+  #gapVw { grid-gap: 2vw; }
+  #gapVwTwo { grid-gap: 2vw 1vh; }
+  #gapPercent { grid-gap: 15%; }
+  #gapPercentTwo { grid-gap: 15% 10%; }
+  #gapCalc { grid-gap: calc(10px + 4px); }
+  #gapCalcFixedPercent { grid-gap: calc(5px + 10%); }
+  #gapCalcTwo { grid-gap: calc(10px + 4px) calc(20px - 8px); }
+  .gapInitial { grid-gap: initial; }
+  .gapInherit { grid-gap: inherit; }
+
+  #invalidGridGapNegative { grid-gap: -10px; }
+  #invalidGridGapMaxContent { grid-gap: max-content; }
+  #invalidGridGapNone { grid-gap: none; }
+  #invalidGridGapAngle { grid-gap: 3rad; }
+  #invalidGridGapResolution { grid-gap: 2dpi; }
+  #invalidGridGapTime { grid-gap: 200ms; }
+  #invalidGridGapThree { grid-gap: 10px 1px 5px; }
+  #invalidGridGapSlash { grid-gap: 10px / 5px; }
+  #invalidGridGapOneWrong { grid-gap: 10px -5px; }
+</style>
+<body>
+  <div id="log"></div>
+
+  <div id="default"></div>
+  <div id="gapPx" class="gapPx"></div>
+  <div id="gapPxTwo"></div>
+  <div id="gapPxPercent"></div>
+  <div id="gapEm"></div>
+  <div id="gapEmTwo"></div>
+  <div id="gapVw"></div>
+  <div id="gapVwTwo"></div>
+  <div id="gapPercent"></div>
+  <div id="gapPercentTwo"></div>
+  <div id="gapCalc"></div>
+  <div id="gapCalcFixedPercent"></div>
+  <div id="gapCalcTwo"></div>
+  <div id="gapInitial" class="gapInitial"></div>
+  <div class="gapPx">
+    <div id="gapInitialPx" class="gapInitial"></div>
+  </div>
+  <div id="gapInherit" class="gapInherit"></div>
+  <div class="gapPx">
+    <div id="gapInheritPx" class="gapInherit"></div>
+  </div>
+
+  <div id="invalidGridGapNegative"></div>
+  <div id="invalidGridGapMaxContent"></div>
+  <div id="invalidGridGapNone"></div>
+  <div id="invalidGridGapAngle"></div>
+  <div id="invalidGridGapResolution"></div>
+  <div id="invalidGridGapTime"></div>
+  <div id="invalidGridGapThree"></div>
+  <div id="invalidGridGapSlash"></div>
+  <div id="invalidGridGapOneWrong"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("default");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Default grid-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("gapPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "grid-gap accepts pixels");
+    test(
+      function(){
+        var target = document.getElementById("gapPxTwo");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "8px");
+      }, "grid-gap accepts pixels 2");
+    test(
+      function(){
+        var target = document.getElementById("gapPxPercent");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "10%");
+      }, "grid-gap accepts pixels combined with percentage");
+    test(
+      function(){
+        var target = document.getElementById("gapEm");
+        assert_equals(getComputedStyle(target).rowGap, "20px");
+        assert_equals(getComputedStyle(target).columnGap, "20px");
+      }, "grid-gap accepts em");
+    test(
+      function(){
+        var target = document.getElementById("gapEmTwo");
+        assert_equals(getComputedStyle(target).rowGap, "20px");
+        assert_equals(getComputedStyle(target).columnGap, "40px");
+      }, "grid-gap accepts em 2");
+    test(
+      function(){
+        var target = document.getElementById("gapVw");
+        // The gap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).rowGap, "normal");
+        assert_not_equals(getComputedStyle(target).columnGap, "normal");
+      }, "grid-gap accepts vw");
+    test(
+      function(){
+        var target = document.getElementById("gapVwTwo");
+        // The gap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).rowGap, "normal");
+        assert_not_equals(getComputedStyle(target).columnGap, "normal");
+      }, "grid-gap accepts vw and vh");
+    test(
+      function(){
+        var target = document.getElementById("gapPercent");
+        assert_equals(getComputedStyle(target).rowGap, "15%");
+        assert_equals(getComputedStyle(target).columnGap, "15%");
+      }, "grid-gap accepts percentage");
+    test(
+      function(){
+        var target = document.getElementById("gapPercentTwo");
+        assert_equals(getComputedStyle(target).rowGap, "15%");
+        assert_equals(getComputedStyle(target).columnGap, "10%");
+      }, "grid-gap accepts percentage 2");
+    test(
+      function(){
+        var target = document.getElementById("gapCalc");
+        assert_equals(getComputedStyle(target).rowGap, "14px");
+        assert_equals(getComputedStyle(target).columnGap, "14px");
+      }, "grid-gap accepts calc()");
+    test(
+      function(){
+        var target = document.getElementById("gapCalcFixedPercent");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
+        assert_equals(getComputedStyle(target).columnGap, "calc(10% + 5px)");
+      }, "grid-gap accepts calc() mixing fixed and percentage values");
+    test(
+      function(){
+        var target = document.getElementById("gapCalcTwo");
+        assert_equals(getComputedStyle(target).rowGap, "14px");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "grid-gap accepts calc() 2");
+    test(
+      function(){
+        var target = document.getElementById("gapInitial");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial grid-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("gapInitialPx");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial grid-gap is 'normal' 2");
+    test(
+      function(){
+        var target = document.getElementById("gapInherit");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Initial inherited grid-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("gapInheritPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+        assert_equals(getComputedStyle(target).columnGap, "12px");
+      }, "grid-gap is inheritable");
+
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapNegative");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Negative grid-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapMaxContent");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'max-content' grid-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapNone");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "'none' grid-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapAngle");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Angle grid-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapResolution");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Resolution grid-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapTime");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "Time grid-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapThree");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "grid-gap with three values is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapSlash");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "grid-gap with slash is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidGridGapOneWrong");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+        assert_equals(getComputedStyle(target).columnGap, "normal");
+      }, "grid-gap with one wrong value is invalid");
+  </script>
+</body>
+
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-row-gap-parsing-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-row-gap-parsing-001.html
new file mode 100644
index 00000000000..3ea0b1fb8ce
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/grid-row-gap-parsing-001.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: grid-row-gap parsing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  .rowGapPx { grid-row-gap: 12px; }
+  #rowGapEm { grid-row-gap: 2em; font: 10px/1 Monospace; }
+  #rowGapVw { grid-row-gap: 2vw; }
+  #rowGapPercent { grid-row-gap: 15%; }
+  #rowGapCalc { grid-row-gap: calc(10px + 4px); }
+  #rowGapCalcFixedPercent { grid-row-gap: calc(5px + 10%); }
+  .rowGapInitial { grid-row-gap: initial; }
+  .rowGapInherit { grid-row-gap: inherit; }
+
+  #invalidRowGapNegative { grid-row-gap: -10px; }
+  #invalidRowGapMaxContent { grid-row-gap: max-content; }
+  #invalidRowGapNone { grid-row-gap: none; }
+  #invalidRowGapMultiple { grid-row-gap: 10px 1px; }
+  #invalidRowGapAngle { grid-row-gap: 3rad; }
+  #invalidRowGapResolution { grid-row-gap: 2dpi; }
+  #invalidRowGapTime { grid-row-gap: 200ms; }
+</style>
+<body>
+  <div id="log"></div>
+
+  <div id="default"></div>
+  <div id="rowGapPx" class="rowGapPx"></div>
+  <div id="rowGapEm"></div>
+  <div id="rowGapVw"></div>
+  <div id="rowGapPercent"></div>
+  <div id="rowGapCalc"></div>
+  <div id="rowGapCalcFixedPercent"></div>
+  <div id="rowGapInitial" class="rowGapInitial"></div>
+  <div class="rowGapPx">
+    <div id="rowGapInitialPx" class="rowGapInitial"></div>
+  </div>
+  <div id="rowGapInherit" class="rowGapInherit"></div>
+  <div class="rowGapPx">
+    <div id="rowGapInheritPx" class="rowGapInherit"></div>
+  </div>
+
+  <div id="invalidRowGapNegative"></div>
+  <div id="invalidRowGapMaxContent"></div>
+  <div id="invalidRowGapNone"></div>
+  <div id="invalidRowGapMultiple"></div>
+  <div id="invalidRowGapAngle"></div>
+  <div id="invalidRowGapResolution"></div>
+  <div id="invalidRowGapTime"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("default");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Default grid-row-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("rowGapPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+      }, "grid-row-gap accepts pixels");
+    test(
+      function(){
+        var target = document.getElementById("rowGapEm");
+        assert_equals(getComputedStyle(target).rowGap, "20px");
+      }, "grid-row-gap accepts em");
+    test(
+      function(){
+        var target = document.getElementById("rowGapVw");
+        // The rowGap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).rowGap, "normal");
+      }, "grid-row-gap accepts vw");
+    test(
+      function(){
+        var target = document.getElementById("rowGapPercent");
+        assert_equals(getComputedStyle(target).rowGap, "15%");
+      }, "grid-row-gap accepts percentage");
+    test(
+      function(){
+        var target = document.getElementById("rowGapCalc");
+        assert_equals(getComputedStyle(target).rowGap, "14px");
+      }, "grid-row-gap accepts calc()");
+    test(
+      function(){
+        var target = document.getElementById("rowGapCalcFixedPercent");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
+      }, "grid-row-gap accepts calc() mixing fixed and percentage values");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInitial");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Initial grid-row-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInitialPx");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Initial grid-row-gap is 'normal' 2");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInherit");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Initial inherited grid-row-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInheritPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+      }, "grid-row-gap is inheritable");
+
+
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapNegative");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Negative grid-row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapMaxContent");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "'max-content' grid-row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapNone");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "'none' grid-row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapMultiple");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "grid-row-gap with multiple values is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapAngle");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Angle grid-row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapResolution");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Resolution grid-row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapTime");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Time grid-row-gap is invalid");
+  </script>
+</body>
+
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/legacy-gap-aliases-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/legacy-gap-aliases-001.html
new file mode 100644
index 00000000000..5e5a1a69e12
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/legacy-gap-aliases-001.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<meta charset=UTF-8>
+<title>CSS Box Alignment Test: legacy gap properties</title>
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#gap-legacy">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../support/shorthand-testcommon.js"></script>
+<body>
+<script>
+
+test_is_legacy_name_alias("grid-row-gap", "row-gap");
+test_is_legacy_name_alias("grid-column-gap", "column-gap");
+test_is_legacy_name_alias("grid-gap", "gap");
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-001.html
new file mode 100644
index 00000000000..3f8c5459ee6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-001.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: row-gap test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that row-gap property is interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes row-gap-0-to-100 {
+    from { row-gap: 0px; }
+    to { row-gap: 100px; }
+  }
+
+  #target {
+    animation-name: row-gap-0-to-100;
+    animation-timing-function: linear;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).rowGap, "50px");
+      }, "row-gap is interpolable");
+  </script>
+</body>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-002.html
new file mode 100644
index 00000000000..087ae25f10a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-002.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: row-gap normal test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that 'normal' value for row-gap property is not interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes row-gap-normal-to-100 {
+    from { row-gap: normal; }
+    to { row-gap: 100px; }
+  }
+
+  #target {
+    animation-name: row-gap-normal-to-100;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).rowGap, "100px");
+      }, "row-gap: normal is not interpolable");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-003.html
new file mode 100644
index 00000000000..6da7fb1edaf
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-animation-003.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: Default row-gap test animation</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<link rel="help" href="https://www.w3.org/TR/css-animations-1/#keyframes">
+<meta name="assert" content="This test checks that the default value for row-gap property, which is 'normal', is not interpolable.">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  @keyframes row-gap-to-100 {
+    to { row-gap: 100px; }
+  }
+
+  #target {
+    animation-name: row-gap-to-100;
+    animation-duration: 2s;
+    animation-delay: -1s;
+    animation-play-state: paused;
+  }
+</style>
+<body>
+  <div id="target"></div>
+  <div id="log"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("target");
+        assert_equals(getComputedStyle(target).rowGap, "100px");
+      }, "Default row-gap is not interpolable");
+  </script>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-parsing-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-parsing-001.html
new file mode 100644
index 00000000000..97d10b301f7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-align/gaps/row-gap-parsing-001.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Box Alignment Test: row-gap parsing</title>
+<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
+<link rel="help" href="https://www.w3.org/TR/css-align-3/#column-row-gap">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  .rowGapPx { row-gap: 12px; }
+  #rowGapEm { row-gap: 2em; font: 10px/1 Monospace; }
+  #rowGapVw { row-gap: 2vw; }
+  #rowGapPercent { row-gap: 15%; }
+  #rowGapCalc { row-gap: calc(10px + 4px); }
+  #rowGapCalcFixedPercent { row-gap: calc(5px + 10%); }
+  .rowGapInitial { row-gap: initial; }
+  .rowGapInherit { row-gap: inherit; }
+
+  #invalidRowGapNegative { row-gap: -10px; }
+  #invalidRowGapMaxContent { row-gap: max-content; }
+  #invalidRowGapNone { row-gap: none; }
+  #invalidRowGapMultiple { row-gap: 10px 1px; }
+  #invalidRowGapAngle { row-gap: 3rad; }
+  #invalidRowGapResolution { row-gap: 2dpi; }
+  #invalidRowGapTime { row-gap: 200ms; }
+</style>
+<body>
+  <div id="log"></div>
+
+  <div id="default"></div>
+  <div id="rowGapPx" class="rowGapPx"></div>
+  <div id="rowGapEm"></div>
+  <div id="rowGapVw"></div>
+  <div id="rowGapPercent"></div>
+  <div id="rowGapCalc"></div>
+  <div id="rowGapCalcFixedPercent"></div>
+  <div id="rowGapInitial" class="rowGapInitial"></div>
+  <div class="rowGapPx">
+    <div id="rowGapInitialPx" class="rowGapInitial"></div>
+  </div>
+  <div id="rowGapInherit" class="rowGapInherit"></div>
+  <div class="rowGapPx">
+    <div id="rowGapInheritPx" class="rowGapInherit"></div>
+  </div>
+
+  <div id="invalidRowGapNegative"></div>
+  <div id="invalidRowGapMaxContent"></div>
+  <div id="invalidRowGapNone"></div>
+  <div id="invalidRowGapMultiple"></div>
+  <div id="invalidRowGapAngle"></div>
+  <div id="invalidRowGapResolution"></div>
+  <div id="invalidRowGapTime"></div>
+
+  <script>
+    test(
+      function(){
+        var target = document.getElementById("default");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Default row-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("rowGapPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+      }, "row-gap accepts pixels");
+    test(
+      function(){
+        var target = document.getElementById("rowGapEm");
+        assert_equals(getComputedStyle(target).rowGap, "20px");
+      }, "row-gap accepts em");
+    test(
+      function(){
+        var target = document.getElementById("rowGapVw");
+        // The rowGap size would depend on the viewport width, so to make the test pass
+        // in any window size we just check it's not "normal".
+        assert_not_equals(getComputedStyle(target).rowGap, "normal");
+      }, "row-gap accepts vw");
+    test(
+      function(){
+        var target = document.getElementById("rowGapPercent");
+        assert_equals(getComputedStyle(target).rowGap, "15%");
+      }, "row-gap accepts percentage");
+    test(
+      function(){
+        var target = document.getElementById("rowGapCalc");
+        assert_equals(getComputedStyle(target).rowGap, "14px");
+      }, "row-gap accepts calc()");
+    test(
+      function(){
+        var target = document.getElementById("rowGapCalcFixedPercent");
+        assert_equals(getComputedStyle(target).rowGap, "calc(10% + 5px)");
+      }, "row-gap accepts calc() mixing fixed and percentage values");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInitial");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Initial row-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInitialPx");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Initial row-gap is 'normal' 2");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInherit");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Initial inherited row-gap is 'normal'");
+    test(
+      function(){
+        var target = document.getElementById("rowGapInheritPx");
+        assert_equals(getComputedStyle(target).rowGap, "12px");
+      }, "row-gap is inheritable");
+
+
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapNegative");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Negative row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapMaxContent");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "'max-content' row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapNone");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "'none' row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapMultiple");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "row-gap with multiple values is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapAngle");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Angle row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapResolution");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Resolution row-gap is invalid");
+    test(
+      function(){
+        var target = document.getElementById("invalidRowGapTime");
+        assert_equals(getComputedStyle(target).rowGap, "normal");
+      }, "Time row-gap is invalid");
+  </script>
+</body>
+
+