diff options
| author | Sam Atkins <atkinssj@serenityos.org> | 2022-03-06 19:17:42 +0000 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-03-07 13:42:25 +0100 |
| commit | 2dad3dca9a133d8b1ca301271a73d45b5c1c370e (patch) | |
| tree | 95301e2e953bac55d0fb93f2a5fdf8e426e9d742 /Base/res | |
| parent | deea129b8c730e717dc1a83c2eafa81b0e2b34ec (diff) | |
| download | serenity-2dad3dca9a133d8b1ca301271a73d45b5c1c370e.zip | |
Base: Add ratio tests to media-query test page
Note that only the first test actually functions currently.
Single-number ratios instead get parsed as a `<number>`, and will do
until the parser gets smarter. (The alternative, where all
single-numbers get parsed as `<ratio>`, does make the tests succeed,
but numbers are more common than ratios so I have given numbers
preference for now.)
Also simplified the styling and text a bit. Now, red = fail, green =
success. No more "unstyled = fail" stuff.
Diffstat (limited to 'Base/res')
| -rw-r--r-- | Base/res/html/misc/media-queries.html | 75 |
1 files changed, 47 insertions, 28 deletions
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> |