RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 15:12:45 +00:00
Code Issues Activity Actions

Base: Add CSS.supports / @supports {} test-page

Browse source
This commit is contained in:
Sam Atkins 2021-10-08 15:34:51 +01:00 • committed by Andreas Kling
parent 2b67f87629
commit 2a2efdedf7
2 changed files with 148 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

147
Base/res/html/misc/supports.html Normal file
View file

@ -0,0 +1,147 @@
<!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;
}
}
.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;
}
}
.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>
<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>
<h1>Testing CSS.supports(property, value)</h1>
<ul id="property-success">
</ul>
<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)"
];
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"
];
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>

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

@ -76,6 +76,7 @@
<ul>
<li><h3>CSSOM</h3></li>
<li><a href="computed-style.html">Computed style</a></li>
<li><a href="supports.html">CSS.supports() and @supports</a></li>
<li><h3>Selectors</h3></li>
<li><a href="selectors.html">Selectors</a></li>
<li><a href="attrselectors.html">Attribute selectors</a></li>