diff --git a/Base/res/html/misc/media-queries.html b/Base/res/html/misc/media-queries.html
index 6946240d9f..07344a6a0d 100644
--- a/Base/res/html/misc/media-queries.html
+++ b/Base/res/html/misc/media-queries.html
@@ -4,9 +4,13 @@
     <meta charset="UTF-8">
     <title>Media queries</title>
     <style>
+        p {
+            border: 1px solid black;
+            background-color: red;
+        }
+
         .negative {
             background-color: lime;
-            border: 1px solid black;
         }
 
         @media not all {
@@ -30,132 +34,147 @@
         @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 only all and (width > 399px) {
             .size-min-range {
                 background-color: lime;
-                border: 1px solid black;
             }
         }
 
         @media (max-width: 1000px) {
             .size-max {
                 background-color: lime;
-                border: 1px solid black;
             }
         }
 
         @media (1001px > width) {
             .size-max-range {
                 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 (400px <= width <= 1000px) {
             .size-range-syntax {
                 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;
             }
         }
 
         @media (width >= 80em) {
             .em {
                 background-color: lime;
-                border: 1px solid black;
             }
         }
 
         @media (width < 100vh) {
             .viewport {
                 background-color: lime;
-                border: 1px solid black;
+            }
+        }
+
+        @media (aspect-ratio < 4 / 3) {
+            .aspect-ratio {
+                background-color: lime;
+            }
+        }
+        @media (aspect-ratio >= 2) {
+            .aspect-ratio-integer {
+                background-color: lime;
+            }
+        }
+        @media (aspect-ratio < 0.5) {
+            .aspect-ratio-decimal {
+                background-color: lime;
             }
         }
     </style>
 </head>
 <body>
-    <p id="interactive">
+    <div id="interactive">
         I don't know how wide the page is. <code>window.matchMedia("(min-width: 800px)")</code> is not working. :^(
-    </p>
+    </div>
     <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.
+        This should be green 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>.
+        This should be green 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.
+        This should be green if the window is at least 400px wide.
     </p>
     <p class="size-min-range">
-        This should be green, with a black border and black text, if the window is at least 400px wide, and we understand range syntax.
+        This should be green if the window is at least 400px wide, and we understand range syntax.
     </p>
     <p class="size-max">
-        This should be green, with a black border and black text, if the window is at most 1000px wide.
+        This should be green if the window is at most 1000px wide.
     </p>
     <p class="size-max-range">
-        This should be green, with a black border and black text, if the window is at most 1000px wide, and we understand range syntax.
+        This should be green if the window is at most 1000px wide, and we understand range syntax.
     </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.
+        This should be green if the window is between 400px and 1000px wide.
     </p>
     <p class="size-range-syntax">
-        This should be green, with a black border and black text, if the window is between 400px and 1000px wide, and we understand range syntax.
+        This should be green if the window is between 400px and 1000px wide, and we understand range syntax.
     </p>
     <p class="color">
-        This should be green, with a black border and black text, if we detected the <code>color</code> feature.
+        This should be green 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>.
+        This should be green 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>.
+        This should be green 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>
 
     <h2>Relative lengths</h2>
     <p class="em">
-        This should be green, with a black border and black text, if the window is wider than 80em.
+        This should be green if the window is wider than 80em.
     </p>
     <p class="viewport">
-        This should be green, with a black border and black text, if the window is taller than it is wide.
+        This should be green if the window is taller than it is wide.
+    </p>
+
+    <h2>Ratio</h2>
+    <p class="aspect-ratio">
+        This should be green if the viewport aspect-ratio is less than 4/3. (So, less wide than a 4:3 ratio.)
+    </p>
+    <p class="aspect-ratio-integer">
+        This should be green if the viewport aspect-ratio is at least 2. (So, at least twice as wide as it is tall.)
+    </p>
+    <p class="aspect-ratio-decimal">
+        This should be green if the viewport aspect-ratio is less than 0.5. (So, at least twice as tall as it is wide.)
     </p>
 
     <script>
