css/cssom/serialize-media-rule.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>