2 files changed, 47 insertions, 0 deletions
diff --git a/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties-2.html b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties-2.html
new file mode 100644
index 0000000000..d896a851d8
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties-2.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html><style>
+* {
+    font: 20px SerenitySans;
+}
+:root {
+    --bg: red;
+    --width: 100px;
+}
+div::before {
+    display: inline-block;
+    height: 100px;
+    content: "";
+    background: var(--bg);
+    width: var(--width);
+}
+.b {
+    --bg: green;
+    --width: 200px;
+}
+.c::before {
+    --bg: green;
+    --width: 200px;
+}
+</style>
+Variable set by inline style of element:<br>
+<div class="a" style="--bg: green; --width: 200px;"></div>
+<br><br>
+Variable set by CSS rule matching element:<br>
+<div class="b"></div>
+<br><br>
+Variable set by CSS rule matching pseudo element:<br>
+<div class="c"></div>
diff --git a/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties.html b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties.html
new file mode 100644
index 0000000000..7114a04e1b
--- /dev/null
+++ b/Tests/LibWeb/Layout/input/pseudo-element-with-custom-properties.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html><style>
+* {
+    font: 20px SerenitySans;
+}
+.hello::before {
+    position: absolute;
+    height: 100px;
+    width: 100px;
+    --wide: 500px;
+    width: var(--wide);
+    --bg: orange;
+    background: var(--bg);
+    content: "";
+}
+</style><div class="hello">
+\ No newline at end of file