diff --git a/Base/res/html/misc/media-queries.html b/Base/res/html/misc/media-queries.html
new file mode 100644
index 0000000000..1a8f11229b
--- /dev/null
+++ b/Base/res/html/misc/media-queries.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Media queries</title>
+    <style>
+        .negative {
+            background-color: lime;
+            border: 1px solid black;
+        }
+
+        @media not all {
+            .negative {
+                background-color: red !important;
+            }
+        }
+
+        @media print {
+            .negative {
+                border: 5px solid magenta !important;
+            }
+        }
+
+        @media huh {
+            .negative {
+                color: yellow;
+            }
+        }
+
+        @media screen {
+            .screen {
+                background-color: lime;
+                border: 1px solid black;
+            }
+        }
+
+        @media only all and (min-width: 400px) {
+            .size-min {
+                background-color: lime;
+                border: 1px solid black;
+            }
+        }
+
+        @media (max-width: 1000px) {
+            .size-max {
+                background-color: lime;
+                border: 1px solid black;
+            }
+        }
+
+        @media (min-width: 400px) and (max-width: 1000px) {
+            .size-range {
+                background-color: lime;
+                border: 1px solid black;
+            }
+        }
+
+        @media (color) {
+            .color {
+                background-color: lime;
+                border: 1px solid black;
+            }
+        }
+
+        @media (not (not (color))) {
+            .color-2 {
+                background-color: lime;
+                border: 1px solid black;
+            }
+        }
+
+        @media (color) or ((color) and ((color) or (color) or (not (color)))) {
+            .deeply-nested {
+                background-color: lime;
+                border: 1px solid black;
+            }
+        }
+    </style>
+</head>
+<body>
+    <p class="negative">
+        This should be green, with a black border and black text, if we are correctly ignoring <code>@media</code> rules that do not apply.
+    </p>
+    <p class="screen">
+        This should be green, with a black border and black text, if we are correctly applying <code>@media screen</code>.
+    </p>
+    <p class="size-min">
+        This should be green, with a black border and black text, if the window is at least 400px wide.
+    </p>
+    <p class="size-max">
+        This should be green, with a black border and black text, if the window is at most 1000px wide.
+    </p>
+    <p class="size-range">
+        This should be green, with a black border and black text, if the window is between 400px and 1000px wide.
+    </p>
+    <p class="color">
+        This should be green, with a black border and black text, if we detected the <code>color</code> feature.
+    </p>
+    <p class="color-2">
+        This should be green, with a black border and black text, if we detected the <code>color</code> feature and we understand <code>not</code>.
+    </p>
+    <p class="color-2">
+        This should be green, with a black border and black text, if we detected the <code>color</code> feature and a deeply nested query: <code>(color) or ((color) and ((color) or (color) or (not (color))))</code>.
+    </p>
+</body>
+</html>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 8f93bed723..30225b9023 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -115,6 +115,7 @@
             <li><a href="palette.html">system palette color css extension</a></li>
             <li><a href="calc.html">calc()</a></li>
             <li><a href="css-import.html">@import</a></li>
+            <li><a href="media-queries.html">@media queries</a></li>
             <li><a href="margin-collapse-1.html">margin collapsing 1</a></li>
             <li><a href="margin-collapse-2.html">margin collapsing 2</a></li>
             <li><a href="position-absolute-from-edges.html">position: absolute, offset from edges</a></li>
