diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/DOMRectList.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/DOMRectList.txt
new file mode 100644
index 00000000000..9e2ec167b54
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/DOMRectList.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	Element getClientRects()	
+Pass	Range getClientRects()	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/GetBoundingRect.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/GetBoundingRect.txt
new file mode 100644
index 00000000000..c14d4272502
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/GetBoundingRect.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	getBoundingClientRect	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-addListener-handleEvent.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-addListener-handleEvent.txt
new file mode 100644
index 00000000000..ab070ff92a5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-addListener-handleEvent.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+3 Pass
+3 Fail
+Details
+Result	Test Name	MessageFail	calls handleEvent method of event listener	
+Pass	looks up handleEvent method on every event dispatch	
+Pass	doesn't look up handleEvent method on callable event listeners	
+Pass	rethrows errors when getting handleEvent	
+Fail	throws if handleEvent is falsy and not callable	
+Fail	throws if handleEvent is thruthy and not callable	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-addListener-removeListener.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-addListener-removeListener.txt
new file mode 100644
index 00000000000..5eec34a4f74
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-addListener-removeListener.txt
@@ -0,0 +1,19 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+7 Pass
+1 Fail
+Details
+Result	Test Name	MessagePass	EventListener parameter is optional	
+Fail	listeners are called when <iframe> is resized	
+Pass	listeners are called correct number of times	
+Pass	listeners are called in order they were added	
+Pass	listener that was added twice is called only once	
+Pass	listeners are called in order their MQLs were created	
+Pass	removing listener from one MQL doesn't remove it from all MQLs	
+Pass	MediaQueryList::removeListener removes added listener	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-change-event-matches-value.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-change-event-matches-value.txt
new file mode 100644
index 00000000000..4dc396b0321
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-change-event-matches-value.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	MediaQueryList.changed is correct for all lists in the document even during a change event handler	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget-interop.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget-interop.txt
new file mode 100644
index 00000000000..43eb9e3d8a2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget-interop.txt
@@ -0,0 +1,18 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+8 Pass
+Details
+Result	Test Name	MessagePass	dispatchEvent triggers listener added with addListener	
+Pass	listener added with addListener and addEventListener is called once	
+Pass	listener added with addListener and addEventListener (capture) is called twice	
+Pass	removeEventListener removes listener added with addListener	
+Pass	removeEventListener (capture) doesn't remove listener added with addListener	
+Pass	removeListener removes listener added with addEventListener	
+Pass	removeListener doesn't remove listener added with addEventListener (capture)	
+Pass	capturing event listener fires before non-capturing listener at target	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget.txt
new file mode 100644
index 00000000000..fc143617180
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget.txt
@@ -0,0 +1,18 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 7 tests
+
+6 Pass
+1 Fail
+Details
+Result	Test Name	MessageFail	onchange adds listener	
+Pass	onchange removes listener	
+Pass	listeners for "change" type are called	
+Pass	listeners with different type are not called	
+Pass	addEventListener "once" option is respected	
+Pass	removeEventListener removes listener	
+Pass	dispatchEvent works as expected	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryListEvent.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryListEvent.txt
new file mode 100644
index 00000000000..e08e9421030
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/MediaQueryListEvent.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+3 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	type can be different from "change"	
+Pass	init dictionary default values	
+Pass	init dictionary overrides	
+Fail	argument of addListener	
+Fail	argument of onchange	
+Fail	constructor of "change" event	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-001.txt
new file mode 100644
index 00000000000..0b6a43fca13
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-001.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Pass
+Details
+Result	Test Name	MessagePass	getBoundingClientRect() should return a DOMRect where height=bottom-top	
+Pass	getBoundingClientRect() should return a DOMRect where width=right-left	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-002.txt
new file mode 100644
index 00000000000..7d2a215a71f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	getBoundingClientRect on a newly-created Element not yet inserted into the DOM should return an all-zeroes DOMRect	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-003.txt
new file mode 100644
index 00000000000..e249fce6272
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getBoundingClientRect-003.txt
@@ -0,0 +1,12 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 2 tests
+
+2 Fail
+Details
+Result	Test Name	MessageFail	{Element,Range}.prototype.getBoundingClientRect on SVG <tspan>, Element	
+Fail	{Element,Range}.prototype.getBoundingClientRect on SVG <tspan>, Range	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getClientRects-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getClientRects-002.txt
new file mode 100644
index 00000000000..cd6df2c0731
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getClientRects-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	CSSOM View - GetClientRects().length is the same regardless source new lines	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getClientRects.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getClientRects.txt
new file mode 100644
index 00000000000..d9d6b7a2320
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/cssom-getClientRects.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	getClientRects on a newly-created Element not yet inserted into the DOM should return an empty DOMRectList	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-001.txt
new file mode 100644
index 00000000000..c2f8a95835f
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Fail
+Details
+Result	Test Name	MessageFail	CSSOM View - 5 - extensions to the Document interface	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-002.txt
new file mode 100644
index 00000000000..7f7ed0bcb2a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Checking whether dynamic changes to visibility interact correctly with table anonymous boxes	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-003.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-003.txt
new file mode 100644
index 00000000000..7f7ed0bcb2a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementFromPoint-003.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	Checking whether dynamic changes to visibility interact correctly with table anonymous boxes	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementScroll-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementScroll-002.txt
new file mode 100644
index 00000000000..3ad6bd23451
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementScroll-002.txt
@@ -0,0 +1,14 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 4 tests
+
+4 Pass
+Details
+Result	Test Name	MessagePass	simple scroll with style: 'margin' and 'overflow: scroll'	
+Pass	simple scroll with style: 'margin' and 'overflow: hidden'	
+Pass	simple scroll with style: 'padding' and 'overflow: scroll'	
+Pass	simple scroll with style: 'padding' and 'overflow: hidden'	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementScroll.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementScroll.txt
new file mode 100644
index 00000000000..b8cd1f2a41a
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementScroll.txt
@@ -0,0 +1,18 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 8 tests
+
+8 Pass
+Details
+Result	Test Name	MessagePass	Element scrollTop/Left getter/setter test	
+Pass	Element scroll test (two arguments)	
+Pass	Element scroll test (one argument)	
+Pass	Element scrollTo test (two arguments)	
+Pass	Element scrollTo test (one argument)	
+Pass	Element scrollBy test (two arguments)	
+Pass	Element scrollBy test (one argument)	
+Pass	Element scroll maximum test	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementsFromPoint-simple.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementsFromPoint-simple.txt
new file mode 100644
index 00000000000..318bcd44a3d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/elementsFromPoint-simple.txt
@@ -0,0 +1,17 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 6 tests
+
+2 Pass
+4 Fail
+Details
+Result	Test Name	MessageFail	elementsFromPoint for each corner of a simple div	
+Fail	elementsFromPoint for each corner of a div that has a pseudo-element	
+Fail	elementsFromPoint for each corner of a div that is between another div and its pseudo-element	
+Fail	elementsFromPoint for each corner of a div that has a margin	
+Pass	elementsFromPoint for each corner of a div with pointer-events:none	
+Pass	elementsFromPoint for each corner of a div with a 3d transform	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/offsetTopLeft-border-box.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/offsetTopLeft-border-box.txt
new file mode 100644
index 00000000000..fe1d3896009
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/offsetTopLeft-border-box.txt
@@ -0,0 +1,39 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 28 tests
+
+25 Pass
+3 Fail
+Details
+Result	Test Name	MessagePass	container: 0	
+Fail	container: 1	
+Pass	container: 2	
+Pass	container: 3	
+Pass	container: 4	
+Fail	container: 5	
+Pass	container: 6	
+Pass	container: 7	
+Pass	container: 8	
+Pass	container: 9	
+Pass	container: 10	
+Pass	container: 11	
+Pass	container: 12	
+Pass	container: 13	
+Pass	container: 14	
+Pass	container: 15	
+Pass	container: 16	
+Pass	container: 17	
+Pass	container: 18	
+Pass	container: 19	
+Pass	container: 20	
+Pass	container: 21	
+Pass	container: 22	
+Pass	container: 23	
+Pass	container: 24	
+Fail	container: 25	
+Pass	container: 26	
+Pass	container: 27	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/resize-event-on-initial-layout-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/resize-event-on-initial-layout-001.txt
new file mode 100644
index 00000000000..6fd4f7f9ae7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/resize-event-on-initial-layout-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	resize events are not fired on the initial layout	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/resize-event-on-initial-layout-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/resize-event-on-initial-layout-002.txt
new file mode 100644
index 00000000000..6fd4f7f9ae7
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/resize-event-on-initial-layout-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	resize events are not fired on the initial layout	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-no-layout-box.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-no-layout-box.txt
new file mode 100644
index 00000000000..161fb044379
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-no-layout-box.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	scrolling an element with no CSS layout box should have no effect	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-001.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-001.txt
new file mode 100644
index 00000000000..738e9720dc5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-001.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	CSSOM scrollingElement reflects the propagated scroll to viewport correctly	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-002.txt b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-002.txt
new file mode 100644
index 00000000000..738e9720dc5
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-002.txt
@@ -0,0 +1,11 @@
+Summary
+
+Harness status: OK
+
+Rerun
+
+Found 1 tests
+
+1 Pass
+Details
+Result	Test Name	MessagePass	CSSOM scrollingElement reflects the propagated scroll to viewport correctly	
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/DOMRectList.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/DOMRectList.html
new file mode 100644
index 00000000000..5e0ea164c02
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/DOMRectList.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<title>CSSOM View APIs that return a DOMRectList</title>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<div id=x>x</div>
+<script>
+setup(() => {
+  window.element = document.getElementById('x');
+});
+
+test(() => {
+  const domRectList = element.getClientRects();
+  assert_class_string(domRectList, 'DOMRectList');
+  assert_class_string(domRectList.item(0), 'DOMRect');
+}, 'Element getClientRects()');
+
+test(() => {
+  const range = new Range();
+  range.selectNodeContents(element);
+  const domRectList = range.getClientRects();
+  assert_class_string(domRectList, 'DOMRectList');
+  assert_class_string(domRectList.item(0), 'DOMRect');
+}, 'Range getClientRects()');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/GetBoundingRect.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/GetBoundingRect.html
new file mode 100644
index 00000000000..174abfeacb5
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/GetBoundingRect.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>getBoundingClientRect</title>
+    <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect">
+    <script src="../../resources/testharness.js"></script>
+    <script src="../../resources/testharnessreport.js"></script>
+
+    <style>
+      #foo {
+        margin: 0px 0px 0px 5px;
+        transform: translate(10px, 200px);
+        position: fixed;
+        left: 5px;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="foo">
+      FOO
+    </div>
+    <script>
+        test(function () {
+            var foo = document.getElementById("foo").getBoundingClientRect();
+            assert_equals(foo.left, 20);
+        });
+    </script>
+  </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-addListener-handleEvent.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-addListener-handleEvent.html
new file mode 100644
index 00000000000..4d0dd282c3a
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-addListener-handleEvent.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="flags" content="dom">
+<title>CSS Test: CSSOM View MediaQueryList::addListener with handleEvent</title>
+<link rel="help" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/matchMedia.js"></script>
+<div id="log"></div>
+<script>
+"use strict";
+setup({ allow_uncaught_exception: true });
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let _this;
+    let _event;
+    const listener = {
+        handleEvent(event) {
+            _this = this;
+            _event = event;
+        },
+    };
+
+    mql.addListener(listener);
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+
+    assert_equals(_this, listener);
+    assert_equals(_event.media, mql.media);
+    assert_equals(_event.matches, mql.matches);
+}, "calls handleEvent method of event listener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    mql.addListener({
+        get handleEvent() {
+            calls++;
+            return function() {};
+        },
+    });
+    assert_equals(calls, 0);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 2);
+}, "looks up handleEvent method on every event dispatch");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    const listener = () => {
+        calls++;
+    };
+
+    Object.defineProperty(listener, "handleEvent", {
+        get: t.unreached_func("handleEvent method should not be looked up on functions"),
+    });
+    mql.addListener(listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1);
+}, "doesn't look up handleEvent method on callable event listeners");
+
+const uncaught_error_test = async (t, mql, getHandleEvent) => {
+    const eventWatcher = new EventWatcher(t, window, "error", waitForChangesReported);
+    const errorPromise = eventWatcher.wait_for("error");
+
+    let calls = 0;
+    const listener = {
+        get handleEvent() {
+            calls++;
+            return getHandleEvent();
+        },
+    };
+
+    try {
+        mql.addListener(listener);
+        triggerMQLEvent(mql);
+
+        const event = await errorPromise;
+        throw event.error;
+    } finally {
+        assert_equals(calls, 1, "handleEvent property was not looked up");
+    }
+};
+
+promise_test(async t => {
+    const error = { name: "test" };
+    const mql = await createMQL(t);
+
+    return promise_rejects_exactly(t, error,
+        uncaught_error_test(t, mql, () => { throw error; }));
+}, "rethrows errors when getting handleEvent");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+    const global = getWindow(mql);
+    return promise_rejects_js(t, global.TypeError,
+                              uncaught_error_test(t, mql, () => false));
+}, "throws if handleEvent is falsy and not callable");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+    const global = getWindow(mql);
+    return promise_rejects_js(t, global.TypeError,
+                              uncaught_error_test(t, mql, () => "str"));
+}, "throws if handleEvent is thruthy and not callable");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-addListener-removeListener.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-addListener-removeListener.html
new file mode 100644
index 00000000000..0abdf71f2c9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-addListener-removeListener.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="flags" content="dom">
+<title>CSS Test: CSSOM View MediaQueryList::{add,remove}Listener</title>
+<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
+<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#the-mediaquerylist-interface">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/matchMedia.js"></script>
+<div id="log"></div>
+<script>
+"use strict";
+
+test(() => {
+    const mql = window.matchMedia("(min-width: 100px)");
+
+    mql.addListener(null);
+    mql.addListener(undefined);
+
+    mql.removeListener(null);
+    mql.removeListener(undefined);
+}, "EventListener parameter is optional");
+
+promise_test(async t => {
+    const iframe = await createIFrame(t, 200, 100);
+    const heightMQL = iframe.contentWindow.matchMedia("(max-height: 50px)");
+    const widthMQL = iframe.contentWindow.matchMedia("(min-width: 150px)");
+
+    let heightEvent;
+    let widthEvent;
+
+    heightMQL.addListener(event => {
+        heightEvent = event;
+    });
+    widthMQL.addListener(event => {
+        widthEvent = event;
+    });
+
+    assert_false(heightMQL.matches);
+    assert_true(widthMQL.matches);
+
+    iframe.height = "50"; // 200x100 => 200x50
+    await waitForChangesReported();
+
+    assert_equals(heightEvent.media, heightMQL.media);
+    assert_true(heightEvent.matches);
+    assert_true(heightMQL.matches);
+    assert_true(widthMQL.matches);
+
+    iframe.width = "100"; // 200x50 => 100x50
+    await waitForChangesReported();
+
+    assert_equals(widthEvent.media, widthMQL.media);
+    assert_false(widthEvent.matches);
+    assert_false(widthMQL.matches);
+    assert_true(heightMQL.matches);
+}, "listeners are called when <iframe> is resized");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let eventsCount = 0;
+    mql.addListener(() => {
+        eventsCount++;
+    });
+
+    for (let i = 1; i <= 10; i++) {
+        triggerMQLEvent(mql);
+        await waitForChangesReported();
+        assert_equals(eventsCount, i);
+    }
+}, "listeners are called correct number of times");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+    const calls = [];
+
+    mql.addListener(() => {
+        calls.push("1st");
+    });
+    mql.addListener(() => {
+        calls.push("2nd");
+    });
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+
+    assert_array_equals(calls, ["1st", "2nd"]);
+}, "listeners are called in order they were added");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let called = 0;
+    const listener = () => {
+        called++;
+    };
+
+    mql.addListener(listener);
+    mql.addListener(listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+
+    assert_equals(called, 1);
+}, "listener that was added twice is called only once");
+
+promise_test(async t => {
+    const iframe = await createIFrame(t, 100);
+    const media = `(min-width: 200px)`;
+
+    const mql1 = iframe.contentWindow.matchMedia(media);
+    const mql2 = iframe.contentWindow.matchMedia(media);
+    const calls = [];
+
+    mql2.addListener(() => {
+        calls.push("mql2");
+    });
+
+    mql1.addListener(() => {
+        calls.push("mql1");
+    });
+
+    iframe.width = "200"; // 100x100 => 200x100
+    await waitForChangesReported();
+
+    assert_array_equals(calls, ["mql1", "mql2"]);
+}, "listeners are called in order their MQLs were created");
+
+promise_test(async t => {
+    const iframe = await createIFrame(t, 200);
+    const media = `(max-height: 150px)`;
+
+    const mql1 = iframe.contentWindow.matchMedia(media);
+    const mql2 = iframe.contentWindow.matchMedia(media);
+
+    let calls = 0;
+    const listener = () => {
+        calls++;
+    };
+
+    mql1.addListener(listener);
+    mql2.removeListener(listener);
+
+    iframe.height = "50"; // 200x200 => 200x50
+    await waitForChangesReported();
+
+    assert_equals(calls, 1);
+}, "removing listener from one MQL doesn't remove it from all MQLs");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+    const listener = t.unreached_func("should not be called");
+
+    mql.addListener(listener);
+    mql.removeListener(listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+}, "MediaQueryList::removeListener removes added listener");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-change-event-matches-value.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-change-event-matches-value.html
new file mode 100644
index 00000000000..438056c62d2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-change-event-matches-value.html
@@ -0,0 +1,32 @@
+<!doctype html>
+<title>MediaQueryList.changed is correct for all lists in the document even during a change event handler</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1648839">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/matchMedia.js"></script>
+<body>
+<script>
+  promise_test(async t => {
+    // Create two identical media queries.
+    let mql = await createMQL(t);
+    let mql2 = getWindow(mql).matchMedia(mql.media);
+
+    let changeEvents = 0;
+
+    let check = t.step_func(function() {
+      changeEvents++;
+      assert_equals(mql.matches, mql2.matches, "Value of .matches should match"); // No pun intended
+    });
+
+    mql.addListener(check);
+    mql2.addListener(check);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+
+    assert_equals(changeEvents, 2, "Should've fired the change event in both MediaQueryLists");
+  });
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget-interop.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget-interop.html
new file mode 100644
index 00000000000..0d2e02f8042
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget-interop.html
@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="flags" content="dom">
+<title>CSS Test: CSSOM View MediaQueryList extends EventTarget (interop)</title>
+<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#the-mediaquerylist-interface">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/matchMedia.js"></script>
+<div id="log"></div>
+<script>
+"use strict";
+
+test(() => {
+    const mql = window.matchMedia("all");
+
+    let receivedEvent;
+    mql.addListener(event => {
+        receivedEvent = event;
+    });
+
+    const dispatchedEvent = new Event("change");
+    mql.dispatchEvent(dispatchedEvent);
+
+    assert_equals(receivedEvent, dispatchedEvent);
+}, "dispatchEvent triggers listener added with addListener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    const listener = {
+        handleEvent() {
+            calls++;
+        },
+    };
+
+    mql.addListener(listener);
+    mql.addEventListener("change", listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1, "triggerMQLEvent");
+
+    mql.dispatchEvent(new Event("change"));
+    assert_equals(calls, 2, "dispatchEvent");
+}, "listener added with addListener and addEventListener is called once");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    const listener = () => {
+        calls++;
+    };
+
+    mql.addListener(listener);
+    mql.addEventListener("change", listener, true);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 2, "triggerMQLEvent");
+
+    mql.dispatchEvent(new Event("change"));
+    assert_equals(calls, 4, "dispatchEvent");
+}, "listener added with addListener and addEventListener (capture) is called twice");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    const listener = {
+        handleEvent() {
+            calls++;
+        },
+    };
+
+    mql.addListener(listener);
+    mql.removeEventListener("change", listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 0, "triggerMQLEvent");
+
+    mql.dispatchEvent(new Event("change"));
+    assert_equals(calls, 0, "dispatchEvent");
+}, "removeEventListener removes listener added with addListener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    const listener = () => {
+        calls++;
+    };
+
+    mql.addListener(listener);
+    mql.removeEventListener("change", listener, true);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1, "triggerMQLEvent");
+
+    mql.dispatchEvent(new Event("change"));
+    assert_equals(calls, 2, "dispatchEvent");
+}, "removeEventListener (capture) doesn't remove listener added with addListener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    const listener = {
+        handleEvent() {
+            calls++;
+        },
+    };
+
+    mql.addEventListener("change", listener);
+    mql.removeListener(listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 0, "triggerMQLEvent");
+
+    mql.dispatchEvent(new Event("change"));
+    assert_equals(calls, 0, "dispatchEvent");
+}, "removeListener removes listener added with addEventListener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    const listener = () => {
+        calls++;
+    };
+
+    mql.addEventListener("change", listener, true);
+    mql.removeListener(listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1, "triggerMQLEvent");
+
+    mql.dispatchEvent(new Event("change"));
+    assert_equals(calls, 2, "dispatchEvent");
+}, "removeListener doesn't remove listener added with addEventListener (capture)");
+
+// See:
+//   * https://github.com/whatwg/dom/issues/746
+//   * https://bugzilla.mozilla.org/show_bug.cgi?id=1492446
+//   * https://bugs.chromium.org/p/chromium/issues/detail?id=949432
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = [];
+    mql.addListener(() => {
+        calls.push("addListener");
+    });
+    mql.addEventListener("change", {
+        handleEvent() {
+            calls.push("addEventListener");
+        },
+    }, true);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_array_equals(calls, ["addEventListener", "addListener"], "triggerMQLEvent");
+
+    calls = [];
+    mql.dispatchEvent(new Event("change"));
+    assert_array_equals(calls, ["addEventListener", "addListener"], "dispatchEvent");
+}, "capturing event listener fires before non-capturing listener at target");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget.html
new file mode 100644
index 00000000000..fa8b44f7de4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryList-extends-EventTarget.html
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="flags" content="dom">
+<title>CSS Test: CSSOM View MediaQueryList extends EventTarget</title>
+<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#the-mediaquerylist-interface">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/matchMedia.js"></script>
+<div id="log"></div>
+<script>
+"use strict";
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let _event;
+    mql.onchange = event => {
+        _event = event;
+    };
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(_event.media, mql.media);
+    assert_equals(_event.matches, mql.matches);
+}, "onchange adds listener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    mql.onchange = () => {
+        calls++;
+    };
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1);
+
+    mql.onchange = null;
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1);
+}, "onchange removes listener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    mql.addEventListener("change", {
+        handleEvent() {
+            calls++;
+        },
+    });
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1);
+}, 'listeners for "change" type are called');
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+    mql.addEventListener("matches", t.unreached_func("should not be called"));
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+}, 'listeners with different type are not called');
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let calls = 0;
+    mql.addEventListener("change", {
+        handleEvent() {
+            calls++;
+        },
+    }, {once: true});
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+    assert_equals(calls, 1);
+}, 'addEventListener "once" option is respected');
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+    const listener = t.unreached_func("should not be called");
+
+    mql.addEventListener("change", listener);
+    mql.removeEventListener("change", listener);
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+}, "removeEventListener removes listener");
+
+test(() => {
+    const mql = window.matchMedia("all");
+
+    let receivedEvent;
+    mql.addEventListener("custom", event => {
+        receivedEvent = event;
+        event.preventDefault();
+    }, true);
+
+    const dispatchedEvent = new CustomEvent("custom", {
+        cancelable: true,
+        detail: {},
+    });
+
+    const defaultAction = mql.dispatchEvent(dispatchedEvent);
+
+    assert_equals(receivedEvent, dispatchedEvent);
+    assert_false(defaultAction);
+}, "dispatchEvent works as expected");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryListEvent.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryListEvent.html
new file mode 100644
index 00000000000..afa885d549d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/MediaQueryListEvent.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="flags" content="dom">
+<title>CSS Test: CSSOM View MediaQueryListEvent</title>
+<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#mediaquerylistevent">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/matchMedia.js"></script>
+<div id="log"></div>
+<script>
+"use strict";
+
+test(() => {
+    assert_equals(new MediaQueryListEvent("test").type, "test");
+}, 'type can be different from "change"');
+
+test(() => {
+    const event = new MediaQueryListEvent("change");
+
+    assert_equals(event.media, "");
+    assert_false(event.matches);
+    assert_false(event.bubbles);
+    assert_false(event.cancelable);
+}, "init dictionary default values");
+
+test(() => {
+    const event = new MediaQueryListEvent("change", {
+        media: "test",
+        matches: true,
+        bubbles: true,
+        cancelable: true,
+    });
+
+    assert_equals(event.media, "test");
+    assert_true(event.matches);
+    assert_true(event.bubbles);
+    assert_true(event.cancelable);
+}, "init dictionary overrides");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let _event;
+    mql.addListener(event => {
+        _event = event;
+    });
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+
+    assert_true(_event instanceof getWindow(mql).MediaQueryListEvent);
+    assert_equals(_event.type, "change");
+    assert_false(_event.bubbles);
+    assert_false(_event.cancelable);
+}, "argument of addListener");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let _event;
+    mql.onchange = event => {
+        _event = event;
+    };
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+
+    assert_true(_event instanceof getWindow(mql).MediaQueryListEvent);
+    assert_equals(_event.type, "change");
+    assert_false(_event.bubbles);
+    assert_false(_event.cancelable);
+}, "argument of onchange");
+
+promise_test(async t => {
+    const mql = await createMQL(t);
+
+    let _event;
+    mql.addEventListener("change", event => {
+        _event = event;
+    });
+
+    triggerMQLEvent(mql);
+    await waitForChangesReported();
+
+    assert_true(_event instanceof getWindow(mql).MediaQueryListEvent);
+    assert_equals(_event.type, "change");
+    assert_false(_event.bubbles);
+    assert_false(_event.cancelable);
+}, 'constructor of "change" event');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-001.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-001.html
new file mode 100644
index 00000000000..f7fe478a619
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-001.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSSOM View - 6.1 - getBoundingClientRect tests</title>
+    <meta charset="utf-8">
+    <link rel="author" title="Chris Wu" href="mailto:pwx.frontend@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">
+    <meta name="flags" content="dom">
+    <script src="../../resources/testharness.js"></script>
+    <script src="../../resources/testharnessreport.js"></script>
+    <style type="text/css">
+        #testItem {
+            width: 279px;
+            height: 188px;
+            margin: 100px 0 0 178px;
+            background-color: purple;
+            font-size: 26px;
+            font-weight: bold;
+            text-align: center;
+            line-height: 188px;
+        }
+    </style>
+</head>
+<body>
+    <div id="testItem">test item</div>
+    <div id="log"></div>
+    <script>
+        var titem = document.getElementById('testItem').getBoundingClientRect();
+        test(
+            function(){
+                assert_equals(titem.bottom - titem.top, titem.height, "height should equal bottom minus top")
+            }, "getBoundingClientRect() should return a DOMRect where height=bottom-top"
+        );
+        test(
+            function(){
+                assert_equals(titem.right - titem.left, titem.width, "width should equal right minus left")
+            }, "getBoundingClientRect() should return a DOMRect where width=right-left"
+        )
+    </script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-002.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-002.html
new file mode 100644
index 00000000000..d275c572800
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-002.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSS Test (CSSOM View): getBoundingClientRect of element outside DOM</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-getclientrects">
+    <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Calling getBoundingClientRect on an element that is outside of the DOM (and therefore does not have an associated layout box) should result in an all-zeroes DOMRect and should definitely not throw an error.">
+    <script src="../../resources/testharness.js"></script>
+    <script src="../../resources/testharnessreport.js"></script>
+    <script>
+        test(
+            function () {
+                var rect = document.createElement('div').getBoundingClientRect();
+                assert_equals(rect.x, 0, "DOMRect's x should be zero");
+                assert_equals(rect.y, 0, "DOMRect's y should be zero");
+                assert_equals(rect.width, 0, "DOMRect's width should be zero");
+                assert_equals(rect.height, 0, "DOMRect's height should be zero");
+            },
+            "getBoundingClientRect on a newly-created Element not yet inserted into the DOM should return an all-zeroes DOMRect"
+        );
+    </script>
+</head>
+<body></body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-003.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-003.html
new file mode 100644
index 00000000000..e65960540d2
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getBoundingClientRect-003.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<title>{Element,Range}.prototype.getBoundingClientRect on SVG &lt;tspan&gt;</title>
+<link rel="stylesheet" type="text/css" href="../../fonts/ahem.css">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-range-getboundingclientrect">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<svg>
+  <text y="180" font-size="100" font-family="Ahem"
+        fill="lightblue">X<tspan fill="blue">XX</tspan></text>
+</svg>
+<script>
+  function check(object) {
+    let rect = object.getBoundingClientRect();
+    assert_equals(rect.left, 108, 'left');
+    assert_equals(rect.top, 108, 'top');
+    assert_equals(rect.width, 200, 'width');
+    assert_equals(rect.height, 100, 'height');
+  }
+  async_test(t => {
+    window.addEventListener("load", t.step_func_done(() => {
+      let tspan = document.querySelector('tspan');
+      check(tspan);
+    }));
+  }, document.title + ', Element');
+  async_test(t => {
+    window.addEventListener("load", t.step_func_done(() => {
+      let tspan = document.querySelector('tspan');
+      let range = new Range();
+      range.selectNode(tspan);
+      check(range);
+    }));
+  }, document.title + ', Range');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getClientRects-002.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getClientRects-002.html
new file mode 100644
index 00000000000..39c5c519db6
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getClientRects-002.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>CSSOM View - GetClientRects().length is the same regardless source new lines</title>
+  <link rel="help" href="https://drafts.csswg.org/cssom-view-1/#dom-element-getclientrects">
+  <script src="../../resources/testharness.js"></script>
+  <script src="../../resources/testharnessreport.js"></script>
+ </head>
+ <body>
+  <span id="single">
+   test test
+  </span><br/>
+  <span id="multiple">
+   test
+   test
+  </span>
+  <script>
+    test(function () {
+      const count = document.querySelector("#single").getClientRects().length;
+      const count2 = document.querySelector("#multiple").getClientRects().length;
+      assert_equals(count, 1, "count");
+      assert_equals(count2, 1, "count2");
+    });
+  </script>
+ </body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getClientRects.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getClientRects.html
new file mode 100644
index 00000000000..027e3bbd86f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-getClientRects.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>CSS Test (CSSOM View): getClientRects of element outside DOM</title>
+    <link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
+    <link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-getclientrects">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="Calling getClientRects on an element that is outside of the DOM (and therefore does not have an associated layout box) should result in an empty DOMRectList and should definitely not throw an error.">
+    <script src="../../resources/testharness.js"></script>
+    <script src="../../resources/testharnessreport.js"></script>
+    <script>
+        test(
+            function () {
+                var rectList = document.createElement('div').getClientRects();
+                assert_equals(rectList.length, 0, "DOMRectList should be empty");
+            },
+            "getClientRects on a newly-created Element not yet inserted into the DOM should return an empty DOMRectList"
+        );
+    </script>
+</head>
+<body></body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-001.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-001.html
new file mode 100644
index 00000000000..91ebfc8ab7f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-001.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>CSSOM View - 5 - extensions to the Document interface</title>
+    <link rel="author" title="Neils Christoffersen" href="mailto:neils.christoffersen@gmail.com">
+    <link rel="help" href="http://www.w3.org/TR/cssom-view/#extensions-to-the-document-interface">
+    <meta name="flags" content="dom">
+    <meta name="assert" content="elementFromPoint returns correct element">
+    <script src="../../resources/testharness.js"></script>
+    <script src="../../resources/testharnessreport.js"></script>
+    <style>
+    #targetDiv {
+        position: absolute;
+        top: 10;
+        left: 10;
+        height: 100px;
+        width: 100px;
+    }
+    </style>
+</head>
+<body>
+    <div id="myDiv"></div>
+    <div id="log"></div>
+    <div id="targetDiv">
+    </div>
+    <script>
+        var element = document.elementFromPoint(15, 15);
+
+        test ( function() {
+            assert_equals(element.id, "targetDiv", "elementFromPoint didn't return the correct element");
+        });
+    </script>
+</body>
+</html>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-002.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-002.html
new file mode 100644
index 00000000000..e28bb4fd0ae
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-002.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Checking whether dynamic changes to visibility interact correctly with
+  table anonymous boxes</title>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<style>
+#overlay {
+  display: table;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  z-index: 999
+}
+
+#wrapper { position: relative; }
+</style>
+<div id=log></div>
+<div id="wrapper">
+  <div id="overlay"><div></div></div>
+  <div id="target">Some text</div>
+</div>
+<script>
+  test(function() {
+    var t = document.querySelector("#target");
+    var rect = t.getBoundingClientRect();
+    var hit = document.elementFromPoint(rect.x + rect.width/2,
+                                        rect.y + rect.height/2);
+    assert_equals(hit, t.previousElementSibling,
+                  "Should hit the overlay first.");
+    t.previousElementSibling.style.visibility = "hidden";
+    hit = document.elementFromPoint(rect.x + rect.width/2,
+                                    rect.y + rect.height/2);
+    assert_equals(hit, t,
+                  "Should hit our target now that the overlay is hidden.");
+  });
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-003.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-003.html
new file mode 100644
index 00000000000..fe697dca3b4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementFromPoint-003.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Checking whether dynamic changes to visibility interact correctly with
+  table anonymous boxes</title>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<style>
+#overlay {
+  display: table;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  z-index: 999
+}
+
+#wrapper { position: relative; }
+</style>
+<div id=log></div>
+<div id="wrapper">
+  <div id="overlay"><div></div></div>
+  <div id="target">Some text</div>
+</div>
+<script>
+  test(function() {
+    // Make sure we have boxes constructed already.
+    document.body.offsetWidth;
+    var overlay = document.querySelector("#overlay");
+    overlay.insertBefore(document.createElement("div"), overlay.firstChild);
+    overlay.appendChild(document.createElement("div"));
+    // Make sure we have boxes constructed for those inserts/appends
+    document.body.offsetWidth;
+    overlay.firstChild.nextSibling.remove();
+    var t = document.querySelector("#target");
+    var rect = t.getBoundingClientRect();
+    var hit = document.elementFromPoint(rect.x + rect.width/2,
+                                        rect.y + rect.height/2);
+    assert_equals(hit, t.previousElementSibling,
+                  "Should hit the overlay first.");
+    t.previousElementSibling.style.visibility = "hidden";
+    hit = document.elementFromPoint(rect.x + rect.width/2,
+                                    rect.y + rect.height/2);
+    assert_equals(hit, t,
+                  "Should hit our target now that the overlay is hidden.");
+  });
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementScroll-002.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementScroll-002.html
new file mode 100644
index 00000000000..9fa9eaa1629
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementScroll-002.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>cssom-view - elementScroll - 002</title>
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrolltop">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollleft">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<div id="scroller1" style="height: 100px; width: 100px; overflow: scroll; background: red;">
+    <div style="background: green; margin-top: 100px; margin-left: 100px; width: 100px; height: 100px;"></div>
+</div>
+<div id="scroller2" style="height: 100px; width: 100px; overflow: hidden; background: red;">
+    <div style="background: green; margin-top: 100px; padding-left: 100px; width: 100px; height: 100px;"></div>
+</div>
+<div id="scroller3" style="height: 100px; width: 100px; overflow: scroll; background: red;">
+    <div style="background: green; padding-top: 100px; margin-left: 100px; width: 100px; height: 100px;"></div>
+</div>
+<div id="scroller4" style="height: 100px; width: 100px; overflow: hidden; background: red;">
+    <div style="background: green; padding-top: 100px; padding-left: 100px; width: 100px; height: 100px;"></div>
+</div>
+<script>
+    test(function () {
+        var scroller1 = document.getElementById("scroller1");
+
+        scroller1.scrollTop = 100;
+        scroller1.scrollLeft = 100;
+        assert_equals(scroller1.scrollTop, 100, "changed scrollTop should be 100");
+        assert_equals(scroller1.scrollLeft, 100, "changed scrollLeft should be 100");
+
+    }, "simple scroll with style: 'margin' and 'overflow: scroll'");
+    test(function () {
+        var scroller2 = document.getElementById("scroller2");
+
+        scroller2.scrollTop = 100;
+        scroller2.scrollLeft = 100;
+        assert_equals(scroller2.scrollTop, 100, "changed scrollTop should be 100");
+        assert_equals(scroller2.scrollLeft, 100, "changed scrollLeft should be 100");
+
+    }, "simple scroll with style: 'margin' and 'overflow: hidden'");
+    test(function () {
+        var scroller3 = document.getElementById("scroller3");
+
+        scroller3.scrollTop = 100;
+        scroller3.scrollLeft = 100;
+        assert_equals(scroller3.scrollTop, 100, "changed scrollTop should be 100");
+        assert_equals(scroller3.scrollLeft, 100, "changed scrollLeft should be 100");
+
+    }, "simple scroll with style: 'padding' and 'overflow: scroll'");
+    test(function () {
+        var scroller4 = document.getElementById("scroller4");
+
+        scroller4.scrollTop = 100;
+        scroller4.scrollLeft = 100;
+        assert_equals(scroller4.scrollTop, 100, "changed scrollTop should be 100");
+        assert_equals(scroller4.scrollLeft, 100, "changed scrollLeft should be 100");
+
+    }, "simple scroll with style: 'padding' and 'overflow: hidden'");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementScroll.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementScroll.html
new file mode 100644
index 00000000000..26a02fe6e95
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementScroll.html
@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>cssom-view - elementScroll</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<style>
+    #section {
+        width: 300px;
+        height: 500px;
+        /*position: absolute;*/
+        top: 16px;
+        left: 16px;
+        border: inset gray 3px;
+        overflow: hidden;
+        background: white;
+    }
+
+    #scrollable {
+        width: 400px;
+        height: 700px;
+        background: linear-gradient(135deg, red, blue);
+    }
+
+</style>
+
+<section id="section">
+    <div id="scrollable"></div>
+    <div id="unrelated"></div>
+</section>
+
+<script>
+    setup({explicit_done:true});
+    window.onload = function () {
+        var section = document.getElementById("section");
+        var unrelated = document.getElementById("unrelated");
+
+        test(function () {
+            assert_equals(section.scrollTop, 0, "initial scrollTop should be 0");
+            assert_equals(section.scrollLeft, 0, "initial scrollLeft should be 0");
+
+            section.scrollTop  = 30;
+            section.scrollLeft = 40;
+
+            assert_equals(section.scrollTop, 30, "changed scrollTop should be 40");
+            assert_equals(section.scrollLeft, 40, "changed scrollLeft should be 40");
+            assert_equals(unrelated.scrollTop, 0, "unrelated element should not scroll");
+            assert_equals(unrelated.scrollLeft, 0, "unrelated element should not scroll");
+        },  "Element scrollTop/Left getter/setter test");
+
+        test(function () {
+            section.scroll(50, 60);
+
+            assert_equals(section.scrollLeft, 50, "changed scrollLeft should be 50");
+            assert_equals(section.scrollTop, 60, "changed scrollTop should be 60");
+        },  "Element scroll test (two arguments)");
+
+        test(function () {
+            section.scroll({left: 55, top: 65});
+
+            assert_equals(section.scrollLeft, 55, "changed scrollLeft should be 55");
+            assert_equals(section.scrollTop, 65, "changed scrollTop should be 65");
+
+            section.scroll({left: 85});
+
+            assert_equals(section.scrollLeft, 85, "changed scrollLeft should be 85");
+            assert_equals(section.scrollTop, 65, "scrollTop should stay at 65");
+
+            section.scroll({top: 75});
+
+            assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
+            assert_equals(section.scrollTop, 75, "changed scrollTop should be 75");
+
+            section.scroll({});
+
+            assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
+            assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");
+
+            section.scroll();
+
+            assert_equals(section.scrollLeft, 85, "scrollLeft should stay at 85");
+            assert_equals(section.scrollTop, 75, "scrollTop should stay at 75");
+        },  "Element scroll test (one argument)");
+
+        test(function () {
+            section.scrollTo(80, 70);
+
+            assert_equals(section.scrollLeft, 80, "changed scrollLeft should be 70");
+            assert_equals(section.scrollTop, 70, "changed scrollTop should be 80");
+        }, "Element scrollTo test (two arguments)");
+
+        test(function () {
+            section.scrollTo({left: 75, top: 85});
+
+            assert_equals(section.scrollLeft, 75, "changed scrollLeft should be 75");
+            assert_equals(section.scrollTop, 85, "changed scrollTop should be 85");
+
+            section.scrollTo({left: 65});
+
+            assert_equals(section.scrollLeft, 65, "changed scrollLeft should be 65");
+            assert_equals(section.scrollTop, 85, "scrollTop should stay at 85");
+
+            section.scrollTo({top: 55});
+
+            assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
+            assert_equals(section.scrollTop, 55, "changed scrollTop should be 55");
+
+            section.scrollTo({});
+
+            assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 65");
+            assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");
+
+            section.scrollTo();
+
+            assert_equals(section.scrollLeft, 65, "scrollLeft should stay at 55");
+            assert_equals(section.scrollTop, 55, "scrollTop should stay at 55");
+        },  "Element scrollTo test (one argument)");
+
+        test(function () {
+            var left = section.scrollLeft;
+            var top = section.scrollTop;
+
+            section.scrollBy(10, 20);
+
+            assert_equals(section.scrollLeft, left + 10, "increment of scrollLeft should be 10")
+            assert_equals(section.scrollTop, top + 20, "increment of scrollTop should be 20")
+        }, "Element scrollBy test (two arguments)");
+
+        test(function () {
+            var left = section.scrollLeft;
+            var top = section.scrollTop;
+
+            section.scrollBy({left: 5, top: 15});
+            left += 5
+            top += 15
+
+            assert_equals(section.scrollLeft, left, "increment of scrollLeft should be 5")
+            assert_equals(section.scrollTop, top, "increment of scrollTop should be 15")
+
+            section.scrollBy({left: -15});
+            left -= 15
+
+            assert_equals(section.scrollLeft, left, "decrement of scrollLeft should be 15")
+            assert_equals(section.scrollTop, top, "scrollTop should not be modified")
+
+            section.scrollBy({top: -5});
+            top -= 5;
+
+            assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
+            assert_equals(section.scrollTop, top, "decrement of scrollTop should be 5")
+
+            section.scrollBy({});
+
+            assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
+            assert_equals(section.scrollTop, top, "scrollTop should not be modified")
+
+            section.scrollBy();
+
+            assert_equals(section.scrollLeft, left, "scrollLeft should not be modified")
+            assert_equals(section.scrollTop, top, "scrollTop should not be modified")
+        }, "Element scrollBy test (one argument)");
+
+        test(function () {
+            section.scrollTop  = 1000;
+            section.scrollLeft = 1000;
+
+            assert_equals(section.scrollTop, 700 - 500, "changed scrollTop should be 200");
+            assert_equals(section.scrollLeft, 400 - 300, "changed scrollLeft should be 100");
+
+        }, "Element scroll maximum test");
+
+        done();
+    };
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementsFromPoint-simple.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementsFromPoint-simple.html
new file mode 100644
index 00000000000..bcd9f6920cf
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/elementsFromPoint-simple.html
@@ -0,0 +1,131 @@
+<!DOCTYPE HTML>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="resources/elementsFromPoint.js"></script>
+<style>
+html, body {
+    margin: 0;
+    padding: 0;
+}
+body {
+    height: 500px;
+}
+#simpleDiv {
+    width: 200px;
+    height: 200px;
+    background-color: rgba(0,0,255,0.5);
+}
+#divWithPseudo {
+    position: absolute;
+    left: 50px;
+    top: 50px;
+    width: 100px;
+    height: 100px;
+    background-color: rgba(255,0,0,0.5);
+}
+#divWithPseudo::before {
+    position: absolute;
+    left: 20px;
+    top: 20px;
+    width: 100px;
+    height: 100px;
+    content: "::before";
+    background-color: rgba(255,0,0,0.5);
+    z-index: 9999;
+}
+#divBetweenPseudo {
+    position: absolute;
+    left: 100px;
+    top: 100px;
+    width: 100px;
+    height: 100px;
+    background-color: rgba(0,255,0,0.5);
+}
+#withMargin {
+    margin-top: -15px;
+    width: 200px;
+    height: 200px;
+    background-color: rgba(0,0,0,0.5);
+}
+#inlineSpan {
+    float: right;
+    background-color: yellow;
+    width: 100px;
+    height: 1em;
+}
+#noPointerEvents {
+    position: absolute;
+    left: 50px;
+    top: 50px;
+    width: 100px;
+    height: 300px;
+    background-color: rgba(0,0,0,0.1);
+    pointer-events: none;
+}
+#threeD {
+    position: absolute;
+    transform: translate3d(-100px, -100px, 10px);
+    left: 140px;
+    top: 140px;
+    width: 200px;
+    height: 50px;
+    background-color: rgba(255,255,255,0.5);
+}
+</style>
+<div id="simpleDiv"></div>
+<div id="divWithPseudo"></div>
+<div id="divBetweenPseudo"></div>
+<div id="withMargin"><span id="inlineSpan"></span></div>
+<div id="noPointerEvents"></div>
+<div id="threeD"></div>
+<script>
+var body = document.body;
+var html = document.documentElement;
+test(function() {
+    checkElementsFromPointFourCorners('document', 'simpleDiv',
+        [simpleDiv, body, html],
+        [simpleDiv, body, html],
+        [withMargin, simpleDiv, body, html],
+        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
+}, "elementsFromPoint for each corner of a simple div");
+
+test(function() {
+    checkElementsFromPointFourCorners('document', 'divWithPseudo',
+        [threeD, divWithPseudo, simpleDiv, body, html],
+        [threeD, divWithPseudo, simpleDiv, body, html],
+        [divWithPseudo, simpleDiv, body, html],
+        [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html]);
+}, "elementsFromPoint for each corner of a div that has a pseudo-element");
+
+test(function() {
+    checkElementsFromPointFourCorners('document', 'divBetweenPseudo',
+        [divWithPseudo, divBetweenPseudo, divWithPseudo, simpleDiv, body, html],
+        [divBetweenPseudo, simpleDiv, body, html],
+        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
+        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html]);
+}, "elementsFromPoint for each corner of a div that is between another div and its pseudo-element");
+
+test(function() {
+    checkElementsFromPointFourCorners('document', 'withMargin',
+        [withMargin, simpleDiv, body, html],
+        [divBetweenPseudo, inlineSpan, withMargin, simpleDiv, body, html],
+        [withMargin, body, html],
+        [withMargin, body, html]);
+}, "elementsFromPoint for each corner of a div that has a margin");
+
+test(function() {
+    checkElementsFromPointFourCorners('document', 'noPointerEvents',
+        [threeD, divWithPseudo, simpleDiv, body, html],
+        [threeD, divWithPseudo, simpleDiv, body, html],
+        [withMargin, body, html],
+        [withMargin, body, html]);
+}, "elementsFromPoint for each corner of a div with pointer-events:none");
+
+test(function() {
+    checkElementsFromPointFourCorners('document', 'threeD',
+        [threeD, simpleDiv, body, html],
+        [threeD, body, html],
+        [threeD, simpleDiv, body, html],
+        [threeD, body, html]);
+}, "elementsFromPoint for each corner of a div with a 3d transform");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/offsetTopLeft-border-box.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/offsetTopLeft-border-box.html
new file mode 100644
index 00000000000..2dd173a17fb
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/offsetTopLeft-border-box.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlelement-interface">
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<link rel="stylesheet" type="text/css" href="../../fonts/ahem.css" />
+<style>
+
+.container {
+  position: relative;
+  font: 20px/1 Ahem;
+  width: 150px;
+  height: 100px;
+  padding: 2px 10px;
+  border-width: 3px 6px;
+  border-style: solid;
+  box-sizing: border-box;
+}
+
+.target { background: grey; }
+.hl { writing-mode:horizontal-tb; }
+.vlr { writing-mode:vertical-lr; }
+</style>
+<div id=tests>
+<div class="container hl">
+  <span class="target">x</span>
+</div>
+<div class="container vlr">
+  <span class="target">x</span>
+</div>
+<div class="container hl">
+  <div class="target">x</div>
+</div>
+<div class="container vlr">
+  <div class="target">x</div>
+</div>
+</div>
+<script>
+setup({explicit_done: true});
+onload = () => {
+  // Clone the above tests for the following 'display' types:
+  let display = ['inline-block', 'grid', 'inline-grid', 'flex', 'inline-flex', 'flow-root' ];
+  let tests = document.querySelector('#tests');
+  display.forEach((display) => {
+    let t = tests.cloneNode(true);
+    [...t.children].forEach((child) => {
+      child.setAttribute("style", "display:"+display);
+    });
+    document.body.appendChild(t);
+  });
+  // Check that all of them return an offset relative the padding edge.
+  var i = 0;
+  document.querySelectorAll('.target').forEach((target) => {
+    test(() => {
+      assert_equals(target.offsetLeft, 10, 'offsetLeft');
+      assert_equals(target.offsetTop, 2, 'offsetTop');
+    }, 'container: ' + i);
+    i++;
+  });
+  done();
+};
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resize-event-on-initial-layout-001.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resize-event-on-initial-layout-001.html
new file mode 100644
index 00000000000..48ad8d54d87
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resize-event-on-initial-layout-001.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<meta name="viewport" content="width=device-width">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#run-the-resize-steps"/>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<script>
+promise_test(async t => {
+  let gotResizeEvent = false;
+
+  on_event(window, 'resize', () => gotResizeEvent = true);
+
+  await new Promise(resolve  => requestAnimationFrame(resolve));
+  await new Promise(resolve  => requestAnimationFrame(resolve));
+
+  assert_false(gotResizeEvent, 'resize event should not be fired');
+}, 'resize events are not fired on the initial layout');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resize-event-on-initial-layout-002.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resize-event-on-initial-layout-002.html
new file mode 100644
index 00000000000..958d76b9f8f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resize-event-on-initial-layout-002.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#run-the-resize-steps"/>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<script>
+promise_test(async t => {
+  let gotResizeEvent = false;
+
+  on_event(window, 'resize', () => gotResizeEvent = true);
+
+  await new Promise(resolve  => requestAnimationFrame(resolve));
+  await new Promise(resolve  => requestAnimationFrame(resolve));
+
+  assert_false(gotResizeEvent, 'resize event should not be fired');
+}, 'resize events are not fired on the initial layout');
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resources/elementsFromPoint.js b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resources/elementsFromPoint.js
new file mode 100644
index 00000000000..ba986ef3f56
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resources/elementsFromPoint.js
@@ -0,0 +1,48 @@
+function nodeToString(node) {
+  var str = '';
+  if (node.nodeType == Node.ELEMENT_NODE) {
+    str += node.nodeName;
+    if (node.id)
+      str += '#' + node.id;
+    else if (node.class)
+      str += '.' + node.class;
+  } else if (node.nodeType == Node.TEXT_NODE) {
+    str += '\'' + node.data + '\'';
+  } else if (node.nodeType == Node.DOCUMENT_NODE) {
+    str += '#document';
+  }
+  return str;
+}
+
+function nodeListToString(nodes) {
+  var nodeString = '';
+
+  for (var i = 0; i < nodes.length; i++) {
+    var str = nodeToString(nodes[i]);
+    if (!str)
+      continue;
+    nodeString += str;
+    if (i + 1 < nodes.length)
+      nodeString += ', ';
+  }
+  return nodeString;
+}
+
+function assertElementsFromPoint(doc, x, y, expected) {
+  var query = doc + '.elementsFromPoint(' + x + ',' + y + ')';
+  var sequence = eval(query);
+  assert_equals(nodeListToString(sequence), nodeListToString(expected), query);
+}
+
+function checkElementsFromPointFourCorners(doc, element, expectedTopLeft, expectedTopRight, expectedBottomLeft, expectedBottomRight) {
+  var rect = eval(doc + '.getElementById(\'' + element + '\')').getBoundingClientRect();
+  var topLeft = {x: rect.left + 1, y: rect.top + 1};
+  var topRight = {x: rect.right - 1, y: rect.top + 1};
+  var bottomLeft = {x: rect.left + 1, y: rect.bottom - 1};
+  var bottomRight = {x: rect.right - 1, y: rect.bottom - 1};
+
+  assertElementsFromPoint(doc, topLeft.x, topLeft.y, expectedTopLeft);
+  assertElementsFromPoint(doc, topRight.x, topRight.y, expectedTopRight);
+  assertElementsFromPoint(doc, bottomLeft.x, bottomLeft.y, expectedBottomLeft);
+  assertElementsFromPoint(doc, bottomRight.x, bottomRight.y, expectedBottomRight);
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resources/matchMedia.js b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resources/matchMedia.js
new file mode 100644
index 00000000000..f8947e0472f
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/resources/matchMedia.js
@@ -0,0 +1,60 @@
+"use strict";
+
+{
+// private variables are defined with `const` so they don't leak outside this block statement
+const IFRAME_DEFAULT_SIZE = "200";
+const iframes = new WeakMap();
+
+// helpers are defined with `var` so they are globally accessible
+var createMQL = async t => {
+    const iframe = await createIFrame(t);
+    const mql = iframe.contentWindow.matchMedia(`(max-width: ${IFRAME_DEFAULT_SIZE}px)`);
+    assert_true(mql.matches, "MQL should match on newly created <iframe>");
+    iframes.set(mql, iframe);
+    return mql;
+};
+
+var createIFrame = (t, width = IFRAME_DEFAULT_SIZE, height = width) => {
+    assert_not_equals(document.body, null, "<body> element is missing");
+
+    const iframe = document.createElement("iframe");
+    iframe.srcdoc = "";
+    iframe.width = String(width);
+    iframe.height = String(height);
+    iframe.style.border = "none";
+
+    t.add_cleanup(() => {
+        document.body.removeChild(iframe);
+    });
+
+    return new Promise(resolve => {
+        iframe.addEventListener("load", () => {
+            iframe.contentDocument.body.offsetWidth; // reflow
+            resolve(iframe);
+        });
+
+        document.body.appendChild(iframe);
+    });
+};
+
+var triggerMQLEvent = mql => {
+    const iframe = iframes.get(mql);
+    assert_not_equals(iframe, undefined, "Passed MQL instance was not created with createMQL");
+    iframe.width = iframe.width === IFRAME_DEFAULT_SIZE ? "250" : IFRAME_DEFAULT_SIZE;
+};
+
+var getWindow = mql => {
+    const iframe = iframes.get(mql);
+    assert_not_equals(iframe, undefined, "Passed MQL instance was not created with createMQL");
+    return iframe.contentWindow;
+};
+
+var waitForChangesReported = () => {
+    return new Promise(resolve => {
+        requestAnimationFrame(() => {
+            requestAnimationFrame(resolve);
+        });
+    });
+};
+
+}
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-no-layout-box.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-no-layout-box.html
new file mode 100644
index 00000000000..9b39bdfeef0
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-no-layout-box.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>cssom-view - Scrolling element with no layout box</title>
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scroll">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#css-layout-box">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+
+<div style="display: none">
+  <div id="elem"></div>
+</div>
+
+<script>
+test(() => {
+  const elem = document.getElementById('elem');
+  elem.scroll(1, 2);
+
+  assert_equals(elem.scrollTop, 0, "scrollTop should be unchanged");
+  assert_equals(elem.scrollLeft, 0, "scrollLeft should be unchanged");
+}, "scrolling an element with no CSS layout box should have no effect");
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-001.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-001.html
new file mode 100644
index 00000000000..8e1d073d775
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-001.html
@@ -0,0 +1,23 @@
+<!-- quirks -->
+<title>CSSOM scrollingElement reflects the propagated scroll to viewport correctly</title>
+<meta charset="utf-8">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5601">
+<style>
+  :root {
+    overflow: clip;
+  }
+  body {
+    overflow: scroll;
+  }
+</style>
+<script>
+test(function() {
+  assert_equals(document.scrollingElement, null);
+});
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-002.html b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-002.html
new file mode 100644
index 00000000000..bb5bebd8bff
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/css/cssom-view/scroll-overflow-clip-quirks-002.html
@@ -0,0 +1,20 @@
+<!-- quirks -->
+<title>CSSOM scrollingElement reflects the propagated scroll to viewport correctly</title>
+<meta charset="utf-8">
+<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
+<link rel="author" title="Mozilla" href="https://mozilla.org">
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<link rel="help" href="https://drafts.csswg.org/css-overflow/#overflow-propagation">
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement">
+<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5601">
+<style>
+  body {
+    overflow: clip;
+  }
+</style>
+<script>
+test(function() {
+  assert_equals(document.scrollingElement, document.body);
+});
+</script>