185 lines
5.7 KiB
HTML
185 lines
5.7 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>CSSOM - Serialization of CSSMediaRule</title>
|
|
<link rel="help" href="https://drafts.csswg.org/cssom/#serialize-a-css-rule">
|
|
<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
|
|
* behavior: https://github.com/w3c/csswg-drafts/issues/533
|
|
*/
|
|
//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>
|