mirror of
https://github.com/RGBCube/serenity
synced 2025-10-31 00:42:44 +00:00
7880718fa8
This is defined in https://www.w3.org/TR/css-conditional-4/#at-supports-ext which just became a CR. :^)
193 lines
6 KiB
HTML
193 lines
6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CSS.supports()</title>
|
|
<style>
|
|
@supports (color: green) {
|
|
.p1 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports (color: green) and (width: 50px) {
|
|
.p2 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports (color: green) or (flogwizzle: purple) {
|
|
.p3 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports (not (flogwizzle: purple)) {
|
|
.p4 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
/* Selectors */
|
|
@supports selector(.simple) {
|
|
.p5 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports selector(a#more > .complicated.case:nth-child(42)) {
|
|
.p6 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports selector(.easy) or selector(.....nope) {
|
|
.p7 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
.negative {
|
|
background-color: red;
|
|
}
|
|
@supports (not (color: green)) {
|
|
.n1 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports (color: green) and (width: 50px) or (color: green) {
|
|
.n2 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports (width: yellow) or (height: green) {
|
|
.n3 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports (flogwizzle: purple) {
|
|
.n4 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports selector(.....nope) {
|
|
.n5 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports selector(::-webkit-input-placeholder) {
|
|
.n6 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
@supports selector(32) or selector(thing[foo??????bar]) {
|
|
.n7 {
|
|
background-color: lime;
|
|
}
|
|
}
|
|
|
|
.success {
|
|
background-color: lime;
|
|
}
|
|
.failure {
|
|
background-color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>These should all be green</h1>
|
|
<p class="p1">@supports (color: green)</p>
|
|
<p class="p2">@supports (color: green) and (width: 50px)</p>
|
|
<p class="p3">@supports (color: green) or (flogwizzle: purple)</p>
|
|
<p class="p4">@supports (not (flogwizzle: purple))</p>
|
|
<p class="p5">@supports selector(.simple)</p>
|
|
<p class="p6">@supports selector(a#more > .complicated.case:nth-child(42))</p>
|
|
<p class="p7">@supports selector(.easy) or selector(.....nope)</p>
|
|
|
|
<h1>These should all be red</h1>
|
|
<p class="negative n1">@supports (not (color: green))</p>
|
|
<p class="negative n2">@supports (color: green) and (width: 50px) or (color: green)</p>
|
|
<p class="negative n3">@supports (width: yellow) or (height: green)</p>
|
|
<p class="negative n4">@supports (flogwizzle: purple)</p>
|
|
<p class="negative n5">@supports selector(.....nope)</p>
|
|
<p class="negative n6">@supports selector(::-webkit-input-placeholder)</p>
|
|
<p class="negative n7">@supports selector(32) or selector(thing[foo??????bar])</p>
|
|
|
|
<h1>Testing CSS.supports(property, value)</h1>
|
|
<p>These should all be green, meaning they returned true</p>
|
|
<ul id="property-success">
|
|
</ul>
|
|
<p>These should all be red, meaning they returned false</p>
|
|
<ul id="property-failure">
|
|
</ul>
|
|
|
|
<h1>Testing CSS.supports(string)</h1>
|
|
<p>These should all be green, meaning they returned true</p>
|
|
<ul id="output-success">
|
|
</ul>
|
|
<p>These should all be red, meaning they returned false</p>
|
|
<ul id="output-failure">
|
|
</ul>
|
|
|
|
<script>
|
|
let property_success = document.getElementById("property-success");
|
|
let property_should_succeed = [
|
|
["color", "green"],
|
|
["width", "100%"],
|
|
["border", "3px solid black"]
|
|
];
|
|
for (let it of property_should_succeed) {
|
|
let success = CSS.supports(it[0], it[1]);
|
|
let li = document.createElement("li");
|
|
li.innerText = it[0] + ": " + it[1];
|
|
li.className = success ? "success" : "failure";
|
|
property_success.appendChild(li);
|
|
}
|
|
|
|
let property_failure = document.getElementById("property-failure");
|
|
let property_should_fail = [
|
|
["color", "20px"],
|
|
["width", "orange"],
|
|
["border", "9"]
|
|
];
|
|
for (let it of property_should_fail) {
|
|
let success = CSS.supports(it[0], it[1]);
|
|
let li = document.createElement("li");
|
|
li.innerText = it[0] + ": " + it[1];
|
|
li.className = success ? "success" : "failure";
|
|
property_failure.appendChild(li);
|
|
}
|
|
|
|
let output_success = document.getElementById("output-success");
|
|
let should_succeed = [
|
|
"color: green",
|
|
"(color: green) and (width: 50px)",
|
|
"(color: green) or (flogwizzle: purple)",
|
|
"not (flogwizzle: purple)",
|
|
"selector(.simple)",
|
|
"selector(a#more > .complicated.case:nth-child(42))",
|
|
"selector(.easy) or selector(.....nope)"
|
|
];
|
|
for (let text of should_succeed) {
|
|
let success = CSS.supports(text);
|
|
let li = document.createElement("li");
|
|
li.innerText = text;
|
|
li.className = success ? "success" : "failure";
|
|
output_success.appendChild(li);
|
|
}
|
|
|
|
let output_failure = document.getElementById("output-failure");
|
|
let should_fail = [
|
|
"not (color: green)",
|
|
"(color: green) and (width: 50px) or (color: green)",
|
|
"(width: yellow) or (height: green)",
|
|
"flogwizzle: purple",
|
|
"selector(.....nope)",
|
|
"selector(::-webkit-input-placeholder)",
|
|
"selector(32) or selector(thing[foo??????bar])"
|
|
];
|
|
for (let text of should_fail) {
|
|
let success = CSS.supports(text);
|
|
let li = document.createElement("li");
|
|
li.innerText = text;
|
|
li.className = success ? "success" : "failure";
|
|
output_failure.appendChild(li);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|