Sandbox::https://github.com/web-platform-tests/wpt/blob/master/css/css-nesting/invalid-inner-rules.html

Repository navigation

History

<!doctype html>

<title>Simple CSSOM manipulation of subrules</title>

div {

/* This is not a conditional rule, and thus cannot be in nesting context. */

@font-face {

&.a { font-size: 10px; }

}

@media screen {

&.a { color: red; }

/* Same. */

@font-face {

&.a { font-size: 10px; }

}

</style>

test(() => {

let [ss] = document.styleSheets;

assert_equals(ss.cssRules.length, 1);

// The @font-face rule should be ignored.

assert_equals(ss.cssRules[0].cssText,

`div {

@media screen {

&.a { color: red; }

}

}`);

});

test(() => {

let [ss] = document.styleSheets;

assert_equals(ss.cssRules.length, 1);

assert_throws_dom('HierarchyRequestError',

() => { ss.cssRules[0].cssRules[0].insertRule('@font-face {}', 0); });

assert_throws_dom('HierarchyRequestError',

() => { ss.cssRules[0].insertRule('@font-face {}', 0); });

// The @font-face rules should be ignored (again).

assert_equals(ss.cssRules[0].cssText,

`div {

@media screen {

&.a { color: red; }

}

}`);

});

</script>

FilesExpand file tree

invalid-inner-rules.html

Latest commit

History

invalid-inner-rules.html

File metadata and controls