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