Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/serialize-media-rule.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSSOM - Serialization of CSSMediaRule</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
function makeSheet(t) {
var style = document.createElement('style');
document.body.appendChild(style);
t.add_cleanup(function() {
document.body.removeChild(style);
});
return style.sheet;
}
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media {}', 0);
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, '@media {\n}');
}, 'empty media query list');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media all {}');
sheet.insertRule('@media print {}');
sheet.insertRule('@media screen {}');
sheet.insertRule('@media speech {}');
assert_equals(sheet.cssRules.length, 4);
assert_equals(sheet.cssRules[0].cssText, '@media speech {\n}');
assert_equals(sheet.cssRules[1].cssText, '@media screen {\n}');
assert_equals(sheet.cssRules[2].cssText, '@media print {\n}');
assert_equals(sheet.cssRules[3].cssText, '@media all {\n}');
}, 'type - no features');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media not all {}');
sheet.insertRule('@media not print {}');
sheet.insertRule('@media not screen {}');
sheet.insertRule('@media not speech {}');
assert_equals(sheet.cssRules.length, 4);
assert_equals(sheet.cssRules[0].cssText, '@media not speech {\n}');
assert_equals(sheet.cssRules[1].cssText, '@media not screen {\n}');
assert_equals(sheet.cssRules[2].cssText, '@media not print {\n}');
assert_equals(sheet.cssRules[3].cssText, '@media not all {\n}');
}, 'type - no features - negation');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media aLL {}');
sheet.insertRule('@media pRiNt {}');
sheet.insertRule('@media screEN {}');
sheet.insertRule('@media spEech {}');
assert_equals(sheet.cssRules.length, 4);
assert_equals(sheet.cssRules[0].cssText, '@media speech {\n}');
assert_equals(sheet.cssRules[1].cssText, '@media screen {\n}');
assert_equals(sheet.cssRules[2].cssText, '@media print {\n}');
assert_equals(sheet.cssRules[3].cssText, '@media all {\n}');
}, 'type - no features - character case normalization');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media all and (color) {}');
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, '@media (color) {\n}');
}, 'type - omission of all');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media not all and (color) {}');
assert_equals(sheet.cssRules.length, 1);
assert_equals(sheet.cssRules[0].cssText, '@media not all and (color) {\n}');
}, 'type - inclusion of negated all');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media screen and (Color) {}');
sheet.insertRule('@media screen and (cOLor) {}');
assert_equals(sheet.cssRules.length, 2);
assert_equals(sheet.cssRules[0].cssText, '@media screen and (color) {\n}');
assert_equals(sheet.cssRules[1].cssText, '@media screen and (color) {\n}');
}, 'features - character case normalization');
/**
* The following test is disabled pending clarification of the intended
*/
//test(function(t) {
// var sheet = makeSheet(t);
// sheet.insertRule('@media screen and (color) and (color) {}');
//
// assert_equals(sheet.cssRules.length, 1);
// assert_equals(
// sheet.cssRules[0].cssText,
// '@media screen and (color) {\n}'
// );
//}, 'features - de-duplication');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media print and (max-width: 23px) and (max-width: 45px) {}');
assert_equals(sheet.cssRules.length, 1);
assert_equals(
sheet.cssRules[0].cssText,
'@media print and (max-width: 23px) and (max-width: 45px) {\n}'
);
}, 'features - preservation of overspecified features');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media screen and (max-width: 0px) and (color) {}');
sheet.insertRule('@media screen and (color) and (max-width: 0px) {}');
assert_equals(sheet.cssRules.length, 2);
assert_equals(
sheet.cssRules[0].cssText,
'@media screen and (color) and (max-width: 0px) {\n}'
);
assert_equals(
sheet.cssRules[1].cssText,
'@media screen and (max-width: 0px) and (color) {\n}'
);
}, 'features - no lexicographical sorting');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media screen and (max-width: 0px), screen and (color) {}');
assert_equals(sheet.cssRules.length, 1);
assert_equals(
sheet.cssRules[0].cssText,
'@media screen and (max-width: 0px), screen and (color) {\n}'
);
}, 'media query list');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media print {}');
assert_equals(sheet.cssRules.length, 1);
sheet.cssRules[0].insertRule('#foo { z-index: 23; float: left; }', 0);
assert_equals(
sheet.cssRules[0].cssText,
[
'@media print {',
' #foo { z-index: 23; float: left; }',
'}'
].join('\n')
);
}, 'one rule');
test(function(t) {
var sheet = makeSheet(t);
sheet.insertRule('@media print {}');
assert_equals(sheet.cssRules.length, 1);
sheet.cssRules[0].insertRule('#foo { z-index: 23; float: left; }', 0);
sheet.cssRules[0].insertRule('#bar { float: none; z-index: 45; }', 0);
assert_equals(
sheet.cssRules[0].cssText,
[
'@media print {',
' #bar { float: none; z-index: 45; }',
' #foo { z-index: 23; float: left; }',
'}'
].join('\n')
);
}, 'many rules');
</script>
</body>
</html>