mirror of
https://github.com/servo/servo.git
synced 2025-07-03 05:23:38 +01:00
132 lines
3.2 KiB
HTML
132 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Cascade Test: import conditions</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-cascade-5/#import-conditions">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
@layer {
|
|
.target { color: red; }
|
|
}
|
|
</style>
|
|
<div id="target" class="target"></div>
|
|
<script>
|
|
const testCases = [
|
|
{
|
|
importCondition: "supports(display:block)",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports((display:flex))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports((display:block) and (display:flex))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports((display:block) and (foo:bar))",
|
|
matches: false
|
|
},
|
|
{
|
|
importCondition: "supports((display:block) or (display:flex))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports((display:block) or (foo:bar))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(not (display: flex))",
|
|
matches: false
|
|
},
|
|
{
|
|
importCondition: "supports(display: block !important)",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(foo:bar)",
|
|
matches: false
|
|
},
|
|
{
|
|
importCondition: "supports(display:block) (width >= 0px)",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "(width >= 0px) supports(foo:bar)",
|
|
matches: false
|
|
},
|
|
{
|
|
importCondition: "(width >= 0px) supports(display:block)",
|
|
matches: false
|
|
},
|
|
|
|
// selector()
|
|
{
|
|
importCondition: "supports(selector(a))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(selector(p a))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(selector(p > a))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(selector(p + a))",
|
|
matches: true
|
|
},
|
|
|
|
// font-tech()
|
|
{
|
|
importCondition: "supports(font-tech(color-COLRv1))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(font-tech(invalid))",
|
|
matches: false
|
|
},
|
|
|
|
// font-format()
|
|
{
|
|
importCondition: "supports(font-format(opentype))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(font-format(woff))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "supports(font-format(invalid))",
|
|
matches: false
|
|
},
|
|
{
|
|
importCondition: "layer(A.B) supports(font-format(opentype))",
|
|
matches: true
|
|
},
|
|
{
|
|
importCondition: "layer supports(selector(a))",
|
|
matches: true
|
|
},
|
|
];
|
|
let target = document.getElementById("target");
|
|
for (let testCase of testCases) {
|
|
promise_test(async t => {
|
|
let styleElement = document.createElement("style");
|
|
styleElement.innerText = "@import url(data:text/css,.target{color:green}) " + testCase.importCondition + ";";
|
|
|
|
await new Promise(resolve => {
|
|
styleElement.onload = resolve;
|
|
styleElement.onerror = resolve;
|
|
document.head.appendChild(styleElement);
|
|
});
|
|
|
|
try {
|
|
assert_equals(getComputedStyle(target).color, testCase.matches ? "rgb(0, 128, 0)" : "rgb(255, 0, 0)");
|
|
} finally {
|
|
styleElement.remove();
|
|
}
|
|
}, testCase.importCondition + " is " + (testCase.matches ? "" : "not ") + "a valid import condition");
|
|
}
|
|
</script>
|