diff options
| author | Sam Atkins <atkinssj@serenityos.org> | 2022-02-15 16:05:54 +0000 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-02-15 23:31:42 +0100 |
| commit | 50cc008efd8aff26d9eb63070811c05c78b00bbe (patch) | |
| tree | 610cdd0cc51d7240d50c28b0e9aefe8314994c47 | |
| parent | 148efd7de77cba661307f9800deb23abd7e22725 (diff) | |
| download | serenity-50cc008efd8aff26d9eb63070811c05c78b00bbe.zip | |
Base: Add relative-length tests to media-query test page
| -rw-r--r-- | Base/res/html/misc/media-queries.html | 22 |
1 files changed, 22 insertions, 0 deletions
diff --git a/Base/res/html/misc/media-queries.html b/Base/res/html/misc/media-queries.html index acfec62f2b..6946240d9f 100644 --- a/Base/res/html/misc/media-queries.html +++ b/Base/res/html/misc/media-queries.html @@ -96,6 +96,20 @@ 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; + } + } </style> </head> <body> @@ -136,6 +150,14 @@ 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> + <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. + </p> + <p class="viewport"> + This should be green, with a black border and black text, if the window is taller than it is wide. + </p> + <script> let mql = window.matchMedia("(min-width: 800px)"); function update_match_text(input) { |