diff --git a/urlpattern/resources/urlpattern-compare-test-data.json b/urlpattern/resources/urlpattern-compare-test-data.json
new file mode 100644
index 00000000000000..54dd80a91a2348
--- /dev/null
+++ b/urlpattern/resources/urlpattern-compare-test-data.json
@@ -0,0 +1,116 @@
+[
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/a" },
+    "right": { "pathname": "/foo/b" },
+    "expected": -1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/b" },
+    "right": { "pathname": "/foo/bar" },
+    "expected": -1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/bar" },
+    "right": { "pathname": "/foo/:bar" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/" },
+    "right": { "pathname": "/foo/:bar" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/:bar" },
+    "right": { "pathname": "/foo/*" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/{bar}" },
+    "right": { "pathname": "/foo/(bar)" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/{bar}" },
+    "right": { "pathname": "/foo/{bar}+" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/{bar}+" },
+    "right": { "pathname": "/foo/{bar}?" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/{bar}?" },
+    "right": { "pathname": "/foo/{bar}*" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/(123)" },
+    "right": { "pathname": "/foo/(12)" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/:b" },
+    "right": { "pathname": "/foo/:a" },
+    "expected": 0
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "*/foo" },
+    "right": { "pathname": "*" },
+    "expected": 1
+  },
+  {
+    "component": "port",
+    "left": { "port": "9" },
+    "right": { "port": "100" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "foo/:bar?/baz" },
+    "right": { "pathname": "foo/{:bar}?/baz" },
+    "expected": -1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "foo/:bar?/baz" },
+    "right": { "pathname": "foo{/:bar}?/baz" },
+    "expected": 0
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "foo/:bar?/baz" },
+    "right": { "pathname": "fo{o/:bar}?/baz" },
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "foo/:bar?/baz" },
+    "right": { "pathname": "foo{/:bar/}?baz" },
+    "expected": -1
+  },
+  {
+    "component": "pathname",
+    "left": "https://a.example.com/b?a",
+    "right": "https://b.example.com/a?b",
+    "expected": 1
+  },
+  {
+    "component": "pathname",
+    "left": { "pathname": "/foo/{bar}/baz" },
+    "right": { "pathname": "/foo/bar/baz" },
+    "expected": 0
+  }
+]
diff --git a/urlpattern/resources/urlpattern-compare-tests.js b/urlpattern/resources/urlpattern-compare-tests.js
new file mode 100644
index 00000000000000..b92b53ee45cd98
--- /dev/null
+++ b/urlpattern/resources/urlpattern-compare-tests.js
@@ -0,0 +1,26 @@
+function runTests(data) {
+  for (let entry of data) {
+    test(function() {
+      const left = new URLPattern(entry.left);
+      const right = new URLPattern(entry.right);
+
+      assert_equals(URLPattern.compareComponent(entry.component, left, right), entry.expected);
+
+      // We have to coerce to an integer here in order to avoid asserting
+      // that `+0` is `-0`.
+      const reverse_expected = ~~(entry.expected * -1);
+      assert_equals(URLPattern.compareComponent(entry.component, right, left), reverse_expected, "reverse order");
+
+      assert_equals(URLPattern.compareComponent(entry.component, left, left), 0, "left equality");
+      assert_equals(URLPattern.compareComponent(entry.component, right, right), 0, "right equality");
+    }, `Component: ${entry.component} ` +
+       `Left: ${JSON.stringify(entry.left)} ` +
+       `Right: ${JSON.stringify(entry.right)}`);
+  }
+}
+
+promise_test(async function() {
+  const response = await fetch('resources/urlpattern-compare-test-data.json');
+  const data = await response.json();
+  runTests(data);
+}, 'Loading data...');
diff --git a/urlpattern/urlpattern-compare.any.js b/urlpattern/urlpattern-compare.any.js
new file mode 100644
index 00000000000000..8db38adfd41d47
--- /dev/null
+++ b/urlpattern/urlpattern-compare.any.js
@@ -0,0 +1,2 @@
+// META: global=window,worker
+// META: script=resources/urlpattern-compare-tests.js
diff --git a/urlpattern/urlpattern-compare.https.any.js b/urlpattern/urlpattern-compare.https.any.js
new file mode 100644
index 00000000000000..8db38adfd41d47
--- /dev/null
+++ b/urlpattern/urlpattern-compare.https.any.js
@@ -0,0 +1,2 @@
+// META: global=window,worker
+// META: script=resources/urlpattern-compare-tests.js