mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 07:47:37 +00:00
Base: Add media-queries test page
This commit is contained in:
parent
9c5430b9ee
commit
b4833bf2a3
2 changed files with 107 additions and 0 deletions
106
Base/res/html/misc/media-queries.html
Normal file
106
Base/res/html/misc/media-queries.html
Normal 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>
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue