RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 07:47:37 +00:00
Code Issues Activity Actions

Base: Add media-queries test page

Browse source
This commit is contained in:
Sam Atkins 2021-09-29 15:49:27 +01:00 • committed by Andreas Kling
parent 9c5430b9ee
commit b4833bf2a3
2 changed files with 107 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

106
Base/res/html/misc/media-queries.html Normal file
View file

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

1
Base/res/html/misc/welcome.html
View file

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