From 8f21513902b3d9e596a7ea2da15ea9cabaf96046 Mon Sep 17 00:00:00 2001
From: Sam Atkins <sam@ladybird.org>
Date: Wed, 6 Nov 2024 12:44:38 +0000
Subject: [PATCH] Tests: Re-import tests that used ahem.css

This causes 36 new subtests to pass locally. :^)

Unfortunately at least one of these is flaky when it's able to load the
font file, apparently because we don't wait for the font and its
stylesheet to actually load before the tests run.
---
 Tests/LibWeb/TestConfig.ini                   |   3 +
 .../grid-columns-rows-get-set-multiple.txt    |  34 +-
 .../grid-content-sized-columns-resolution.txt |  45 +--
 .../flex-item-compressible-001.html           |   2 +-
 .../flex-item-compressible-002.html           |   2 +-
 .../flex-one-sets-flex-basis-to-zero-px.html  |   2 +-
 .../css-flexbox/hittest-anonymous-box.html    |   2 +-
 .../css-flexbox/hittest-before-pseudo.html    |   2 +-
 .../intrinsic-size/row-use-cases-001.html     |   2 +-
 .../text-as-flexitem-size-001.html            |   2 +-
 .../grid-columns-rows-get-set-multiple.html   |   8 +-
 ...grid-content-sized-columns-resolution.html |   6 +-
 .../wpt-import/css/support/alignment.css      | 367 ++++++++++++++++++
 .../input/wpt-import/css/support/grid.css     | 289 ++++++++++++++
 .../css/support/width-keyword-classes.css     |  43 ++
 15 files changed, 756 insertions(+), 53 deletions(-)
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/support/alignment.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/support/grid.css
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/support/width-keyword-classes.css

diff --git a/Tests/LibWeb/TestConfig.ini b/Tests/LibWeb/TestConfig.ini
index 897752efb5a..405eb45eb59 100644
--- a/Tests/LibWeb/TestConfig.ini
+++ b/Tests/LibWeb/TestConfig.ini
@@ -52,3 +52,6 @@ Text/input/wpt-import/html/infrastructure/safe-passing-of-structured-data/struct
 Text/input/wpt-import/html/infrastructure/safe-passing-of-structured-data/resources/echo-iframe.html
 Text/input/wpt-import/html/infrastructure/safe-passing-of-structured-data/resources/iframe-resizable-arraybuffer-helper.html
 Text/input/wpt-import/html/infrastructure/safe-passing-of-structured-data/resources/post-parent-type-error.html
+
+; Flaky, apparently due to font loading
+Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt
index 9e447517713..eb465198983 100644
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt
@@ -6,27 +6,27 @@ Rerun
 
 Found 40 tests
 
-8 Pass
-32 Fail
+23 Pass
+17 Fail
 Details
 Result	Test Name	MessagePass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFixedElement' : grid-template-columns = '7px 11px', grid-template-rows = '17px 2px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentElement' : grid-template-columns = '400px 800px', grid-template-rows = '150px 450px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentElement' : grid-template-columns = '400px 800px', grid-template-rows = '150px 450px'	
 Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentWithoutSize' : grid-template-columns = '3.5px 7px', grid-template-rows = '4px 12px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoElement' : grid-template-columns = '0px 17px', grid-template-rows = '0px 3px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithEMElement' : grid-template-columns = '100px 120px', grid-template-rows = '150px 170px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithThreeItems' : grid-template-columns = '15px 0px 100px', grid-template-rows = '120px 18px 0px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoElement' : grid-template-columns = '0px 17px', grid-template-rows = '0px 3px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithEMElement' : grid-template-columns = '100px 120px', grid-template-rows = '150px 170px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithThreeItems' : grid-template-columns = '15px 0px 100px', grid-template-rows = '120px 18px 0px'	
 Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFitContentAndFitAvailable' : grid-template-columns = 'none', grid-template-rows = 'none'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContent' : grid-template-columns = '0px 0px', grid-template-rows = '0px 0px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContentWithChildrenElement' : grid-template-columns = '7px 17px', grid-template-rows = '16px 3px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndFixed' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndMinMaxContent' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionFraction' : grid-template-columns = '320px 480px', grid-template-rows = '225px 375px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionMinMax' : grid-template-columns = '45px 755px', grid-template-rows = '586px 14px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcCalc' : grid-template-columns = '200px 100px', grid-template-rows = '150px 75px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndFixed' : grid-template-columns = '400px 80px', grid-template-rows = '88px 150px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndMinMax' : grid-template-columns = '190px 80px', grid-template-rows = '150px 53px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcInsideMinMax' : grid-template-columns = '400px 120px', grid-template-rows = '150px 175px'	
-Fail	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoInsideMinMax' : grid-template-columns = '0px 30px', grid-template-rows = '132px 60px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContent' : grid-template-columns = '0px 0px', grid-template-rows = '0px 0px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxContentWithChildrenElement' : grid-template-columns = '7px 17px', grid-template-rows = '16px 3px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndFixed' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithMinMaxAndMinMaxContent' : grid-template-columns = '240px 15px', grid-template-rows = '120px 210px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionFraction' : grid-template-columns = '320px 480px', grid-template-rows = '225px 375px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFractionMinMax' : grid-template-columns = '45px 755px', grid-template-rows = '586px 14px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcCalc' : grid-template-columns = '200px 100px', grid-template-rows = '150px 75px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndFixed' : grid-template-columns = '400px 80px', grid-template-rows = '88px 150px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcAndMinMax' : grid-template-columns = '190px 80px', grid-template-rows = '150px 53px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithCalcInsideMinMax' : grid-template-columns = '400px 120px', grid-template-rows = '150px 175px'	
+Pass	Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithAutoInsideMinMax' : grid-template-columns = '0px 30px', grid-template-rows = '132px 60px'	
 Pass	Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '18px 22px', element.style.gridTemplateColumns = '18px 22px', grid-template-rows = '66px 70px', element.style.gridTemplateRows = '66px 70px'	
 Pass	Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '440px 640px', element.style.gridTemplateColumns = '55% 80%', grid-template-rows = '240px 378px', element.style.gridTemplateRows = '40% 63%'	
 Pass	Test getting and setting grid-template-rows and grid-template-columns through JS: grid-template-columns = '0px 0px', element.style.gridTemplateColumns = 'auto auto', grid-template-rows = '0px 0px', element.style.gridTemplateRows = 'auto auto'	
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.txt
index 4dcd1464965..139cfa534a9 100644
--- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.txt
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.txt
@@ -6,47 +6,48 @@ Rerun
 
 Found 42 tests
 
-42 Fail
+21 Pass
+21 Fail
 Details
-Result	Test Name	MessageFail	Element 'gridMinContentFixedAndAuto' grid-template-columns value computes to '15px 75px'	
-Fail	Element 'gridAutoAndAuto' grid-template-columns value computes to '45px 45px'	
+Result	Test Name	MessagePass	Element 'gridMinContentFixedAndAuto' grid-template-columns value computes to '15px 75px'	
+Pass	Element 'gridAutoAndAuto' grid-template-columns value computes to '45px 45px'	
 Fail	Element 'gridMinContentAndMinContentFixed' grid-template-columns value computes to '20px 30px'	
-Fail	Element 'gridMaxContentAndMinContent' grid-template-columns value computes to '70px 20px'	
-Fail	Element 'gridFixedMinContentAndMaxContent' grid-template-columns value computes to '10px 80px'	
-Fail	Element 'gridFixedMaxContentAndMinContent' grid-template-columns value computes to '60px 30px'	
+Pass	Element 'gridMaxContentAndMinContent' grid-template-columns value computes to '70px 20px'	
+Pass	Element 'gridFixedMinContentAndMaxContent' grid-template-columns value computes to '10px 80px'	
+Pass	Element 'gridFixedMaxContentAndMinContent' grid-template-columns value computes to '60px 30px'	
 Fail	Element 'gridMinContentAndMaxContentFixed' grid-template-columns value computes to '20px 70px'	
 Fail	Element 'gridMaxContentFixedAndAuto' grid-template-columns value computes to '65px 25px'	
-Fail	Element 'gridAutoMinContent' grid-template-columns value computes to '70px 20px'	
+Pass	Element 'gridAutoMinContent' grid-template-columns value computes to '70px 20px'	
 Fail	Element 'gridAutoMaxContent' grid-template-columns value computes to '20px 70px'	
 Fail	Element 'gridMaxContentAndMinContentFixed' grid-template-columns value computes to '70px 20px'	
 Fail	Element 'gridMaxContentAndMaxContentFixed' grid-template-columns value computes to '55px 35px'	
-Fail	Element 'gridMinContentFixedAndAutoUnsortedConstrained' grid-template-columns value computes to '0px 40px'	
-Fail	Element 'gridAutoAndAutoUnsortedConstrained' grid-template-columns value computes to '10px 30px'	
-Fail	Element 'gridMinContentAndMinContentFixedUnsortedConstrained' grid-template-columns value computes to '0px 40px'	
-Fail	Element 'gridMaxContentAndMinContentUnsortedConstrained' grid-template-columns value computes to '0px 70px'	
+Pass	Element 'gridMinContentFixedAndAutoUnsortedConstrained' grid-template-columns value computes to '0px 40px'	
+Pass	Element 'gridAutoAndAutoUnsortedConstrained' grid-template-columns value computes to '10px 30px'	
+Pass	Element 'gridMinContentAndMinContentFixedUnsortedConstrained' grid-template-columns value computes to '0px 40px'	
+Pass	Element 'gridMaxContentAndMinContentUnsortedConstrained' grid-template-columns value computes to '0px 70px'	
 Fail	Element 'gridFixedMinContentAndMaxContentUnsortedConstrained' grid-template-columns value computes to '10px 70px'	
-Fail	Element 'gridFixedMaxContentAndMinContentUnsortedConstrained' grid-template-columns value computes to '10px 40px'	
+Pass	Element 'gridFixedMaxContentAndMinContentUnsortedConstrained' grid-template-columns value computes to '10px 40px'	
 Fail	Element 'gridMinContentAndMaxContentFixedUnsortedConstrained' grid-template-columns value computes to '0px 90px'	
 Fail	Element 'gridMaxContentFixedAndAutoUnsortedConstrained' grid-template-columns value computes to '10px 40px'	
-Fail	Element 'gridAutoMinContentUnsortedConstrained' grid-template-columns value computes to '0px 60px'	
+Pass	Element 'gridAutoMinContentUnsortedConstrained' grid-template-columns value computes to '0px 60px'	
 Fail	Element 'gridAutoMaxContentUnsortedConstrained' grid-template-columns value computes to '0px 90px'	
 Fail	Element 'gridMaxContentAndMinContentFixedUnsortedConstrained' grid-template-columns value computes to '50px 40px'	
 Fail	Element 'gridMaxContentAndMaxContentFixedUnsortedConstrained' grid-template-columns value computes to '40px 70px'	
-Fail	Element 'gridMinContentFixedAndAutoUnsorted' grid-template-columns value computes to '15px 90px'	
+Pass	Element 'gridMinContentFixedAndAutoUnsorted' grid-template-columns value computes to '15px 90px'	
 Fail	Element 'gridAutoAndAutoUnsorted' grid-template-columns value computes to '60px 30px'	
-Fail	Element 'gridMinContentAndMinContentFixedUnsorted' grid-template-columns value computes to '0px 40px'	
-Fail	Element 'gridMaxContentAndMinContentUnsorted' grid-template-columns value computes to '0px 70px'	
+Pass	Element 'gridMinContentAndMinContentFixedUnsorted' grid-template-columns value computes to '0px 40px'	
+Pass	Element 'gridMaxContentAndMinContentUnsorted' grid-template-columns value computes to '0px 70px'	
 Fail	Element 'gridFixedMinContentAndMaxContentUnsorted' grid-template-columns value computes to '10px 70px'	
-Fail	Element 'gridFixedMaxContentAndMinContentUnsorted' grid-template-columns value computes to '50px 40px'	
+Pass	Element 'gridFixedMaxContentAndMinContentUnsorted' grid-template-columns value computes to '50px 40px'	
 Fail	Element 'gridMinContentAndMaxContentFixedUnsorted' grid-template-columns value computes to '0px 90px'	
-Fail	Element 'gridMaxContentFixedAndAutoUnsorted' grid-template-columns value computes to '15px 70px'	
-Fail	Element 'gridAutoMinContentUnsorted' grid-template-columns value computes to '50px 60px'	
+Pass	Element 'gridMaxContentFixedAndAutoUnsorted' grid-template-columns value computes to '15px 70px'	
+Pass	Element 'gridAutoMinContentUnsorted' grid-template-columns value computes to '50px 60px'	
 Fail	Element 'gridAutoMaxContentUnsorted' grid-template-columns value computes to '0px 90px'	
-Fail	Element 'gridMaxContentAndMinContentFixedUnsorted' grid-template-columns value computes to '50px 40px'	
-Fail	Element 'gridMaxContentAndMaxContentFixedUnsorted' grid-template-columns value computes to '40px 70px'	
+Pass	Element 'gridMaxContentAndMinContentFixedUnsorted' grid-template-columns value computes to '50px 40px'	
+Pass	Element 'gridMaxContentAndMaxContentFixedUnsorted' grid-template-columns value computes to '40px 70px'	
 Fail	Element 'gridMinContentFixedAndAutoAboveLimits' grid-template-columns value computes to '15px 95px'	
 Fail	Element 'gridMaxContentFixedAndAutoAboveLimits' grid-template-columns value computes to '15px 135px'	
 Fail	Element 'gridMinContentFixedAndFixedFixedAndAuto' grid-template-columns value computes to '20px 20px 60px'	
 Fail	Element 'gridAutoAndFixedFixedAndMaxContentFixed' grid-template-columns value computes to '110px 20px 20px'	
-Fail	Element 'gridMaxContentAndMaxContentFixedAndMaxContent' grid-template-columns value computes to '70px 20px 50px'	
+Pass	Element 'gridMaxContentAndMaxContentFixedAndMaxContent' grid-template-columns value computes to '70px 20px 50px'	
 Fail	Element 'gridAutoAndMinContentFixedAndMinContent' grid-template-columns value computes to '55px 30px 65px'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html
index dc55f9b7d2b..54f94ec5772 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-001.html
@@ -11,7 +11,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
   <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution">
   <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero">
-  <link rel="stylesheet" href="/fonts/ahem.css">
+  <link rel="stylesheet" href="../../fonts/ahem.css">
   <meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion.">
 
   <script src="../../resources/testharness.js"></script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-002.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-002.html
index c5095305ec6..61ca14b914d 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-002.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-item-compressible-002.html
@@ -11,7 +11,7 @@
   <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
   <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution">
   <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero">
-  <link rel="stylesheet" href="/fonts/ahem.css">
+  <link rel="stylesheet" href="../../fonts/ahem.css">
   <meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion.">
 
   <script src="../../resources/testharness.js"></script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html
index 72dcf830f87..54e71370d70 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/flex-one-sets-flex-basis-to-zero-px.html
@@ -3,7 +3,7 @@
 <title>CSS Flexbox: flex-basis with zero pixel</title>
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-basis-property">
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-main-sizes">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" type="text/css" href="../../fonts/ahem.css" />
 <link href="support/flexbox.css" rel="stylesheet">
 <meta name="assert" content="This test ensures that setting 'flex-basis' property to
 zero pixel or percentage in combination with one value of both 'flex-grow' and 'flex-shrink'
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html
index 324f332414a..8461e903f22 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-anonymous-box.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <link rel="help" href="https://crbug.com/1097654" />
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" type="text/css" href="../../fonts/ahem.css" />
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <style>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html
index 615cc1a8515..0faa670909c 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/hittest-before-pseudo.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <link rel="help" href="https://crbug.com/1081789" />
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" type="text/css" href="../../fonts/ahem.css" />
 <script src="../../resources/testharness.js"></script>
 <script src="../../resources/testharnessreport.js"></script>
 <style>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html
index 1392587944a..7b1bb3757a8 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/intrinsic-size/row-use-cases-001.html
@@ -3,7 +3,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#intrinsic-sizes">
 <script src="../../../resources/testharness.js"></script>
 <script src="../../../resources/testharnessreport.js"></script>
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css" />
 <meta name="assert"
   content="Requested use cases from our issue tracker that were duplicated or included in the bug report for the new algorithm. These are intentionally not very reduced from their original form with liberal pass conditions." />
 
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html
index 20345cae43f..0ed03f782af 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-flexbox/text-as-flexitem-size-001.html
@@ -20,7 +20,7 @@
     <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
     <link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
     <style>
-      @import "/fonts/ahem.css";
+      @import "../../fonts/ahem.css";
       .flexbox {
         display: flex;
         flex-direction: row;
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html
index 80b16363562..c2e7c9e4048 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.html
@@ -2,10 +2,10 @@
 <meta charset="utf-8">
 <link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=73272">
-<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
-<link href="/css/support/grid.css" rel="stylesheet">
-<link href="/css/support/alignment.css" rel="stylesheet">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link href="../../../css/support/width-keyword-classes.css" rel="stylesheet">
+<link href="../../../css/support/grid.css" rel="stylesheet">
+<link href="../../../css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css">
 <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
 <meta name="assert" content="Test that setting and getting multiple grid-template-columns and grid-template-rows works as expected">
 <style>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.html b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.html
index 80dd39ac70e..dcc9c0c785e 100644
--- a/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.html
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-grid/parsing/grid-content-sized-columns-resolution.html
@@ -2,9 +2,9 @@
 <meta charset="utf-8">
 <link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=392200">
-<link href="/css/support/grid.css" rel="stylesheet">
-<link href="/css/support/alignment.css" rel="stylesheet">
-<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
+<link href="../../../css/support/grid.css" rel="stylesheet">
+<link href="../../../css/support/alignment.css" rel="stylesheet">
+<link rel="stylesheet" type="text/css" href="../../../fonts/ahem.css">
 <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing">
 <meta name="assert" content="Checks resolution of content sized grid columns and verifies that items are processed by ascending span to compute column breadths">
 <style>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/support/alignment.css b/Tests/LibWeb/Text/input/wpt-import/css/support/alignment.css
new file mode 100644
index 00000000000..d4c970c52b5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/support/alignment.css
@@ -0,0 +1,367 @@
+/* align-self */
+.alignSelfAuto { align-self: auto; }
+.alignSelfNormal { align-self: normal; }
+.alignSelfStretch { align-self: stretch; }
+.alignSelfStart { align-self: start; }
+.alignSelfEnd { align-self: end; }
+.alignSelfCenter { align-self: center; }
+.alignSelfRight { align-self: right; }
+.alignSelfLeft { align-self: left; }
+
+.alignSelfFlexStart { align-self: flex-start; }
+.alignSelfFlexEnd { align-self: flex-end; }
+
+.alignSelfSelfStart { align-self: self-start; }
+.alignSelfSelfEnd { align-self: self-end; }
+
+.alignSelfSafeCenter { align-self: safe center; }
+.alignSelfUnsafeCenter { align-self: unsafe center; }
+.alignSelfSafeEnd { align-self: safe end; }
+.alignSelfUnsafeEnd { align-self: unsafe end; }
+.alignSelfSafeSelfEnd { align-self: safe self-end; }
+.alignSelfUnsafeSelfEnd { align-self: unsafe self-end; }
+.alignSelfSafeSelfStart { align-self: safe self-start; }
+.alignSelfUnsafeSelfStart { align-self: unsafe self-start; }
+.alignSelfSafeRight { align-self: safe right; }
+.alignSelfUnsafeRight { align-self: unsafe right; }
+.alignSelfSafeLeft { align-self: safe left; }
+.alignSelfUnsafeLeft { align-self: unsafe left; }
+.alignSelfSafeFlexEnd { align-self: safe flex-end; }
+.alignSelfUnsafeFlexEnd { align-self: unsafe flex-end; }
+.alignSelfSafeFlexStart { align-self: safe flex-start; }
+.alignSelfUnsafeFlexStart { align-self: unsafe flex-start; }
+
+.alignSelfBaseline { align-self: baseline; }
+.alignSelfFirstBaseline { align-self: first baseline; }
+.alignSelfLastBaseline { align-self: last baseline; }
+
+/* align-items */
+.alignItemsAuto { align-items: auto; }
+.alignItemsNormal { align-items: normal; }
+.alignItemsStretch { align-items: stretch; }
+.alignItemsStart { align-items: start; }
+.alignItemsCenter { align-items: center; }
+.alignItemsEnd { align-items: end; }
+.alignItemsLeft { align-items: left; }
+.alignItemsRight { align-items: right; }
+
+.alignItemsFlexStart { align-items: flex-start; }
+.alignItemsFlexEnd { align-items: flex-end; }
+
+.alignItemsSelfStart { align-items: self-start; }
+.alignItemsSelfEnd { align-items: self-end; }
+
+.alignItemsSafeCenter { align-items: safe center; }
+.alignItemsUnsafeCenter { align-items: unsafe center; }
+.alignItemsSafeEnd { align-items: safe end; }
+.alignItemsUnsafeEnd { align-items: unsafe end; }
+.alignItemsSafeSelfEnd { align-items: safe self-end; }
+.alignItemsUnsafeSelfEnd { align-items: unsafe self-end; }
+.alignItemsSafeSelfStart { align-items: safe self-start; }
+.alignItemsUnsafeSelfStart { align-items: unsafe self-start; }
+.alignItemsSafeRight { align-items: safe right; }
+.alignItemsUnsafeRight { align-items: unsafe right; }
+.alignItemsSafeLeft { align-items: safe left; }
+.alignItemsUnsafeLeft { align-items: unsafe left; }
+.alignItemsSafeFlexEnd { align-items: safe flex-end; }
+.alignItemsUnsafeFlexEnd { align-items: unsafe flex-end; }
+.alignItemsSafeFlexStart { align-items: safe flex-start; }
+.alignItemsUnsafeFlexStart { align-items: unsafe flex-start; }
+
+.alignItemsBaseline { align-items: baseline; }
+.alignItemsFirstBaseline { align-items: first baseline; }
+.alignItemsLastBaseline { align-items: last baseline; }
+
+/* align-content */
+.alignContentBaseline { align-content: baseline; }
+.alignContentLastBaseline { align-content: last-baseline; }
+.alignContentStart { align-content: start; }
+.alignContentEnd { align-content: end; }
+.alignContentCenter { align-content: center; }
+.alignContentLeft { align-content: left; }
+.alignContentRight { align-content: right; }
+
+.alignContentFlexStart { align-content: flex-start; }
+.alignContentFlexEnd { align-content: flex-end; }
+
+.alignContentSpaceBetween { align-content: space-between; }
+.alignContentSpaceAround { align-content: space-around; }
+.alignContentSpaceEvenly { align-content: space-evenly; }
+.alignContentStretch { align-content: stretch; }
+
+.alignContentSafeCenter { align-content: safe center; }
+.alignContentUnsafeCenter { align-content: unsafe center; }
+.alignContentSafeEnd { align-content: safe end; }
+.alignContentUnsafeEnd { align-content: unsafe end; }
+.alignContentSafeRight { align-content: safe right; }
+.alignContentUnsafeRight { align-content: unsafe right; }
+.alignContentSafeLeft { align-content: safe left; }
+.alignContentUnsafeLeft { align-content: unsafe left; }
+.alignContentSafeFlexEnd { align-content: safe flex-end; }
+.alignContentUnsafeFlexEnd { align-content: unsafe flex-end; }
+.alignContentSafeFlexStart { align-content: safe flex-start; }
+.alignContentUnsafeFlexStart { align-content: unsafe flex-start; }
+
+.alignContentBaseline { align-content: baseline; }
+.alignContentFirstBaseline { align-content: first baseline; }
+.alignContentLastBaseline { align-content: last baseline; }
+
+/* justify-self */
+.justifySelfAuto { justify-self: auto; }
+.justifySelfNormal { justify-self: normal; }
+.justifySelfStretch { justify-self: stretch; }
+.justifySelfStart { justify-self: start; }
+.justifySelfCenter { justify-self: center; }
+.justifySelfEnd { justify-self: end; }
+.justifySelfRight { justify-self: right; }
+.justifySelfLeft { justify-self: left; }
+
+.justifySelfFlexStart { justify-self: flex-start; }
+.justifySelfFlexEnd { justify-self: flex-end; }
+
+.justifySelfSelfStart { justify-self: self-start; }
+.justifySelfSelfEnd { justify-self: self-end; }
+
+.justifySelfSafeCenter { justify-self: safe center; }
+.justifySelfUnsafeCenter { justify-self: unsafe center; }
+.justifySelfSafeEnd { justify-self: safe end; }
+.justifySelfUnsafeEnd { justify-self: unsafe end; }
+.justifySelfSafeSelfEnd { justify-self: safe self-end; }
+.justifySelfUnsafeSelfEnd { justify-self: unsafe self-end; }
+.justifySelfSafeSelfStart { justify-self: safe self-start; }
+.justifySelfUnsafeSelfStart { justify-self: unsafe self-start; }
+.justifySelfSafeRight { justify-self: safe right; }
+.justifySelfUnsafeRight { justify-self: unsafe right; }
+.justifySelfSafeLeft { justify-self: safe left; }
+.justifySelfUnsafeLeft { justify-self: unsafe left; }
+.justifySelfSafeFlexEnd { justify-self: safe flex-end; }
+.justifySelfUnsafeFlexEnd { justify-self: unsafe flex-end; }
+.justifySelfSafeFlexStart { justify-self: safe flex-start; }
+.justifySelfUnsafeFlexStart { justify-self: unsafe flex-start; }
+
+.justifySelfBaseline { justify-self: baseline; }
+.justifySelfFirstBaseline { justify-self: first baseline; }
+.justifySelfLastBaseline { justify-self: last baseline; }
+
+/* justify-items */
+.justifyItemsAuto { justify-items: auto; }
+.justifyItemsNormal { justify-items: normal; }
+.justifyItemsStretch { justify-items: stretch; }
+.justifyItemsStart { justify-items: start; }
+.justifyItemsCenter { justify-items: center; }
+.justifyItemsEnd { justify-items: end; }
+.justifyItemsLeft { justify-items: left; }
+.justifyItemsRight { justify-items: right; }
+
+.justifyItemsFlexStart { justify-items: flex-start; }
+.justifyItemsFlexEnd { justify-items: flex-end; }
+
+.justifyItemsSelfStart { justify-items: self-start; }
+.justifyItemsSelfEnd { justify-items: self-end; }
+
+.justifyItemsLegacy { justify-items: legacy; }
+.justifyItemsLegacyLeft { justify-items: legacy left; }
+.justifyItemsLegacyCenter { justify-items: legacy center; }
+.justifyItemsLegacyRight { justify-items: legacy right; }
+.justifyItemsLeftLegacy { justify-items: left legacy; }
+.justifyItemsCenterLegacy { justify-items: center legacy; }
+.justifyItemsRightLegacy { justify-items: right legacy; }
+
+.justifyItemsSafeCenter { justify-items: safe center; }
+.justifyItemsUnsafeCenter { justify-items: unsafe center; }
+.justifyItemsSafeEnd { justify-items: safe end; }
+.justifyItemsUnsafeEnd { justify-items: unsafe end; }
+.justifyItemsSafeSelfEnd { justify-items: safe self-end; }
+.justifyItemsUnsafeSelfEnd { justify-items: unsafe self-end; }
+.justifyItemsSafeSelfStart { justify-items: safe self-start; }
+.justifyItemsUnsafeSelfStart { justify-items: unsafe self-start; }
+.justifyItemsSafeRight { justify-items: safe right; }
+.justifyItemsUnsafeRight { justify-items: unsafe right; }
+.justifyItemsSafeLeft { justify-items: safe left; }
+.justifyItemsUnsafeLeft { justify-items: unsafe left; }
+.justifyItemsSafeFlexEnd { justify-items: safe flex-end; }
+.justifyItemsUnsafeFlexEnd { justify-items: unsafe flex-end; }
+.justifyItemsSafeFlexStart { justify-items: safe flex-start; }
+.justifyItemsUnsafeFlexStart { justify-items: unsafe flex-start; }
+
+.justifyItemsTest { justify-items: safe end; }
+
+.justifyItemsBaseline { justify-items: baseline; }
+.justifyItemsFirstBaseline { justify-items: first baseline; }
+.justifyItemsLastBaseline { justify-items: last baseline; }
+
+/* justify-content */
+.justifyContentBaseline { justify-content: baseline; }
+.justifyContentLastBaseline { justify-content: last-baseline; }
+.justifyContentStart { justify-content: start; }
+.justifyContentEnd { justify-content: end; }
+.justifyContentCenter { justify-content: center; }
+.justifyContentLeft { justify-content: left; }
+.justifyContentRight { justify-content: right; }
+
+.justifyContentFlexStart { justify-content: flex-start; }
+.justifyContentFlexEnd { justify-content: flex-end; }
+
+.justifyContentSpaceBetween { justify-content: space-between; }
+.justifyContentSpaceAround { justify-content: space-around; }
+.justifyContentSpaceEvenly { justify-content: space-evenly; }
+.justifyContentStretch { justify-content: stretch; }
+
+.justifyContentSafeCenter { justify-content: safe center; }
+.justifyContentUnsafeCenter { justify-content: unsafe center; }
+.justifyContentSafeEnd { justify-content: safe end; }
+.justifyContentUnsafeEnd { justify-content: unsafe end; }
+.justifyContentSafeRight { justify-content: safe right; }
+.justifyContentUnsafeRight { justify-content: unsafe right; }
+.justifyContentSafeLeft { justify-content: safe left; }
+.justifyContentUnsafeLeft { justify-content: unsafe left; }
+.justifyContentSafeFlexEnd { justify-content: safe flex-end; }
+.justifyContentUnsafeFlexEnd { justify-content: unsafe flex-end; }
+.justifyContentSafeFlexStart { justify-content: safe flex-start; }
+.justifyContentUnsafeFlexStart { justify-content: unsafe flex-start; }
+
+.justifyContentBaseline { justify-content: baseline; }
+.justifyContentFirstBaseline { justify-content: first baseline; }
+.justifyContentLastBaseline { justify-content: last baseline; }
+
+/* Both align-items and justify-items */
+.itemsNormal {
+    align-items: normal;
+    justify-items: normal;
+}
+
+.itemsStretch {
+    align-items: stretch;
+    justify-items: stretch;
+}
+
+.itemsStart {
+    align-items: start;
+    justify-items: start;
+}
+
+.itemsCenter {
+    align-items: center;
+    justify-items: center;
+}
+
+.itemsEnd {
+    align-items: end;
+    justify-items: end;
+}
+
+.itemsLeft {
+    align-items: left;
+    justify-items: left;
+}
+
+.itemsRight {
+    align-items: right;
+    justify-items: right;
+}
+
+.itemsSelfStart {
+    align-items: self-start;
+    justify-items: self-start;
+}
+
+.itemsSelfEnd {
+    align-items: self-end;
+    justify-items: self-end;
+}
+.itemsBaseline {
+    align-items: baseline;
+    justify-items: baseline;
+}
+
+/* Both align-self and justify-self */
+.selfStretch {
+    align-self: stretch;
+    justify-self: stretch;
+}
+.selfStart {
+    align-self: start;
+    justify-self: start;
+}
+.selfEnd {
+    align-self: end;
+    justify-self: end;
+}
+.selfCenter {
+    align-self: center;
+    justify-self: center;
+}
+.selfRight {
+    align-self: right;
+    justify-self: right;
+}
+.selfLeft {
+    align-self: left;
+    justify-self: left;
+}
+.selfSelfStart {
+    align-self: self-start;
+    justify-self: self-start;
+}
+.selfSelfEnd {
+    align-self: self-end;
+    justify-self: self-end;
+}
+.selfBaseline {
+    align-self: baseline;
+    justify-self: baseline;
+}
+
+/* Both align-content and justify-content */
+.contentStart {
+    align-content: start;
+    justify-content: start;
+}
+.contentCenter {
+    align-content: center;
+    justify-content: center;
+}
+.contentEnd {
+    align-content: end;
+    justify-content: end;
+}
+
+.contentCenterSafe {
+    align-content: safe center;
+    justify-content: safe center;
+}
+
+.contentCenterUnsafe {
+    align-content: unsafe center;
+    justify-content: unsafe center;
+}
+
+.contentEndSafe {
+    align-content: safe end;
+    justify-content: safe end;
+}
+
+.contentEndUnsafe {
+    align-content: unsafe end;
+    justify-content: unsafe end;
+}
+
+.contentSpaceBetween {
+    justify-content: space-between;
+    align-content: space-between;
+}
+
+.contentSpaceAround {
+    justify-content: space-around;
+    align-content: space-around;
+}
+
+.contentSpaceEvenly {
+    justify-content: space-evenly;
+    align-content: space-evenly;
+}
+
+.contentStretch {
+    justify-content: stretch;
+    align-content: stretch;
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/support/grid.css b/Tests/LibWeb/Text/input/wpt-import/css/support/grid.css
new file mode 100644
index 00000000000..4007ebba436
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/support/grid.css
@@ -0,0 +1,289 @@
+.grid {
+  display: grid;
+  background-color: grey;
+}
+
+.inline-grid {
+  display: inline-grid;
+  background-color: grey;
+}
+
+.firstRowFirstColumn {
+  background-color: blue;
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlyFirstColumn {
+  background-color: blue;
+  grid-column: 1 / 2;
+  grid-row: 1 / 2;
+}
+
+.firstRowSecondColumn {
+  background-color: lime;
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.onlyFirstRowOnlySecondColumn {
+  background-color: lime;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+
+.firstRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: 1;
+}
+
+.firstRowFourthColumn {
+  background-color: green;
+  grid-column: 4;
+  grid-row: 1;
+}
+
+.secondRowFirstColumn {
+  background-color: purple;
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlyFirstColumn {
+  background-color: purple;
+  grid-column: 1 / 2;
+  grid-row: 2 / 3;
+}
+
+.secondRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.onlySecondRowOnlySecondColumn {
+  background-color: orange;
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+.endSecondRowEndSecondColumn {
+  background-color: orange;
+  grid-column-end: 3;
+  grid-row-end: 3;
+}
+
+.secondRowThirdColumn {
+  background-color: navy;
+  grid-column: 3;
+  grid-row: 2;
+}
+
+.secondRowFourthColumn {
+  background-color: pink;
+  grid-column: 4;
+  grid-row: 2;
+}
+
+.thirdRowFirstColumn {
+  background-color: green;
+  grid-column: 1;
+  grid-row: 3;
+}
+
+.thirdRowSecondColumn {
+  background-color: red;
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.thirdRowThirdColumn {
+  background-color: salmon;
+  grid-column: 3;
+  grid-row: 3;
+}
+
+.firstAutoRowSecondAutoColumn {
+  grid-row: 1 / auto;
+  grid-column: 2 / auto;
+}
+
+.autoLastRowAutoLastColumn {
+  grid-row: auto / -1;
+  grid-column: auto / -1;
+}
+
+.autoSecondRowAutoFirstColumn {
+  grid-row: auto / 2;
+  grid-column: auto / 1;
+}
+
+.firstRowBothColumn {
+  grid-row: 1;
+  grid-column: 1 / -1;
+}
+
+.secondRowBothColumn {
+  grid-row: 2;
+  grid-column: 1 / -1;
+}
+
+.bothRowFirstColumn {
+  grid-row: 1 / -1;
+  grid-column: 1;
+}
+
+.bothRowSecondColumn {
+  grid-row: 1 / -1;
+  grid-column: 2;
+}
+
+.bothRowBothColumn {
+  grid-row: 1 / -1;
+  grid-column: 1 / -1;
+}
+
+/* Auto column / row. */
+.autoRowAutoColumn {
+  background-color: pink;
+  grid-column: auto;
+  grid-row: auto;
+}
+
+.firstRowAutoColumn {
+  background-color: blue;
+  grid-column: auto;
+  grid-row: 1;
+}
+
+.secondRowAutoColumn {
+  background-color: purple;
+  grid-column: auto;
+  grid-row: 2;
+}
+
+.thirdRowAutoColumn {
+  background-color: navy;
+  grid-column: auto;
+  grid-row: 3;
+}
+
+.autoRowFirstColumn {
+  background-color: lime;
+  grid-column: 1;
+  grid-row: auto;
+}
+
+.autoRowSecondColumn {
+  background-color: orange;
+  grid-column: 2;
+  grid-row: auto;
+}
+
+.autoRowThirdColumn {
+  background-color: magenta;
+  grid-column: 3;
+  grid-row: auto;
+}
+
+.autoRowAutoColumnSpanning2 {
+  background-color: maroon;
+  grid-column: span 2;
+  grid-row: auto;
+}
+
+.autoRowSpanning2AutoColumn {
+  background-color: aqua;
+  grid-column: auto;
+  grid-row: span 2;
+}
+
+.autoRowSpanning2AutoColumnSpanning3 {
+  background-color: olive;
+  grid-column: span 3;
+  grid-row: span 2;
+}
+
+.autoRowSpanning3AutoColumnSpanning2 {
+  background-color: indigo;
+  grid-column: span 2;
+  grid-row: span 3;
+}
+
+.autoRowFirstColumnSpanning2 {
+  background-color: maroon;
+  grid-column: 1 / span 2;
+  grid-row: auto;
+}
+
+.autoRowSecondColumnSpanning2 {
+  background-color: olive;
+  grid-column: 2 / span 2;
+  grid-row: auto;
+}
+
+.firstRowSpanning2AutoColumn {
+  background-color: maroon;
+  grid-column: auto;
+  grid-row: 1 / span 2;
+  height: 100%;
+}
+
+.secondRowSpanning2AutoColumn {
+  background-color: olive;
+  grid-column: auto;
+  grid-row: 2 / span 2;
+  height: 100%;
+}
+
+/* Grid element flow. */
+.gridAutoFlowColumnSparse {
+  grid-auto-flow: column;
+}
+
+.gridAutoFlowColumnDense {
+  grid-auto-flow: column dense;
+}
+
+.gridAutoFlowRowSparse {
+  grid-auto-flow: row;
+}
+
+.gridAutoFlowRowDense {
+  grid-auto-flow: row dense;
+}
+
+/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
+.constrainedContainer {
+  width: 10px;
+  height: 10px;
+}
+
+.unconstrainedContainer {
+  width: 1000px;
+  height: 1000px;
+}
+
+.sizedToGridArea {
+  font: 10px/1 Ahem;
+  /* Make us fit our grid area. */
+  width: 100%;
+  height: 100%;
+}
+
+.verticalRL {
+  writing-mode: vertical-rl;
+}
+.verticalLR {
+  writing-mode: vertical-lr;
+}
+.horizontalTB {
+  writing-mode: horizontal-tb;
+}
+.directionRTL {
+  direction: rtl;
+}
+.directionLTR {
+  direction: ltr;
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/support/width-keyword-classes.css b/Tests/LibWeb/Text/input/wpt-import/css/support/width-keyword-classes.css
new file mode 100644
index 00000000000..e7775276038
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/support/width-keyword-classes.css
@@ -0,0 +1,43 @@
+/*
+    Take every possible line break so the box width is the width of largest
+    unbreakable line box.
+*/
+.min-content {
+    width: min-content;
+}
+
+.max-content {
+    width: max-content;
+}
+
+/*
+   Shrink wrap just like floating.
+   max(min-content, min(max-content, fill-available))
+*/
+.fit-content {
+    width: fit-content;
+}
+
+.max-width-min-content {
+    max-width: min-content;
+}
+
+.max-width-max-content {
+    max-width: max-content;
+}
+
+.max-width-fit-content {
+    max-width: fit-content;
+}
+
+.min-width-min-content {
+    min-width: min-content;
+}
+
+.min-width-max-content {
+    min-width: max-content;
+}
+
+.min-width-fit-content {
+    min-width: fit-content;
+}