| <!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> |