From eb39c0162c69688f10a64de9c9425a86ad96471c Mon Sep 17 00:00:00 2001
From: Sam Atkins <sam@ladybird.org>
Date: Fri, 12 Sep 2025 14:35:56 +0100
Subject: [PATCH] Tests: Import a selection of CSS Typed-OM property tests

This is an arbitrary set of tests intended to cover the different
CSSStyleValue types without too much overlap.

Right now they all fail, because testsuite.js attempts to create one of
every type of CSSStyleValue on load, and we don't have most of them.
---
 .../the-stylepropertymap/properties/color.txt |   3 +
 .../properties/cursor.txt                     |   3 +
 .../properties/display.txt                    |   3 +
 .../the-stylepropertymap/properties/font.txt  |   3 +
 .../properties/padding.txt                    |   3 +
 .../properties/transform.txt                  |   3 +
 .../the-stylepropertymap/properties/width.txt |   3 +
 .../properties/color.html                     |  30 ++
 .../properties/cursor.html                    |  59 +++
 .../properties/display.html                   |  59 +++
 .../the-stylepropertymap/properties/font.html |  24 +
 .../properties/padding.html                   |  39 ++
 .../properties/resources/testsuite.js         | 485 ++++++++++++++++++
 .../properties/transform.html                 |  25 +
 .../properties/width.html                     |  63 +++
 15 files changed, 805 insertions(+)
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.txt
 create mode 100644 Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.txt
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.html
 create mode 100644 Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.html

diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.txt
new file mode 100644
index 00000000000..6055c864758
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.txt
@@ -0,0 +1,3 @@
+Harness status: Error
+
+Found 0 tests
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.txt
new file mode 100644
index 00000000000..6055c864758
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.txt
@@ -0,0 +1,3 @@
+Harness status: Error
+
+Found 0 tests
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.txt
new file mode 100644
index 00000000000..6055c864758
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.txt
@@ -0,0 +1,3 @@
+Harness status: Error
+
+Found 0 tests
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.txt
new file mode 100644
index 00000000000..6055c864758
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.txt
@@ -0,0 +1,3 @@
+Harness status: Error
+
+Found 0 tests
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.txt
new file mode 100644
index 00000000000..6055c864758
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.txt
@@ -0,0 +1,3 @@
+Harness status: Error
+
+Found 0 tests
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.txt
new file mode 100644
index 00000000000..6055c864758
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.txt
@@ -0,0 +1,3 @@
+Harness status: Error
+
+Found 0 tests
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.txt
new file mode 100644
index 00000000000..6055c864758
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.txt
@@ -0,0 +1,3 @@
+Harness status: Error
+
+Found 0 tests
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.html b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.html
new file mode 100644
index 00000000000..6bd119a61bb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/color.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'color' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('color', [
+  {
+    syntax: 'currentcolor',
+    // computes to a <color>, which is not supported in level 1
+    computed: (_, result) => assert_class_string(result, 'CSSStyleValue')
+  }
+]);
+
+// <color>s are not supported in level 1
+runUnsupportedPropertyTests('color', [
+  'red', '#bbff00', 'rgb(255, 255, 128)', 'hsl(50, 33%, 25%)',
+  'transparent'
+]);
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.html b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.html
new file mode 100644
index 00000000000..43e826044c0
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/cursor.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'cursor' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('cursor', [
+  { syntax: 'auto' },
+  { syntax: 'default' },
+  { syntax: 'none' },
+  { syntax: 'context-menu' },
+  { syntax: 'help' },
+  { syntax: 'pointer' },
+  { syntax: 'progress' },
+  { syntax: 'wait' },
+  { syntax: 'cell' },
+  { syntax: 'crosshair' },
+  { syntax: 'text' },
+  { syntax: 'vertical-text' },
+  { syntax: 'alias' },
+  { syntax: 'copy' },
+  { syntax: 'move' },
+  { syntax: 'no-drop' },
+  { syntax: 'not-allowed' },
+  { syntax: 'grab' },
+  { syntax: 'grabbing' },
+  { syntax: 'e-resize' },
+  { syntax: 'n-resize' },
+  { syntax: 'ne-resize' },
+  { syntax: 'nw-resize' },
+  { syntax: 's-resize' },
+  { syntax: 'se-resize' },
+  { syntax: 'sw-resize' },
+  { syntax: 'w-resize' },
+  { syntax: 'ew-resize' },
+  { syntax: 'ns-resize' },
+  { syntax: 'nesw-resize' },
+  { syntax: 'nwse-resize' },
+  { syntax: 'col-resize' },
+  { syntax: 'row-resize' },
+  { syntax: 'all-scroll' },
+  { syntax: 'zoom-in' },
+  { syntax: 'zoom-out' }
+]);
+
+runUnsupportedPropertyTests('cursor', [
+  'url(hand.cur), pointer', 'url(cursor1.png) 4 12, auto'
+]);
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.html b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.html
new file mode 100644
index 00000000000..e9a6609c584
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/display.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'display' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('display', [
+  { syntax: 'none' },
+  { syntax: 'block' },
+  { syntax: 'inline' },
+  { syntax: 'flow-root' },
+  { syntax: 'table' },
+  { syntax: 'flex' },
+  { syntax: 'grid' },
+  { syntax: 'list-item' },
+  { syntax: 'table-row-group' },
+  { syntax: 'table-header-group' },
+  { syntax: 'table-footer-group' },
+  { syntax: 'table-row' },
+  { syntax: 'table-cell' },
+  { syntax: 'table-column-group' },
+  { syntax: 'table-column' },
+  { syntax: 'table-caption' },
+  { syntax: 'contents' },
+  { syntax: 'inline-block' },
+  { syntax: 'inline-table' },
+  { syntax: 'inline-flex' },
+  { syntax: 'inline-grid' },
+]);
+
+// We can not set 'inline math' or 'math inline' via Typed OM.
+// On the other hand, we might get a CSSKeywordValue instance for them instead
+// of a CSSStyleValue because they can be represented as just 'math' in
+// internal representations.
+for (let value of ['inline math', 'math inline']) {
+  test(t => {
+    let element = createDivWithStyle(t);
+    element.style.display = value;
+    const result = element.attributeStyleMap.get('display');
+    assert_not_equals(result, null);
+    assert_in_array({}.toString.call(result),
+                    ['[object CSSStyleValue]', '[object CSSKeywordValue]']);
+  }, `'display' does not support setting '${value}'`);
+}
+
+runUnsupportedPropertyTests('display', [
+  'block math', 'math block'
+]);
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.html b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.html
new file mode 100644
index 00000000000..26b134e714d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/font.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'font' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runUnsupportedPropertyTests('font', [
+  '1.2em "Fira Sans", sans-serif',
+  'italic 1.2em "Fira Sans", serif',
+  'italic small-caps bold 16px/2 cursive',
+  'small-caps bold 24px/1 sans-serif',
+  'caption',
+]);
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.html b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.html
new file mode 100644
index 00000000000..3e57231e6e2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/padding.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>padding properties</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+function assert_is_equal_with_clamping_percentage(input, result) {
+  const percent = input.to('percent').value;
+
+  if (percent < 0)
+    assert_style_value_equals(result, new CSSUnitValue(0, 'percent'));
+  else
+    assert_style_value_equals(result, new CSSUnitValue(percent, 'percent'));
+}
+
+for (const suffix of ['top', 'left', 'right', 'bottom']) {
+  runPropertyTests('padding-' + suffix, [
+    {
+      syntax: '<percentage>',
+      specified: assert_is_equal_with_range_handling,
+      computed: assert_is_equal_with_clamping_percentage
+    },
+    {
+      syntax: '<length>',
+      specified: assert_is_equal_with_range_handling
+    },
+  ]);
+}
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
new file mode 100644
index 00000000000..cecd72ad927
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
@@ -0,0 +1,485 @@
+function assert_is_unit(unit, result) {
+  assert_class_string(result, 'CSSUnitValue',
+    'relative lengths must compute to a CSSUnitValue');
+  assert_equals(result.unit, unit, 'unit');
+}
+
+function assert_is_calc_sum(result) {
+  assert_class_string(result, 'CSSMathSum',
+    'specified calc must be a CSSMathSum');
+}
+
+function assert_is_equal_with_range_handling(input, result) {
+  if (input instanceof CSSUnitValue && input.value < 0)
+    assert_style_value_equals(result, new CSSMathSum(input));
+  else
+    assert_style_value_equals(result, input);
+}
+
+function assert_is_unsupported(result) {
+  assert_class_string(result, 'CSSStyleValue');
+}
+
+const gCssWideKeywordsExamples = [
+  {
+    description: 'initial keyword',
+    input: new CSSKeywordValue('initial')
+  },
+  {
+    description: 'inherit keyword',
+    input: new CSSKeywordValue('inherit')
+  },
+  {
+    description: 'unset keyword',
+    input: new CSSKeywordValue('unset')
+  },
+  {
+    description: 'revert keyword',
+    input: new CSSKeywordValue('revert')
+  },
+];
+
+const gVarReferenceExamples = [
+  {
+    description: 'a var() reference',
+    input: new CSSUnparsedValue([' ', new CSSVariableReferenceValue('--A')])
+  },
+];
+
+const gTestSyntaxExamples = {
+  '<length>': {
+    description: 'a length',
+    examples: [
+      {
+        description: "zero px",
+        input: new CSSUnitValue(0, 'px')
+      },
+      {
+        description: "a negative em",
+        input: new CSSUnitValue(-3.14, 'em'),
+        // 'ems' are relative units, so just check that it computes to px
+        defaultComputed: (_, result) => assert_is_unit('px', result)
+      },
+      {
+        description: "a positive cm",
+        input: new CSSUnitValue(3.14, 'cm'),
+        // 'cms' are relative units, so just check that it computes to px
+        defaultComputed: (_, result) => assert_is_unit('px', result)
+      },
+      {
+        description: "a calc length",
+        input: new CSSMathSum(new CSSUnitValue(0, 'px'), new CSSUnitValue(0, 'em')),
+        // Specified/computed calcs are usually simplified.
+        // FIXME: Test this properly
+        defaultSpecified: (_, result) => assert_is_calc_sum(result),
+        defaultComputed: (_, result) => assert_is_unit('px', result)
+      }
+    ],
+  },
+  '<percentage>': {
+    description: 'a percent',
+    examples: [
+      {
+        description: "zero percent",
+        input: new CSSUnitValue(0, 'percent')
+      },
+      {
+        description: "a negative percent",
+        input: new CSSUnitValue(-3.14, 'percent')
+      },
+      {
+        description: "a positive percent",
+        input: new CSSUnitValue(3.14, 'percent')
+      },
+      {
+        description: "a calc percent",
+        input: new CSSMathSum(new CSSUnitValue(0, 'percent'), new CSSUnitValue(0, 'percent')),
+        // Specified/computed calcs are usually simplified.
+        // FIXME: Test this properly
+        defaultSpecified: (_, result) => assert_is_calc_sum(result),
+        defaultComputed: (_, result) => assert_is_unit('percent', result)
+      }
+    ],
+  },
+  '<time>': {
+    description: 'a time',
+    examples: [
+      {
+        description: "zero seconds",
+        input: new CSSUnitValue(0, 's')
+      },
+      {
+        description: "negative milliseconds",
+        input: new CSSUnitValue(-3.14, 'ms'),
+        // Computed values use canonical units
+        defaultComputed: (_, result) => assert_style_value_equals(result, new CSSUnitValue(-0.00314, 's'))
+      },
+      {
+        description: "positive seconds",
+        input: new CSSUnitValue(3.14, 's')
+      },
+      {
+        description: "a calc time",
+        input: new CSSMathSum(new CSSUnitValue(0, 's'), new CSSUnitValue(0, 'ms')),
+        // Specified/computed calcs are usually simplified.
+        // FIXME: Test this properly
+        defaultSpecified: (_, result) => assert_is_calc_sum(result),
+        defaultComputed: (_, result) => assert_is_unit('s', result)
+      }
+    ],
+  },
+  '<time>': {
+    description: 'a time',
+    examples: [
+      {
+        description: "zero seconds",
+        input: new CSSUnitValue(0, 's')
+      },
+      {
+        description: "negative milliseconds",
+        input: new CSSUnitValue(-3.14, 'ms'),
+        // Computed values use canonical units
+        defaultComputed: (_, result) => assert_style_value_equals(result, new CSSUnitValue(-0.00314, 's'))
+      },
+      {
+        description: "positive seconds",
+        input: new CSSUnitValue(3.14, 's')
+      },
+      {
+        description: "a calc time",
+        input: new CSSMathSum(new CSSUnitValue(0, 's'), new CSSUnitValue(0, 'ms')),
+        specifiedExpected: new CSSMathSum(new CSSUnitValue(0, 's'), new CSSUnitValue(0, 's')),
+        defaultSpecified: (_, result) => assert_is_calc_sum(result),
+        defaultComputed: (_, result) => assert_is_unit('s', result)
+      }
+    ],
+  },
+  '<angle>': {
+    description: 'an angle',
+    examples: [
+      {
+        description: "zero degrees",
+        input: new CSSUnitValue(0, 'deg')
+      },
+      {
+        description: "positive radians",
+        input: new CSSUnitValue(3.14, 'rad'),
+        // Computed values use canonical units
+        defaultComputed: (_, result) => assert_style_value_equals(result, new CSSUnitValue(179.908752, 'deg'))
+      },
+      {
+        description: "negative degrees",
+        input: new CSSUnitValue(-3.14, 'deg')
+      },
+      {
+        description: "a calc angle",
+        input: new CSSMathSum(new CSSUnitValue(0, 'rad'), new CSSUnitValue(0, 'deg')),
+        // Specified/computed calcs are usually simplified.
+        // FIXME: Test this properly
+        defaultSpecified: (_, result) => assert_is_calc_sum(result),
+        defaultComputed: (_, result) => assert_is_unit('deg', result)
+      }
+    ],
+  },
+  '<flex>': {
+    description: 'a flexible length',
+    examples: [
+      {
+        description: "zero fractions",
+        input: new CSSUnitValue(0, 'fr')
+      },
+      {
+        description: "one fraction",
+        input: new CSSUnitValue(1, 'fr')
+      },
+      // TODO(https://github.com/w3c/css-houdini-drafts/issues/734):
+      // Add calc tests involving 'fr' when that is spec'd in CSS.
+    ],
+  },
+  '<negative-flex>': {
+    description: 'a flexible length',
+    examples: [
+      {
+        description: "negative fraction",
+        input: new CSSUnitValue(-3.14, 'fr')
+      },
+    ],
+  },
+  '<number>': {
+    description: 'a number',
+    examples: [
+      {
+        description: 'the number zero',
+        input: new CSSUnitValue(0, 'number')
+      },
+      {
+        description: 'a negative number',
+        input: new CSSUnitValue(-3.14, 'number')
+      },
+      {
+        description: 'a positive number',
+        input: new CSSUnitValue(3.14, 'number')
+      },
+      {
+        description: "a calc number",
+        input: new CSSMathSum(new CSSUnitValue(2, 'number'), new CSSUnitValue(3, 'number')),
+        defaultSpecified: (_, result) => assert_is_calc_sum(result),
+        defaultComputed: (_, result) => {
+          assert_style_value_equals(result, new CSSUnitValue(5, 'number'));
+        }
+      }
+    ],
+  },
+  '<url>': {
+    description: 'a URL',
+    examples: [
+      // TODO(https://github.com/w3c/css-houdini-drafts/issues/716):
+      // We can't test this until CSSURLValue is spec'd.
+    ],
+  },
+  '<transform>': {
+    description: 'a transform',
+    examples: [
+      {
+        description: 'a transform containing percents',
+        input: new CSSTransformValue([
+          new CSSTranslate(
+            new CSSUnitValue(50, 'percent'),
+            new CSSUnitValue(50, 'percent'),
+          )
+        ]),
+      },
+      {
+        description: 'a transform containing relative values',
+        input: new CSSTransformValue([
+          new CSSPerspective(new CSSUnitValue(10, 'em'))
+        ]),
+        defaultComputed: (_, result) => {
+          // Relative units compute to absolute.
+          assert_class_string(result, 'CSSTransformValue',
+            'Result must be a CSSTransformValue');
+          assert_class_string(result[0], 'CSSPerspective',
+            'First component must be a CSSTransformValue');
+          assert_is_unit('px', result[0].length);
+        }
+      },
+      {
+        description: 'a transform containing all the transform components',
+        input: new CSSTransformValue([
+          new CSSTranslate(
+            new CSSUnitValue(0, 'px'),
+            new CSSUnitValue(1, 'px'),
+            new CSSUnitValue(2, 'px'),
+          ),
+          new CSSTranslate(
+            new CSSUnitValue(0, 'px'),
+            new CSSUnitValue(1, 'px'),
+          ),
+          new CSSRotate(1, 2, 3, new CSSUnitValue(45, 'deg')),
+          new CSSRotate(new CSSUnitValue(45, 'deg')),
+          new CSSScale(1, 2, 3),
+          new CSSScale(1, 2),
+          new CSSSkew(new CSSUnitValue(1, 'deg'), new CSSUnitValue(1, 'deg')),
+          new CSSSkewX(new CSSUnitValue(1, 'deg')),
+          new CSSSkewY(new CSSUnitValue(45, 'deg')),
+          new CSSPerspective(new CSSUnitValue(1, 'px')),
+          new CSSMatrixComponent(new DOMMatrixReadOnly(
+            [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16])
+          ),
+          new CSSMatrixComponent(new DOMMatrixReadOnly([1, 2, 3, 4, 5, 6])),
+        ]),
+      }
+    ],
+  },
+};
+
+// Test setting a value in a style map and then getting it from the inline and
+// computed styles.
+function testPropertyValid(propertyName, examples, specified, computed, description) {
+  for (const example of examples) {
+    test(t => {
+      let element = createDivWithStyle(t);
+
+      element.attributeStyleMap.set(propertyName, example.input);
+
+      // specified style
+      const specifiedResult = element.attributeStyleMap.get(propertyName);
+      assert_not_equals(specifiedResult, null,
+        'Specified value must not be null');
+      assert_true(specifiedResult instanceof CSSStyleValue,
+        'Specified value must be a CSSStyleValue');
+
+      if (specified || example.defaultSpecified) {
+        (specified || example.defaultSpecified)(example.specifiedExpected || example.input, specifiedResult);
+      } else {
+        assert_style_value_equals(specifiedResult, example.input,
+          `Setting ${example.description} and getting its specified value`);
+      }
+
+      // computed style
+      const computedResult = element.computedStyleMap().get(propertyName);
+      assert_not_equals(computedResult, null,
+        'Computed value must not be null');
+      assert_true(computedResult instanceof CSSStyleValue,
+        'Computed value must be a CSSStyleValue');
+
+      if (computed || example.defaultComputed) {
+        (computed || example.defaultComputed)(example.input, computedResult);
+      } else {
+        assert_style_value_equals(computedResult, example.input,
+          `Setting ${example.description} and getting its computed value`);
+      }
+    }, `Can set '${propertyName}' to ${description}: ${example.input}`);
+  }
+}
+
+// We have to special case CSSImageValue as they cannot be created with a
+// constructor and are completely opaque.
+function testIsImageValidForProperty(propertyName) {
+  test(t => {
+    let element1 = createDivWithStyle(t, `${propertyName}: url("/media/1x1-green.png")`);
+    let element2 = createDivWithStyle(t);
+
+    const result = element1.attributeStyleMap.get(propertyName);
+    assert_not_equals(result, null, 'Image value must not be null');
+    assert_class_string(result, 'CSSImageValue',
+      'Image value must be a CSSImageValue');
+
+    element2.attributeStyleMap.set(propertyName, result);
+    assert_equals(element2.style[propertyName], element1.style[propertyName],
+      'Image value can be set on different element');
+  }, `Can set '${propertyName}' to an image`);
+}
+
+// Test that styleMap.set throws for invalid values
+function testPropertyInvalid(propertyName, examples, description) {
+  for (const example of examples) {
+    test(t => {
+      let styleMap = createInlineStyleMap(t);
+      assert_throws_js(TypeError, () => styleMap.set(propertyName, example.input));
+    }, `Setting '${propertyName}' to ${description}: ${example.input} throws TypeError`);
+  }
+}
+
+// Test that styleMap.get/.set roundtrips correctly for unsupported values.
+function testUnsupportedValue(propertyName, cssText) {
+  test(t => {
+    let element1 = createDivWithStyle(t);
+    let element2 = createDivWithStyle(t);
+
+    element1.style[propertyName] = cssText;
+    const result = element1.attributeStyleMap.get(propertyName);
+    assert_not_equals(result, null,
+      'Unsupported value must not be null');
+    assert_class_string(result, 'CSSStyleValue',
+      'Unsupported value must be a CSSStyleValue and not one of its subclasses');
+
+    element2.attributeStyleMap.set(propertyName, result);
+    assert_equals(element2.style[propertyName], element1.style[propertyName],
+      'Unsupported value can be set on different element');
+
+    const resultAll = element2.attributeStyleMap.getAll(propertyName);
+    assert_style_value_equals(resultAll[0], result,
+      `getAll() with single unsupported value returns single-item list ` +
+      `with same result as get()`);
+  }, `'${propertyName}' does not support '${cssText}'`);
+}
+
+function createKeywordExample(keyword) {
+  return {
+    description: `the '${keyword}' keyword`,
+    examples: [ { input: new CSSKeywordValue(keyword) } ]
+  };
+}
+
+// Run a battery of StylePropertyMap tests on |propertyName|.
+// Second argument is a list of test cases. A test case has the form:
+//
+// {
+//   syntax: "<length>",
+//   specified: /* a callback */ (optional)
+//   computed: /* a callback */ (optional)
+// }
+//
+// If a callback is passed to |specified|, then the callback will be passed
+// two arguments:
+// 1. The input test case
+// 2. The result of calling get() on the inline style map (specified values).
+//
+// The callback should check if the result is expected using assert_* functions.
+// If no callback is passed, then we assert that the result is the same as
+// the input.
+//
+// Same goes for |computed|, but with the computed style map (computed values).
+//
+// FIXME: The reason we pass argument #2 is that it's sometimes difficult to
+// compute exactly what the expected result should be (e.g. browser-specific
+// values). Once we can do that, we can remove argument #2 and just return
+// the expected result.
+function runPropertyTests(propertyName, testCases) {
+  let syntaxTested = new Set();
+
+  // Every property should at least support CSS-wide keywords.
+  testPropertyValid(propertyName,
+    gCssWideKeywordsExamples,
+    null, // should be as specified
+    () => {}, // could be anything
+    'CSS-wide keywords');
+
+  // Every property should support values containing var() references.
+  testPropertyValid(propertyName,
+    gVarReferenceExamples,
+    null, // should be as specified
+    () => {}, // could compute to anything
+    'var() references');
+
+  for (const testCase of testCases) {
+    // <image> is a special case
+    if (testCase.syntax === '<image>') {
+      testIsImageValidForProperty(propertyName);
+      continue;
+    }
+
+    // Retrieve test examples for this test case's syntax. If the syntax
+    // looks like a keyword, then create an example on the fly.
+    const syntaxExamples = testCase.syntax.toLowerCase().match(/^[a-z0-9\-]+$/) ?
+      createKeywordExample(testCase.syntax) :
+      gTestSyntaxExamples[testCase.syntax];
+
+    if (!syntaxExamples)
+      throw new Error(`'${testCase.syntax}' is not a valid CSS component`);
+
+    testPropertyValid(propertyName,
+      syntaxExamples.examples,
+      testCase.specified,
+      testCase.computed,
+      syntaxExamples.description);
+
+    syntaxTested.add(testCase.syntax);
+  }
+
+  // Also test that styleMap.set rejects invalid CSSStyleValues.
+  for (const [syntax, syntaxExamples] of Object.entries(gTestSyntaxExamples)) {
+    if (!syntaxTested.has(syntax)) {
+      testPropertyInvalid(propertyName,
+        syntaxExamples.examples,
+        syntaxExamples.description);
+    }
+  }
+}
+
+// Same as runPropertyTests but for list-valued properties.
+function runListValuedPropertyTests(propertyName, testCases) {
+  // TODO(https://crbug.com/545318): Run list-valued tests as well.
+  runPropertyTests(propertyName, testCases);
+}
+
+// Check that |propertyName| doesn't "support" examples in |testExamples|.
+// |testExamples| is a list of CSS string values. An "unsupported" value
+// doesn't have a corresponding Typed OM representation. It normalizes as
+// the base CSSStyleValue.
+function runUnsupportedPropertyTests(propertyName, testExamples) {
+  for (const cssText of testExamples) {
+    testUnsupportedValue(propertyName, cssText);
+  }
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.html b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.html
new file mode 100644
index 00000000000..1f689e0084e
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/transform.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'transform' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+runPropertyTests('transform', [
+  { syntax: 'none' },
+  { syntax: '<transform>' },
+]);
+
+runUnsupportedPropertyTests('transform', [
+  'matrix(sibling-index(), 2, 3, 4, 5 ,6)'
+]);
+
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.html b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.html
new file mode 100644
index 00000000000..7b1f645fc8d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/css-typed-om/the-stylepropertymap/properties/width.html
@@ -0,0 +1,63 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>'width' property</title>
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
+<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
+<script src="../../../../resources/testharness.js"></script>
+<script src="../../../../resources/testharnessreport.js"></script>
+<script src="../../resources/testhelper.js"></script>
+<script src="resources/testsuite.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+function assert_is_equal_with_clamping_percentage(input, result) {
+  const percent = input.to('percent').value;
+
+  if (percent < 0)
+    assert_style_value_equals(result, new CSSUnitValue(0, 'percent'));
+  else
+    assert_style_value_equals(result, new CSSUnitValue(percent, 'percent'));
+}
+
+runPropertyTests('width', [
+  { syntax: 'auto' },
+  {
+    syntax: '<percentage>',
+    specified: assert_is_equal_with_range_handling,
+    computed: assert_is_equal_with_clamping_percentage
+  },
+  {
+    syntax: '<length>',
+    specified: assert_is_equal_with_range_handling
+  },
+]);
+
+runPropertyTests('min-width', [
+  {
+    syntax: '<percentage>',
+    specified: assert_is_equal_with_range_handling,
+    computed: assert_is_equal_with_clamping_percentage
+  },
+  {
+    syntax: '<length>',
+    specified: assert_is_equal_with_range_handling
+  },
+]);
+
+runPropertyTests('max-width', [
+  { syntax: 'none' },
+  {
+    syntax: '<percentage>',
+    specified: assert_is_equal_with_range_handling,
+    computed: assert_is_equal_with_clamping_percentage
+  },
+  {
+    syntax: '<length>',
+    specified: assert_is_equal_with_range_handling
+  },
+]);
+
+</script>