Tests: Import some @import tests

This commit is contained in:
Sam Atkins 2025-04-08 18:21:29 +01:00
parent 97cca416f6
commit 42adc1e18e
7 changed files with 546 additions and 0 deletions

View file

@ -0,0 +1,28 @@
Harness status: OK
Found 22 tests
5 Pass
17 Fail
Pass @import url("nonexist.css") supports(); should be an invalid import rule due to an invalid supports() declaration
Pass @import url("nonexist.css") supports(foo: bar); should be an invalid import rule due to an invalid supports() declaration
Fail @import url("nonexist.css") supports(display:block); should be a valid supports() import rule
Fail @import url("nonexist.css") supports((display:flex)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(not (display: flex)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports((display: flex) and (display: block)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports((display: flex) or (display: block)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports((display: flex) or (foo: bar)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(display: block !important); should be a valid supports() import rule
Pass @import url("nonexist.css") layer supports(); should be an invalid import rule due to an invalid supports() declaration
Pass @import url("nonexist.css") layer supports(foo: bar); should be an invalid import rule due to an invalid supports() declaration
Fail @import url("nonexist.css") layer(A) supports((display: flex) or (foo: bar)); should be a valid supports() import rule
Fail @import url("nonexist.css") layer(A.B) supports((display: flex) and (foo: bar)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(selector(a)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(selector(p a)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(selector(p > a)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(selector(p + a)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(font-tech(color-colrv1)); should be a valid supports() import rule
Fail @import url("nonexist.css") supports(font-format(opentype)); should be a valid supports() import rule
Fail @import url(nonexist.css) supports(display:block); should be a valid supports() import rule
Fail @import "nonexist.css" supports(display:block); should be a valid supports() import rule
Pass @import url("nonexist.css") supports; should still be a valid import rule with an invalid supports() declaration

View file

@ -0,0 +1,40 @@
Harness status: OK
Found 34 tests
30 Pass
4 Fail
Pass @media is CSSGroupingRule
Pass @media rule type
Pass Empty @media rule length
Fail insertRule of @import into @media
Pass insertRule into empty @media at bad index
Pass insertRule into @media updates length
Pass insertRule of valid @media into @media
Pass insertRule of valid style rule into @media
Fail insertRule of invalid @media into @media
Pass insertRule of empty string into @media
Pass insertRule of valid @media rule followed by garbage into @media
Pass insertRule of valid style rule followed by garbage into @media
Pass insertRule of mutiple valid @media into @media
Pass insertRule of valid style rulle followed by valid @media into @media
Pass insertRule of valid style rule followed by valid @media into @media
Pass insertRule of two valid style rules into @media
Pass Return value of insertRule into @media
Pass @supports is CSSGroupingRule
Pass @supports rule type
Pass Empty @supports rule length
Fail insertRule of @import into @supports
Pass insertRule into empty @supports at bad index
Pass insertRule into @supports updates length
Pass insertRule of valid @media into @supports
Pass insertRule of valid style rule into @supports
Fail insertRule of invalid @media into @supports
Pass insertRule of empty string into @supports
Pass insertRule of valid @media rule followed by garbage into @supports
Pass insertRule of valid style rule followed by garbage into @supports
Pass insertRule of mutiple valid @media into @supports
Pass insertRule of valid style rulle followed by valid @media into @supports
Pass insertRule of valid style rule followed by valid @media into @supports
Pass insertRule of two valid style rules into @supports
Pass Return value of insertRule into @supports

View file

@ -0,0 +1,17 @@
Harness status: OK
Found 11 tests
7 Pass
4 Fail
Pass CSSRule and CSSImportRule types
Pass Type of CSSRule#type and constant values
Pass Existence and writability of CSSRule attributes
Fail Values of CSSRule attributes
Pass Existence and writability of CSSImportRule attributes
Fail Values of CSSImportRule attributes
Fail CSSImportRule : MediaList mediaText attribute should be updated due to [PutForwards]
Fail CSSStyleDeclaration cssText attribute should be updated due to [PutForwards]
Pass StyleSheet : MediaList mediaText attribute should be updated due to [PutForwards]
Pass Existence and writability of CSSImportRule supportsText attribute
Pass Value of CSSImportRule supportsText attribute

View file

@ -0,0 +1,92 @@
<!doctype html>
<meta charset="utf-8">
<title>@import rule with supports parsing / serialization</title>
<link rel="author" href="mailto:oj@oojmed.com">
<link rel="help" href="https://drafts.csswg.org/css-cascade-4/#at-import">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
function setupSheet(rule) {
const style = document.createElement("style");
document.head.append(style);
const {sheet} = style;
const {cssRules} = sheet;
assert_equals(cssRules.length, 0, "Sheet should have no rules");
sheet.insertRule(rule);
assert_equals(cssRules.length, 1, "Sheet should have 1 rule");
return {sheet, cssRules};
}
function test_valid_supports_import(rule, serialized) {
if (serialized === undefined)
serialized = rule;
test(function() {
const {sheet, cssRules} = setupSheet(rule);
const serialization = cssRules[0].cssText;
assert_equals(serialization, serialized, 'serialization should be canonical');
sheet.deleteRule(0);
assert_equals(cssRules.length, 0, 'Sheet should have no rule');
sheet.insertRule(serialization);
assert_equals(cssRules.length, 1, 'Sheet should have 1 rule');
assert_equals(cssRules[0].cssText, serialization, 'serialization should round-trip');
}, rule + ' should be a valid supports() import rule');
}
function test_unsupported_supports_import(rule) {
test(function() {
const {sheet, cssRules} = setupSheet(rule);
sheet.deleteRule(0);
assert_equals(cssRules.length, 0, 'Sheet should have no rule');
}, rule + ' should still be a valid import rule with an invalid supports() declaration');
}
function test_invalid_supports_import(rule) {
test(function() {
const style = document.createElement("style");
document.head.append(style);
const {sheet} = style;
const {cssRules} = sheet;
assert_equals(cssRules.length, 0, "Sheet should have no rules");
}, rule + ' should be an invalid import rule due to an invalid supports() declaration');
}
test_invalid_supports_import('@import url("nonexist.css") supports();');
test_invalid_supports_import('@import url("nonexist.css") supports(foo: bar);');
test_valid_supports_import('@import url("nonexist.css") supports(display:block);');
test_valid_supports_import('@import url("nonexist.css") supports((display:flex));');
test_valid_supports_import('@import url("nonexist.css") supports(not (display: flex));');
test_valid_supports_import('@import url("nonexist.css") supports((display: flex) and (display: block));');
test_valid_supports_import('@import url("nonexist.css") supports((display: flex) or (display: block));');
test_valid_supports_import('@import url("nonexist.css") supports((display: flex) or (foo: bar));');
test_valid_supports_import('@import url("nonexist.css") supports(display: block !important);');
test_invalid_supports_import('@import url("nonexist.css") layer supports();');
test_invalid_supports_import('@import url("nonexist.css") layer supports(foo: bar);');
test_valid_supports_import('@import url("nonexist.css") layer(A) supports((display: flex) or (foo: bar));');
test_valid_supports_import('@import url("nonexist.css") layer(A.B) supports((display: flex) and (foo: bar));');
test_valid_supports_import('@import url("nonexist.css") supports(selector(a));');
test_valid_supports_import('@import url("nonexist.css") supports(selector(p a));');
test_valid_supports_import('@import url("nonexist.css") supports(selector(p > a));');
test_valid_supports_import('@import url("nonexist.css") supports(selector(p + a));');
test_valid_supports_import('@import url("nonexist.css") supports(font-tech(color-colrv1));');
test_valid_supports_import('@import url("nonexist.css") supports(font-format(opentype));');
test_valid_supports_import('@import url(nonexist.css) supports(display:block);',
'@import url("nonexist.css") supports(display:block);');
test_valid_supports_import('@import "nonexist.css" supports(display:block);',
'@import url("nonexist.css") supports(display:block);');
// “supports” gets parsed as an (unsupported) media query.
test_unsupported_supports_import('@import url("nonexist.css") supports;');
</script>

View file

@ -0,0 +1,244 @@
<!DOCTYPE HTML>
<html lang=en>
<title>CSSGroupingRule Conditional Rules Test</title>
<link rel="author" title="L. David Baron" href="https://dbaron.org/">
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
<link rel="help" href="http://www.w3.org/TR/css3-conditional/#the-cssgroupingrule-interface">
<meta name="assert" content="requirements in definition of insertRule">
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style id="style">
@media unsupported { /* tests need to work even if condition is false */ }
@supports (unsupported: value) { }
</style>
<div id=log></div>
<div id="test"></div>
<script>
var rules = document.getElementById("style").sheet.cssRules;
var rule_names = ["@media", "@supports"];
var rule_types = [CSSRule.MEDIA_RULE, CSSRule.SUPPORTS_RULE]
var rule_nums = [4, 12]
for (let i = 0; i < 2; i++) {
var grouping_rule = rules[i];
var rule_name = rule_names[i];
test(function() {
assert_true(grouping_rule instanceof CSSGroupingRule,
rule_name + " instanceof CSSGroupingRule");
},
rule_name + " is CSSGroupingRule");
test(function() {
assert_equals(grouping_rule.type, rule_types[i],
"Rule type of " + rule_name + " rule");
assert_equals(grouping_rule.type, rule_nums[i],
"Rule number of " + rule_name + " rule");
},
rule_name + " rule type");
test(function() {
assert_equals(grouping_rule.cssRules.length, 0,
"Starting cssRules.length of " + rule_name + " rule");
},
"Empty " + rule_name + " rule length");
test(function() {
assert_throws_dom("HIERARCHY_REQUEST_ERR",
function() {
grouping_rule.insertRule("@import url(foo.css);", 0);
},
"inserting a disallowed rule should throw HIERARCHY_REQUEST_ERR");
},
"insertRule of @import into " + rule_name);
test(function() {
assert_throws_dom("INDEX_SIZE_ERR",
function() {
grouping_rule.insertRule("p { color: green }", 1);
},
"inserting at a bad index throws INDEX_SIZE_ERR");
},
"insertRule into empty " + rule_name + " at bad index");
test(function() {
grouping_rule.insertRule("p { color: green }", 0);
assert_equals(grouping_rule.cssRules.length, 1,
"Modified cssRules.length of " + rule_name + " rule");
grouping_rule.insertRule("p { color: blue }", 1);
assert_equals(grouping_rule.cssRules.length, 2,
"Modified cssRules.length of " + rule_name + " rule");
grouping_rule.insertRule("p { color: aqua }", 1);
assert_equals(grouping_rule.cssRules.length, 3,
"Modified cssRules.length of " + rule_name + " rule");
assert_throws_dom("INDEX_SIZE_ERR",
function() {
grouping_rule.insertRule("p { color: green }", 4);
},
"inserting at a bad index throws INDEX_SIZE_ERR");
assert_equals(grouping_rule.cssRules.length, 3,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule into " + rule_name + " updates length");
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
grouping_rule.insertRule("@media print {}", 0);
assert_equals(grouping_rule.cssRules.length, 1,
"Modified cssRules.length of " + rule_name + " rule");
assert_equals(grouping_rule.cssRules[0].type, CSSRule.MEDIA_RULE,
"inserting syntactically correct media rule succeeds");
},
"insertRule of valid @media into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
grouping_rule.insertRule("p { color: yellow }", 0);
assert_equals(grouping_rule.cssRules.length, 1,
"Modified cssRules.length of " + rule_name + " rule");
assert_equals(grouping_rule.cssRules[0].type, CSSRule.STYLE_RULE,
"inserting syntactically correct style rule succeeds");
},
"insertRule of valid style rule into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media bad syntax;", 0);
},
"inserting syntactically invalid rule throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of invalid @media into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("", 0);
},
"inserting empty rule throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of empty string into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media print {} foo", 0);
},
"inserting rule with garbage afterwards throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of valid @media rule followed by garbage into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("p { color: yellow } foo", 0);
},
"inserting rule with garbage afterwards throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of valid style rule followed by garbage into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media print {} @media print {}", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of mutiple valid @media into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("p { color: yellow } @media print {}", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of valid style rulle followed by valid @media into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("@media print {} p { color: yellow }", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of valid style rule followed by valid @media into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
assert_throws_dom("SYNTAX_ERR",
function() {
grouping_rule.insertRule("p { color: yellow } p { color: yellow }", 0);
},
"inserting multiple rules throws syntax error");
assert_equals(grouping_rule.cssRules.length, 0,
"Modified cssRules.length of " + rule_name + " rule");
},
"insertRule of two valid style rules into " + rule_name);
test(function() {
while (grouping_rule.cssRules.length > 0) {
grouping_rule.deleteRule(0);
}
var res = grouping_rule.insertRule("p { color: green }", 0);
assert_equals(res, 0, "return value should be index");
assert_equals(grouping_rule.cssRules.length, 1,
"Modified cssRules.length of " + rule_name + " rule");
res = grouping_rule.insertRule("p { color: green }", 0);
assert_equals(res, 0, "return value should be index");
assert_equals(grouping_rule.cssRules.length, 2,
"Modified cssRules.length of " + rule_name + " rule");
res = grouping_rule.insertRule("p { color: green }", 2);
assert_equals(res, 2, "return value should be index");
assert_equals(grouping_rule.cssRules.length, 3,
"Modified cssRules.length of " + rule_name + " rule");
},
"Return value of insertRule into " + rule_name);
}
</script>
</body>
</html>

View file

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html>
<head>
<title>CSSOM CSSRule CSSImportRule interface</title>
<link rel="author" title="Letitia Lew" href="mailto:lew.letitia@gmail.com">
<link rel="help" href="http://www.w3.org/TR/cssom-1/#css-rules">
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssrule-interface">
<link rel="help" href="http://www.w3.org/TR/cssom-1/#the-cssimportrule-interface">
<meta name="flags" content="dom">
<meta name="assert" content="All properties for this CSSImportRule instance of CSSRule are initialized correctly">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style id="styleElement" type="text/css">
@import url("support/a-green.css");
@import url("support/a-green.css") screen;
@import url("support/a-green.css") all;
@import url("support/a-green") supports((display: flex) or (display: block));
@import url('quote"quote');
@page { background-color: red; }
</style>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
var styleSheet, ruleList, rule, ruleWithMedia, ruleWithMediaAll, ruleWithSupports, ruleWithQuote;
setup(function() {
styleSheet = document.getElementById("styleElement").sheet;
ruleList = styleSheet.cssRules;
rule = ruleList[0];
ruleWithMedia = ruleList[1];
ruleWithMediaAll = ruleList[2];
ruleWithSupports = ruleList[3];
ruleWithQuote = ruleList[4];
});
test(function() {
assert_true(rule instanceof CSSRule);
assert_true(rule instanceof CSSImportRule);
assert_true(ruleWithMedia instanceof CSSRule);
assert_true(ruleWithMedia instanceof CSSImportRule);
assert_true(ruleWithSupports instanceof CSSRule);
assert_true(ruleWithSupports instanceof CSSImportRule);
}, "CSSRule and CSSImportRule types");
test(function() {
assert_equals(rule.STYLE_RULE, 1);
assert_equals(rule.IMPORT_RULE, 3);
assert_equals(rule.MEDIA_RULE, 4);
assert_equals(rule.FONT_FACE_RULE, 5);
assert_equals(rule.PAGE_RULE, 6);
assert_equals(rule.NAMESPACE_RULE, 10);
assert_idl_attribute(rule, "type");
assert_equals(typeof rule.type, "number");
}, "Type of CSSRule#type and constant values");
test(function() {
assert_true(rule instanceof CSSRule);
assert_idl_attribute(rule, "cssText");
assert_idl_attribute(rule, "parentRule");
assert_idl_attribute(rule, "parentStyleSheet");
assert_readonly(rule, "type");
assert_readonly(rule, "parentRule");
assert_readonly(rule, "parentStyleSheet");
}, "Existence and writability of CSSRule attributes");
test(function() {
assert_equals(rule.type, rule.IMPORT_RULE);
assert_equals(typeof rule.cssText, "string");
assert_equals(rule.cssText, '@import url("support/a-green.css");');
assert_equals(ruleWithMedia.cssText, '@import url("support/a-green.css") screen;');
assert_equals(ruleWithMediaAll.cssText, '@import url("support/a-green.css") all;');
assert_equals(ruleWithSupports.cssText, '@import url("support/a-green") supports((display: flex) or (display: block));');
assert_equals(ruleWithQuote.cssText, '@import url("quote\\\"quote");');
assert_equals(rule.parentRule, null);
assert_true(rule.parentStyleSheet instanceof CSSStyleSheet);
}, "Values of CSSRule attributes");
test(function() {
assert_idl_attribute(rule, "href");
assert_idl_attribute(rule, "media");
assert_idl_attribute(rule, "styleSheet");
assert_readonly(rule, "href");
assert_readonly(rule, "styleSheet");
}, "Existence and writability of CSSImportRule attributes");
test(function() {
assert_equals(typeof rule.href, "string");
assert_true(rule.media instanceof MediaList);
assert_true(rule.styleSheet instanceof CSSStyleSheet);
assert_true(ruleWithMedia.media.length > 0);
assert_equals(ruleWithMedia.media.mediaText, "screen");
}, "Values of CSSImportRule attributes");
test(function() {
ruleWithMedia.media = "print";
assert_equals(ruleWithMedia.media.mediaText, "print");
}, "CSSImportRule : MediaList mediaText attribute should be updated due to [PutForwards]");
test(function() {
var ruleWithPage = ruleList[5];
ruleWithPage.style = "margin-top: 10px;"
assert_equals(ruleWithPage.style.cssText, "margin-top: 10px;");
}, "CSSStyleDeclaration cssText attribute should be updated due to [PutForwards]");
test(function() {
styleSheet.media = "screen";
assert_equals(styleSheet.media.mediaText, "screen");
}, "StyleSheet : MediaList mediaText attribute should be updated due to [PutForwards]");
test(function() {
assert_idl_attribute(ruleWithSupports, "supportsText");
assert_readonly(ruleWithSupports, "supportsText");
}, "Existence and writability of CSSImportRule supportsText attribute");
test(function() {
assert_equals(ruleWithSupports.supportsText, "(display: flex) or (display: block)");
}, "Value of CSSImportRule supportsText attribute");
</script>
</body>
</html>

View file

@ -0,0 +1 @@
.a { color: green; }