chromium/src/third_party/blink/web_tests/external/wpt/css/cssom/serialize-media-rule.html - manifest_repos/chromium_src - Git at Google

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