diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-001.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-001.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-002.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-002.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-003.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-003.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-004.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-004.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-005.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-005.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-006.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-006.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-007.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-007.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-008.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-008.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-009.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-009.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-009.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-010.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-010.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-010.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-011.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-011.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-011.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-012.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-012.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-012.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-017.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-017.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-017.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-018.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-018.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-018.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-019.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-019.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-019.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-020.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-020.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-020.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-021.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-021.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-021.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-022.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-022.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-022.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-023.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-023.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-023.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-024.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-024.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-024.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-025.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-025.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-025.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-026.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-026.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-026.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-027.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-027.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-027.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-028.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-028.txt
new file mode 100644
index 00000000000..31c0652e335
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-028.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-029.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-029.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-029.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-030.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-030.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-030.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.txt
new file mode 100644
index 00000000000..49efa8c122d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.txt
@@ -0,0 +1,13 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+1 Pass
+1 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Pass	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-035.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-035.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-035.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-036.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-036.txt
new file mode 100644
index 00000000000..91e25b00f3e
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-036.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.after 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-001.txt
new file mode 100644
index 00000000000..af7cdd0d6e6
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-001.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+3 Pass
+3 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Pass	.before 2	
+Fail	.before 3	
+Fail	.after 4	
+Pass	.after 5	
+Pass	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-002.txt
new file mode 100644
index 00000000000..63d137da784
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-002.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+3 Pass
+3 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Pass	.before 2	
+Pass	.before 3	
+Fail	.after 4	
+Pass	.after 5	
+Fail	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-003.txt
new file mode 100644
index 00000000000..2c306642e9c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-003.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+1 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.before 2	
+Fail	.before 3	
+Fail	.after 4	
+Pass	.after 5	
+Fail	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-004.txt
new file mode 100644
index 00000000000..52200babd03
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-004.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+1 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Pass	.before 2	
+Fail	.before 3	
+Fail	.after 4	
+Fail	.after 5	
+Fail	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.txt
new file mode 100644
index 00000000000..2c306642e9c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+1 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.before 2	
+Fail	.before 3	
+Fail	.after 4	
+Pass	.after 5	
+Fail	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.txt
new file mode 100644
index 00000000000..52200babd03
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+1 Pass
+5 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Pass	.before 2	
+Fail	.before 3	
+Fail	.after 4	
+Fail	.after 5	
+Fail	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-007.txt
new file mode 100644
index 00000000000..156cfd5b74c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-007.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.before 2	
+Fail	.before 3	
+Fail	.after 4	
+Fail	.after 5	
+Fail	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-008.txt
new file mode 100644
index 00000000000..156cfd5b74c
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-008.txt
@@ -0,0 +1,16 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+6 Fail
+Details
+Result	Test Name	MessageFail	.before 1	
+Fail	.before 2	
+Fail	.before 3	
+Fail	.after 4	
+Fail	.after 5	
+Fail	.after 6	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.txt
new file mode 100644
index 00000000000..da81bb910cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	#grid 1	
+Pass	#grid 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.txt
new file mode 100644
index 00000000000..da81bb910cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	#grid 1	
+Pass	#grid 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.txt
new file mode 100644
index 00000000000..da81bb910cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	#grid 1	
+Pass	#grid 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.txt
new file mode 100644
index 00000000000..da81bb910cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	#grid 1	
+Pass	#grid 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.txt
new file mode 100644
index 00000000000..da81bb910cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	#grid 1	
+Pass	#grid 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.txt
new file mode 100644
index 00000000000..da81bb910cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	#grid 1	
+Pass	#grid 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.txt
new file mode 100644
index 00000000000..da81bb910cb
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	#grid 1	
+Pass	#grid 2	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.txt
new file mode 100644
index 00000000000..df2d3a897bd
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.txt
new file mode 100644
index 00000000000..04700cf9776
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.txt
@@ -0,0 +1,15 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+1 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	.grid 1	
+Fail	.grid 2	
+Fail	.grid 3	
+Fail	.grid 4	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-001.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-002.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-003.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-003.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-004.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-004.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-004.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-005.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-005.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-006.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-006.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-007.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-007.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-007.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-008.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-008.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-008.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-009.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-009.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-009.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-010.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-010.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-010.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-011.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-011.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-011.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-012.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-012.txt
new file mode 100644
index 00000000000..d5407df54f1
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-012.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-013.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-013.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-014.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-014.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-015.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-015.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-015.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-016.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-016.txt
new file mode 100644
index 00000000000..5185c2462e0
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-016.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	.grid 1	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
new file mode 100644
index 00000000000..4691f27ed2a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-001.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
new file mode 100644
index 00000000000..85440ee2340
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-002.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
new file mode 100644
index 00000000000..21d0b7c55d9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-003.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
new file mode 100644
index 00000000000..c0491c23302
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-004.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
new file mode 100644
index 00000000000..01137985006
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-005.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'normal' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
new file mode 100644
index 00000000000..a9489a6b969
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-006.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'normal' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 200);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
new file mode 100644
index 00000000000..abffd8b62fe
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-007.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-height", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
new file mode 100644
index 00000000000..28835f26dd8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-008.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 80);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-009.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
new file mode 100644
index 00000000000..ee2ea8d171e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-009.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-010.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
new file mode 100644
index 00000000000..c5ae0497b4c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-010.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 80);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-width="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-011.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
new file mode 100644
index 00000000000..a83135ae554
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-011.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'start' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-012.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
new file mode 100644
index 00000000000..53fb25120de
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-012.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid's align-items value from 'start' to 'stretch' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
new file mode 100644
index 00000000000..b36b803703c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid's align-items value from 'stretch' to 'normal' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.alignItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
new file mode 100644
index 00000000000..9d6cc1f34ef
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
new file mode 100644
index 00000000000..e4f66e24aef
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'normal' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
new file mode 100644
index 00000000000..ce0ce9cc300
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'normal' to 'start' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 200px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: normal;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-height", 100);
+  grid.style.alignItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-height", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-017.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
new file mode 100644
index 00000000000..eabc6010c05
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-017.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-normal">
+<meta name="assert" content="Changing the grid item's align-items value from 'start' to 'stretch' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.alignItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-018.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
new file mode 100644
index 00000000000..3ee96aebdc1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-018.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's height</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-start">
+<meta name="assert" content="Changing the grid item's align-items value from 'stretch' to 'start' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px;
+  grid-template-rows: 80px;
+  font: 20px/1 Ahem;
+  background: grey;
+  align-items: stretch;
+}
+#item {
+  background: blue;
+  align-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.alignItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-019.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
new file mode 100644
index 00000000000..fb0121a276c
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-019.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-020.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
new file mode 100644
index 00000000000..3f366c0e43a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-020.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-021.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
new file mode 100644
index 00000000000..fafad4e7a50
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-021.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.alignItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-022.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
new file mode 100644
index 00000000000..17f3d555b75
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-022.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes no effect on non-replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-023.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
new file mode 100644
index 00000000000..89d0432187b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-023.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'normal' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-024.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
new file mode 100644
index 00000000000..613539467d5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-024.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'normal' to 'start' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 200);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-025.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
new file mode 100644
index 00000000000..6873037269a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-025.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-026.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
new file mode 100644
index 00000000000..57558c831dd
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-026.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 80);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-027.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
new file mode 100644
index 00000000000..18f7ef5a317
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-027.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes non-replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 120);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 80);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-028.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
new file mode 100644
index 00000000000..4be60d3f4f3
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-028.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 80);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 120);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <div data-expected-height="100" id="item">XXXXXX<br>X<br>XX XXX</div>
+</div>
+</body>
+
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-029.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
new file mode 100644
index 00000000000..cf48176726a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-029.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'start' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-030.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
new file mode 100644
index 00000000000..1be2cb2be85
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-030.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid's justify-items value from 'start' to 'stretch' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
new file mode 100644
index 00000000000..3fc41273989
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid's justify-items value from 'stretch' to 'normal' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 200,
+      'data-expected-height': 200,
+    },
+  });
+  grid.style.justifyItems = 'normal';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
new file mode 100644
index 00000000000..7cc10061034
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'stretch' causes non-replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "stretch";
+  evaluateStyleChange(item, "after", "data-expected-width", 200);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-width="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
new file mode 100644
index 00000000000..164d8223082
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'normal' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "normal";
+  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
new file mode 100644
index 00000000000..4e2e75d08dc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'normal' to 'start' causes no effect on replaced items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 200px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: normal;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChange(item, "before", "data-expected-width", 100);
+  grid.style.justifyItems = "start";
+  evaluateStyleChange(item, "after", "data-expected-width", 100);
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img data-expected-height="100" id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-035.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
new file mode 100644
index 00000000000..a59f0b84831
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-035.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-normal">
+<meta name="assert" content="Changing the grid item's justify-items value from 'start' to 'stretch' causes replaced items to shrink.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  grid.style.justifyItems = 'stretch';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-036.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
new file mode 100644
index 00000000000..f1b9f47ee13
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-036.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changes on Default-Alignment may affect grid item's width</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-item-sizing">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-items">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-start">
+<meta name="assert" content="Changing the grid item's justify-items value from 'stretch' to 'start' causes replaced items to grow.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 80px;
+  grid-template-rows: 100px;
+  font: 20px/1 Ahem;
+  background: grey;
+  justify-items: stretch;
+}
+#item {
+  background: blue;
+  justify-self: auto;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+  evaluateStyleChangeMultiple('before', {
+    item: {
+      'data-expected-width': 80,
+      'data-expected-height': 80,
+    },
+  });
+  grid.style.justifyItems = 'start';
+  evaluateStyleChangeMultiple('after', {
+    item: {
+      'data-expected-width': 100,
+      'data-expected-height': 100,
+    },
+  });
+  done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+<div class="grid" id="grid">
+  <img id="item" src="support/100x100-green.png"></img>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-001.html
new file mode 100644
index 00000000000..7a94b875fdc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 50 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-002.html
new file mode 100644
index 00000000000..9c178484476
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-002.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+}
+#item1 {
+  height: 20px;
+  background: blue;
+}
+#item2 {
+  height: 50px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  height: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 10 },
+        item2: {"data-offset-y": 25 },
+        item3: {"data-offset-y": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-y": 30 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 20 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-x="50"></div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-003.html
new file mode 100644
index 00000000000..ecae758454d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-003.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the justify-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  margin: 0 10px;
+  background: green;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 70 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 70 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-004.html
new file mode 100644
index 00000000000..b76541c3b4d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-004.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+}
+#container > div { writing-mode: vertical-rl; }
+#item1 {
+  width: 20px;
+  background: blue;
+}
+#item2 {
+  width: 50px;
+  margin: 0 10px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  width: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 70 },
+        item2: {"data-offset-x": 25 },
+        item3: {"data-offset-x": 70 }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 40 },
+        item2: {"data-offset-x": 40 },
+        item3: {"data-offset-x": 40 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="runTest()">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0"></div>
+        <div id="item2" data-expected-width="50" data-expected-height="50" data-offset-y="50"></div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100"></div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.html
new file mode 100644
index 00000000000..7bd6878a3e6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+  line-height: 1;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 60 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.html
new file mode 100644
index 00000000000..be42515e863
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#align-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 100px / 50px 50px 50px;
+  background: grey;
+  align-items: baseline;
+  font-family: Ahem;
+  line-height: 1;
+}
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  align-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-y": 8  },
+        item2: {"data-offset-y": 30 },
+        item3: {"data-offset-y": 0  }
+    }
+
+    let after = {
+        item1: {"data-offset-y": 16 },
+        item2: {"data-offset-y": 0  },
+        item3: {"data-offset-y": 8  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.alignSelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="50" data-expected-height="20" data-offset-x="0">É</div>
+        <div id="item2" data-expected-width="50" data-expected-height="40" data-offset-x="50">É</div>
+        <div id="item3" data-expected-width="50" data-expected-height="30" data-offset-x="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-007.html
new file mode 100644
index 00000000000..4fb688c51bb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-007.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the value of Self-Alignment properties</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'align-self' property's value of a grid item from 'baseline' will exclude such item from its baseline context, which implies recomputing all the baseline offsets and aligning the items left in such context.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+  text-orientation: sideways;
+  line-height: 1;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
+    }
+
+    let after = {
+        item1: {"data-offset-x": 2 },
+        item2: {"data-offset-x": 60 },
+        item3: {"data-offset-x": 0  }
+    }
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "end";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-008.html
new file mode 100644
index 00000000000..243c8fb0fc8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-008.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Changing the Self-Alignment properties to interfere in Baseline Alignment</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-align">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#self-alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#justify-self-property">
+<link rel="help" href="https://drafts.csswg.org/css-align/#typedef-baseline-position">
+<meta name="assert" content="Changing the 'justify-self' property's value of a grid item to 'baseline' will include such item into a baseline context, which implies recomputing all the baseline offsets and aligning the items in such context.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+#container {
+  position: relative;
+  display: inline-grid;
+  grid: 50px 50px 50px / 100px;
+  background: grey;
+  justify-items: baseline;
+  font-family: Ahem;
+  text-orientation: sideways;
+  line-height: 1;
+}
+#container > div { writing-mode: vertical-lr; }
+#item1 {
+  font-size: 20px;
+  background: blue;
+}
+#item2 {
+  font-size: 40px;
+  background: green;
+  justify-self: center;
+}
+#item3 {
+  font-size: 30px;
+  background: red;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script src="support/style-change.js"></script>
+<script>
+setup({ explicit_done: true });
+function runTest() {
+    let before = {
+        item1: {"data-offset-x": 2  },
+        item2: {"data-offset-x": 30 },
+        item3: {"data-offset-x": 0  }
+    };
+
+    let after = {
+        item1: {"data-offset-x": 4 },
+        item2: {"data-offset-x": 0 },
+        item3: {"data-offset-x": 2 }
+    };
+
+    evaluateStyleChangeMultiple("before", before);
+    item2.style.justifySelf = "baseline";
+    evaluateStyleChangeMultiple("after", after);
+    done();
+}
+</script>
+<body onload="document.fonts.ready.then(() => { runTest(); })">
+    <div id="container">
+        <div id="item1" data-expected-width="20" data-expected-height="50" data-offset-y="0">É</div>
+        <div id="item2" data-expected-width="40" data-expected-height="50" data-offset-y="50">É</div>
+        <div id="item3" data-expected-width="30" data-expected-height="50" data-offset-y="100">É</div>
+    </div>
+    <div id="log"></div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
new file mode 100644
index 00000000000..62d76d22353
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-001.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
new file mode 100644
index 00000000000..7991a107b56
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-002.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    item1.style.height = "100px";
+
+    item1.setAttribute("data-offset-y", "50");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
new file mode 100644
index 00000000000..7a1ae1dda9d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-003.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized columns</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid items's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 300px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    item1.style.height = "100px";
+
+    item1.setAttribute("data-offset-y", "50");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
new file mode 100644
index 00000000000..036d855d558
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-004.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-columns: 300px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: min-content;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
new file mode 100644
index 00000000000..5ab3d476616
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-005.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      font: 20px/1 Ahem;
+      color: green;
+  }
+  #item2 {
+      font: 10px/1 Ahem;
+      color: blue;
+  }
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "90");
+    item2.setAttribute("data-offset-y", "345");
+    checkLayout('#grid', false);
+
+    item2.style.fontSize = "40px";
+
+    item1.setAttribute("data-offset-y", "90");
+    item2.setAttribute("data-offset-y", "330");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
new file mode 100644
index 00000000000..e1fb6137e68
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-006.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid item's height changes.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      font: 10px/1 Ahem;
+      grid-template-columns: 100px;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 300px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      color: green;
+  }
+  #item2 {
+      color: blue;
+  }
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1">XXXXX</div>
+    <div id="item2">XXXXX</div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "95");
+    item2.setAttribute("data-offset-y", "345");
+    checkLayout('#grid', false);
+
+    grid.style.fontSize = "40px";
+
+    item1.setAttribute("data-offset-y", "80");
+    item2.setAttribute("data-offset-y", "330");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
new file mode 100644
index 00000000000..831ab49944d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-block-axis-alignment-auto-margins-007.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Aligning grid items using 'auto' margins and relative sized rows</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" title="10.2 Aligning with auto margins" href="https://drafts.csswg.org/css-grid/#auto-margins">
+<meta name="assert" content="The 'top' and 'bottom' margins must be recomputed whenever the grid's height changes.">
+<style>
+  #grid {
+      display: grid;
+      position: relative;
+      background: grey;
+      grid-template-rows: 40% 60%;
+      height: 500px;
+      width: 200px;
+  }
+  #grid div {
+    margin: auto 0px auto 0px;
+  }
+  #item1 {
+      background: green;
+      width: 25px;
+      height: 50px;
+  }
+  #item2 {
+      background: blue;
+      width: 25px;
+      height: 100px;
+  }
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<div id="grid">
+    <div id="item1"></div>
+    <div id="item2"></div>
+</div>
+<script>
+setup({ explicit_done: true });
+document.fonts.ready.then(() => {
+    item1.setAttribute("data-offset-y", "75");
+    item2.setAttribute("data-offset-y", "300");
+    checkLayout('#grid', false);
+
+    grid.style.height = "300px";
+
+    item1.setAttribute("data-offset-y", "35");
+    item2.setAttribute("data-offset-y", "160");
+    checkLayout('#grid', true);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
new file mode 100644
index 00000000000..c92abf7a212
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with its alignment container's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
new file mode 100644
index 00000000000..1e94114a5a6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-002.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with its alignment container's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
new file mode 100644
index 00000000000..7176d9ac7f0
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-003.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'left' value for align-self are flushed with its alignment container's 'left' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: left;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: left;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: left;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: left;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
new file mode 100644
index 00000000000..ea11544b9f6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-004.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'right' value for align-self are flushed with its alignment container's 'right' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: right;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: right;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: right;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
new file mode 100644
index 00000000000..4ef784aae0e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-005.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="70"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="60"  data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="70"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="60"  data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="195" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="180" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="70"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="170" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="30"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
new file mode 100644
index 00000000000..40a1d328c1b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-006.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-start' value of align-self behaves like 'start' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: flex-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: flex-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: flex-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: flex-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
new file mode 100644
index 00000000000..d8ed529f166
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-007.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-end">
+<meta name="assert" content="The 'flex-end' value of align-self behaves like 'end' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: flex-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: flex-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: flex-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: flex-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
new file mode 100644
index 00000000000..ed981116f8f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-008.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br></br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
new file mode 100644
index 00000000000..7e3da68fe5e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-009.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
new file mode 100644
index 00000000000..219a542fbfc
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-010.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="210" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
new file mode 100644
index 00000000000..219783dffb8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-011.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="240" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="140" data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="120" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="240" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="210" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
new file mode 100644
index 00000000000..98654457429
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-012.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="100" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="250" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
new file mode 100644
index 00000000000..4f54a93376f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-013.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="220" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="410" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
new file mode 100644
index 00000000000..53f999d1103
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-014.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for align-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: center;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="45"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="45"  data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="160" data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="345" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="205" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="45"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="160" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="345" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="395" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="260" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="95"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="205" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
new file mode 100644
index 00000000000..d28f4b5004d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-015.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: self-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="250" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="100" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="250" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
new file mode 100644
index 00000000000..8da92e34893
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-016.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for align-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+  align-content: center;
+}
+.grid.LTR, .grid.RTL { height: 450px; }
+.grid.verticalLR, .grid.verticalRL { width: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: auto / 1;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / auto;
+  grid-column: 1 / 2;
+  align-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: auto / auto;
+  grid-column: 2 / 3;
+  align-self: self-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="220" data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="440" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="410" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="190" data-offset-y="90"  data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="80"  data-offset-y="220" data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="440" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="410" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalRL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="250" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalRL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalRL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="440" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="320" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="verticalLR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="verticalLR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="410" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="verticalLR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
new file mode 100644
index 00000000000..eabd77518d8
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-column-axis-alignment-positioned-items-017.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along column axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#column-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  justify-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  align-self: baseline;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  align-self: baseline;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  align-self: baseline;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  align-self: baseline;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
new file mode 100644
index 00000000000..787bc69b611
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-001.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with its alignment container's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
new file mode 100644
index 00000000000..d41d57f1d6e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-002.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with its alignment container's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
new file mode 100644
index 00000000000..ca30f656cab
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-003.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'left' value for justify-self are flushed with its alignment container's 'left' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: left;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: left;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: left;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: left;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
new file mode 100644
index 00000000000..3bc82720061
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-004.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#positional-values">
+<meta name="assert" content="Absolute positioned grid items with 'right' value for justify-self are flushed with its alignment container's 'right' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: right;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: right;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: right;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: right;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
new file mode 100644
index 00000000000..78cdd506260
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-005.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: center;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="20"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="145" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="320" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="320" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="140" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="145" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
new file mode 100644
index 00000000000..d5b820c477f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-006.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-start' value of justify-self behaves like 'start' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: flex-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: flex-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: flex-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: flex-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
new file mode 100644
index 00000000000..1cd639a04ed
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-007.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-flex-start">
+<meta name="assert" content="The 'flex-end' value of justify-self behaves like 'end' for absolute positioned grid items.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: flex-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: flex-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: flex-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: flex-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
new file mode 100644
index 00000000000..e2573ca1037
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-008.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
new file mode 100644
index 00000000000..5d37ef5801f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-009.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
new file mode 100644
index 00000000000..bc5f388192e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-010.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="40"  data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="190" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="300" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="300" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="180" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="190" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
new file mode 100644
index 00000000000..96a79f2945a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-011.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: self-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
new file mode 100644
index 00000000000..9f2cddee31a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-012.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items with 'start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
new file mode 100644
index 00000000000..c85d85b7875
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-013.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">
+<meta name="assert" content="Absolute positioned grid items with 'end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'end' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="390" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="140" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
new file mode 100644
index 00000000000..27062d9041a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-014.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center">
+<meta name="assert" content="Absolute positioned grid items with 'center' value for justify-self are 'centered' within its alignment container.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: center;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: center;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: center;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: center;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="20"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="120" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="370" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="195" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="270" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+o
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="20"  data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="290" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="195" data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="120" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
new file mode 100644
index 00000000000..83d2138fcf1
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-015.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-start">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-start' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: self-start;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: self-start;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: self-start;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-start;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="40"  data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="380" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="140" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="350" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="250" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="40"  data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="380" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="390" data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="140" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
new file mode 100644
index 00000000000..ee5143e3918
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-016.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'auto' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#augmented-grid">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-self-end">
+<meta name="assert" content="Absolute positioned grid items with opposite direction and 'self-end' value for justify-self are flushed with the edge of the alignment container corresponding to the alignment subject's 'start' edge.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+  justify-content: center;
+}
+.grid.LTR, .grid.RTL { width: 450px; }
+.grid.verticalLR, .grid.verticalRL { height: 450px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.LTR { direction: ltr; }
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: auto / 1;
+  justify-self: self-end;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / auto;
+  justify-self: self-end;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: auto / auto;
+  justify-self: self-end;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: self-end;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid LTR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="200" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="390" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="LTR firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="180" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="LTR firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="390" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="LTR secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="290" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="LTR secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="200" data-expected-width="30" data-expected-height="70" class="RTL firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="RTL secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="RTL secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
new file mode 100644
index 00000000000..3545d3a8f82
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-row-axis-alignment-positioned-items-017.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment along row axis of absolute positioned items with 'definite' grid positions</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#row-align">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#abspos-items">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">
+<meta name="assert" content="Absolute positioned grid items don't participate in Baseline Alignment, so the value 'baseline' behaves like 'start'.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+  align-items: start;
+}
+.grid.RTL { width: 400px; }
+.grid > div { position: absolute; }
+.grid > :nth-child(1) { background: green; }
+.grid > :nth-child(2) { background: blue; }
+.grid > :nth-child(3) { background: yellow; }
+.grid > :nth-child(4) { background: red; }
+
+.RTL { direction: rtl; }
+.verticalLR { writing-mode: vertical-lr; }
+.verticalRL { writing-mode: vertical-rl; }
+
+.firstRowFirstColumn {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+  justify-self: baseline;
+}
+.firstRowSecondColumn {
+  grid-row: 1 / 2;
+  grid-column: 2 / 3;
+  justify-self: baseline;
+}
+.secondRowFirstColumn {
+  grid-row: 2 / 3;
+  grid-column: 1 / 2;
+  justify-self: baseline;
+}
+.secondRowSecondColumn {
+  grid-row: 2 / 3;
+  grid-column: 2 / 3;
+  justify-self: baseline;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid RTL">
+  <div data-offset-x="340" data-offset-y="0"   data-expected-width="60" data-expected-height="10" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="230" data-offset-y="0"   data-expected-width="70" data-expected-height="30" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="340" data-offset-y="150" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="240" data-offset-y="150" data-expected-width="60" data-expected-height="40" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<br><br>
+
+<div class="grid verticalLR">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="0"   data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="150" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="150" data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+
+<div class="grid verticalRL">
+  <div data-offset-x="240" data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="220" data-offset-y="100" data-expected-width="30" data-expected-height="70" class="firstRowSecondColumn">XX X<br>X XXX X<br>XX XXX</div>
+  <div data-offset-x="90"  data-offset-y="0"   data-expected-width="10" data-expected-height="60" class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="60"  data-offset-y="100" data-expected-width="40" data-expected-height="60" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
+</body>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-001.html
new file mode 100644
index 00000000000..aa354dcd9db
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-001.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-002.html
new file mode 100644
index 00000000000..d6a3c88a46b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-002.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-003.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-003.html
new file mode 100644
index 00000000000..663cec38b70
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-003.html
@@ -0,0 +1,67 @@
+ <!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-004.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-004.html
new file mode 100644
index 00000000000..f1eb2528de0
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-004.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="10"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="60"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="60"  data-expected-height="10"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-005.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-005.html
new file mode 100644
index 00000000000..282cc532732
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-005.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-006.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-006.html
new file mode 100644
index 00000000000..b5b62ac78ad
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-006.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="90"  data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="130" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="130" data-expected-height="90"  class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-007.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-007.html
new file mode 100644
index 00000000000..4440f558400
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-007.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-008.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-008.html
new file mode 100644
index 00000000000..a07068b88d4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-008.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 100px 150px;
+  grid-template-rows: 150px 100px;
+  font: 10px/1 Ahem;
+  background: grey;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="100" data-expected-height="60"  class="firstRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="0"   data-expected-width="40"  data-expected-height="150" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+  <div data-offset-x="0"   data-offset-y="150" data-expected-width="10"  data-expected-height="60"  class="secondRowFirstColumn">X XX X</div>
+  <div data-offset-x="100" data-offset-y="150" data-expected-width="150" data-expected-height="100" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-009.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-009.html
new file mode 100644
index 00000000000..634900810d7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-009.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="80"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-010.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-010.html
new file mode 100644
index 00000000000..40f2b3ae7b9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-010.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-011.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-011.html
new file mode 100644
index 00000000000..5c4e42b768f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-011.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-012.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-012.html
new file mode 100644
index 00000000000..3dc97106aae
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-012.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="20"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="80"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="80"  data-expected-height="20"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-013.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-013.html
new file mode 100644
index 00000000000..18ce17a31a9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-013.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="Orthogonal grid items with 'stretch' value for align-self and/or justify-self are stretched along the column and/or row axis respectively; they will be sized as fit-content otherwise.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="125" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="0"   data-expected-width="20"  data-expected-height="125" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="125" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="125" data-offset-y="125" data-expected-width="125" data-expected-height="125" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-014.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-014.html
new file mode 100644
index 00000000000..31cb09d62ad
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-014.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis respect their defined margin-box's boundaries.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  margin-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  margin-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="110" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="110" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="110" data-expected-height="110" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-015.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-015.html
new file mode 100644
index 00000000000..6bc23392940
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-015.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.grid > div { border-style: solid; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  border-width: 0px 10px 0px 0px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  border-width: 0px 0px 20px 0px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+  border-width: 0px 0px 0px 0px;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  border-width: 0px 20px 10px 0px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-016.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-016.html
new file mode 100644
index 00000000000..8ef59a1ec12
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/grid-self-alignment-stretch-016.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</title>
+<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-grid-1/#alignment">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
+<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
+<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
+<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined padding-box.">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
+<style>
+.grid {
+  position: relative;
+  display: inline-grid;
+  font: 20px/1 Ahem;
+  background: grey;
+  width: 250px;
+  height: 250px;
+}
+.grid > div { writing-mode: vertical-lr; }
+.firstRowFirstColumn {
+  grid-row: 1;
+  grid-column: 1;
+  background: green;
+  justify-self: stretch;
+  align-self: start;
+  padding-right: 10px;
+}
+.firstRowSecondColumn {
+  grid-row: 1;
+  grid-column: 2;
+  background: blue;
+  justify-self: start;
+  align-self: stretch;
+  padding-bottom: 20px;
+}
+.secondRowFirstColumn {
+  grid-row: 2;
+  grid-column: 1;
+  background: yellow;
+  justify-self: start;
+  align-self: start;
+}
+.secondRowSecondColumn {
+  grid-row: 2;
+  grid-column: 2;
+  background: red;
+  justify-self: stretch;
+  align-self: stretch;
+  padding-right: 20px;
+  padding-bottom: 10px;
+}
+</style>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<script src="../../../resources/check-layout-th.js"></script>
+<script type="text/javascript">
+  setup({ explicit_done: true });
+</script>
+<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
+<div class="grid">
+  <div data-offset-x="0"   data-offset-y="0"   data-expected-width="120" data-expected-height="80"  class="firstRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="0"   data-expected-width="20"  data-expected-height="130" class="firstRowSecondColumn">XX X</div>
+  <div data-offset-x="0"   data-offset-y="130" data-expected-width="20"  data-expected-height="80"  class="secondRowFirstColumn">XX X</div>
+  <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-expected-height="120" class="secondRowSecondColumn">XX X</div>
+</div>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/support/style-change.js b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/support/style-change.js
new file mode 100644
index 00000000000..766d140d2b2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/alignment/support/style-change.js
@@ -0,0 +1,14 @@
+function evaluateStyleChange(element, phase, expectedProperty, expectedResult) {
+    element.className += " " + phase;
+    element.setAttribute(expectedProperty, expectedResult);
+    checkLayout("." + phase, false);
+}
+function evaluateStyleChangeMultiple(phase, expectedResult) {
+    for (var item in expectedResult) {
+        var element = document.getElementById(item);
+        element.className += " " + phase;
+        for (var key in expectedResult[item])
+            element.setAttribute(key, expectedResult[item][key]);
+    }
+    checkLayout("." + phase, false);
+}