system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 18:15:58 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Base: Add ratio tests to media-query test page

Browse source 
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.
This commit is contained in:
Sam Atkins 2022-03-06 19:17:42 +00:00 committed by Andreas Kling
parent deea129b8c
commit 2dad3dca9a
1 changed files with 47 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
Base/res/html/misc/media-queries.html
View file

@ -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>