mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-27 18:17:22 +02:00
Tests: Import WPT CSSOM tests about serialization
This is an area we're lacking in, so let's bring these in-tree to track them more easily. :^)
This commit is contained in:
Sam Atkins
committed by
Andreas Kling
Andreas Kling
parent
12442ca430
commit
2fc164c0b6
Notes:
github-actions[bot]
2024-11-30 10:03:37 +00:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/LadybirdBrowser/ladybird/commit/2fc164c0b64 Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2638
@@ -0,0 +1,185 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user