diff --git a/css/css-content/element-replacement-dynamic.html b/css/css-content/element-replacement-dynamic.html
index c025759094e8fa..cd200c64e92846 100644
--- a/css/css-content/element-replacement-dynamic.html
+++ b/css/css-content/element-replacement-dynamic.html
@@ -1,10 +1,14 @@
 <!DOCTYPE html>
+<html class="reftest-wait">
 <meta charset="utf-8">
 <title>The content CSS attribute can replace an element's contents dynamically</title>
 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
 <link rel="match" href="element-replacement-ref.html" />
 <link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property" />
-<meta name="assert" content"This test checks that the CSS content propertly can replace a normal element's contents when changed dynamically" />
+<meta name="assert" content="This test checks that the CSS content propertly can replace a normal element's contents when changed dynamically" />
+
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
 
 <style>
 #target {
@@ -18,7 +22,8 @@
 <div id="target">This text should not be visible</div>
 
 <script>
-const target = document.getElementById("target");
-getComputedStyle(target).width;
-target.className = "replaced";
+waitForAtLeastOneFrame().then(() => {
+  document.getElementById("target").className = "replaced";
+  takeScreenshot();
+});
 </script>
diff --git a/css/css-content/element-replacement-root-canvas-bg-from-body.html b/css/css-content/element-replacement-root-canvas-bg-from-body.html
new file mode 100644
index 00000000000000..33208123e08e84
--- /dev/null
+++ b/css/css-content/element-replacement-root-canvas-bg-from-body.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<title>When content CSS attribute can replace a document's root, the HTML body element's background does not become the canvas background</title>
+<link rel="match" href="element-replacement-root-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property" />
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#body-background" />
+<meta name="assert" content="When the content CSS attribute replaces a document's root, its contents do not create boxes, so the HTML body element's background can't affect the canvas background." />
+
+<style>
+:root {
+  content: url('resources/rect.svg');
+}
+body {
+  background-color: aquamarine;
+}
+</style>
+
+<p>This text should not be visible</p>
diff --git a/css/css-content/element-replacement-root-canvas-bg-ref.html b/css/css-content/element-replacement-root-canvas-bg-ref.html
new file mode 100644
index 00000000000000..117080acd2507a
--- /dev/null
+++ b/css/css-content/element-replacement-root-canvas-bg-ref.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<title>Reference for the content CSS attribute can replace a document's root</title>
+
+<style>
+:root {
+    background-color: aquamarine;
+}
+body {
+  margin: 0;
+}
+</style>
+
+<img src="resources/rect.svg" />
diff --git a/css/css-content/element-replacement-root-canvas-bg.html b/css/css-content/element-replacement-root-canvas-bg.html
new file mode 100644
index 00000000000000..24f6f3e918f10b
--- /dev/null
+++ b/css/css-content/element-replacement-root-canvas-bg.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<title>When content CSS attribute can replace a document's root, its canvas still becomes the canvas background</title>
+<link rel="match" href="element-replacement-root-canvas-bg-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property" />
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#root-background" />
+<meta name="assert" content="When the content CSS attribute replaces a document's root, it does not affect the fact that the root's background becomes the canvas background" />
+
+<style>
+:root {
+  content: url('resources/rect.svg');
+  background-color: aquamarine;
+}
+</style>
+
+<p>This text should not be visible</p>
diff --git a/css/css-content/element-replacement-root-ref.html b/css/css-content/element-replacement-root-ref.html
new file mode 100644
index 00000000000000..f450cae0ee9dd2
--- /dev/null
+++ b/css/css-content/element-replacement-root-ref.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<title>Reference for the content CSS attribute can replace a document's root</title>
+
+<style>
+body {
+  margin: 0;
+}
+</style>
+
+<img src="resources/rect.svg" />
diff --git a/css/css-content/element-replacement-root.html b/css/css-content/element-replacement-root.html
new file mode 100644
index 00000000000000..baa23121729cb1
--- /dev/null
+++ b/css/css-content/element-replacement-root.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>The content CSS attribute can replace a document's root</title>
+<link rel="match" href="element-replacement-root-ref.html" />
+<link rel="help" href="https://drafts.csswg.org/css-content-3/#content-property" />
+<meta name="assert" content="This test checks that the CSS content propertly can replace the contents of a document's root" />
+
+<style>
+:root {
+  content: url('resources/rect.svg');
+}
+</style>
+
+<p>This text should not be visible</p>
