background-serialize.html | Explore in Territory

<!doctype html>
<head>
<title>Test background properties obtained by using cssText when the properties are set by using style element's textContent.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<script>
test(function() {
  var style = document.createElement('style');
  document.head.appendChild(style);
  assert_equals(getStyle('.test { background: none; }'), '.test { background: none; }');
  assert_equals(getStyle('.test { background: none; background-color: black;}'), '.test { background: none black; }');
  assert_equals(getStyle('.test { background: none; background-color: initial !important;}'), '.test { background-image: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial !important; }');
  assert_equals(getStyle('.test { background: initial; }'), '.test { background: initial; }');
  assert_equals(getStyle('.test { background: initial; background-color: black; }'), '.test { background: black; }');
  assert_equals(getStyle('.test { background: inherit; }'), '.test { background: inherit; }');
  assert_equals(getStyle('.test { background: inherit; background-color: black; }'), '.test { background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: black; }');
  assert_equals(getStyle('.test { background: unset; background-color: black; }'), '.test { background-image: unset; background-position: unset; background-size: unset; background-repeat: unset; background-attachment: unset; background-origin: unset; background-clip: unset; background-color: black; }');
  assert_equals(getStyle('.test { background: unset; }'), '.test { background: unset; }');
  assert_equals(getStyle('.test { background: none; background-repeat: repeat-x !important;}'), '.test { background-image: none; background-position: initial; background-size: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; background-repeat: repeat-x !important; }');
  assert_equals(getStyle('.test { background: none; background-repeat: repeat-x;}'), '.test { background: none repeat-x; }');
  assert_equals(getStyle('.test { background: none; background-position-x: 0%;}'), '.test { background: none 0%; }');
  assert_equals(getStyle('.test { background: none; background-position: 20% 80%;}'), '.test { background: none 20% 80%; }');
  assert_equals(getStyle('.test { background-position-x: 5%; }'), '.test { background-position-x: 5%; }');
  assert_equals(getStyle('.test { background-position-y: 5%; }'), '.test { background-position-y: 5%; }');
  assert_equals(getStyle('.test { background-position-x: 5%; background-position-y: 10%; }'), '.test { background-position: 5% 10%; }');
  assert_equals(getStyle('.test { background-position-x: 5%; background-position-y: 10% !important; }'), '.test { background-position-x: 5%; background-position-y: 10% !important; }');
  assert_equals(getStyle('.test { background: url(dummy://test.png); }'), '.test { background: url("dummy://test.png"); }');
  assert_equals(getStyle('.test { background: url(dummy://test.png); background-color: black; }'), '.test { background: url("dummy://test.png") black; }');
  assert_equals(getStyle('.test { background: url(), url(), rgb(253, 218, 83); }'), '.test { background: url(""), url(""), rgb(253, 218, 83); }');

  function getStyle(text) {
    style.textContent = text;
    return style.sheet.cssRules[0].cssText;
  }
});
</script>
chromium/third_party/blink/web_tests/fast/css/background-serialize.html
