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>
