insertrule-namespace-mapping.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style id='style'>
@namespace tns url(test-namespace);
@media all {}
</style>
<body></body>
<script>
function assertColorGreen(id) {
  var element = document.createElementNS('test-namespace', 'tns:div');
  element.id = id;
  element.setAttributeNS('test-namespace', 'tns:green', true);
  document.body.appendChild(element);
  assert_equals(getComputedStyle(element).color, 'rgb(0, 128, 0)');
}

test(function() {
  style.sheet.insertRule('tns|*#testInsertRule[tns|green] { color: green; }', style.sheet.cssRules.length);
  assertColorGreen('testInsertRule');
}, 'Selectors added to CSSStyleSheets via insertRule() should use the @namespace mapping');

test(function() {
  var mediaRule = style.sheet.rules[1];
  console.assert(mediaRule instanceof CSSMediaRule); // CSSMediaRule inherits from the CSSGroupingRule interface.
  mediaRule.insertRule('tns|*#testMediaInsertRule[tns|green] { color: green; }', style.sheet.length);
  assertColorGreen('testMediaInsertRule');
}, 'Selectors added to CSSGroupingRules via insertRule() should use the @namespace mapping');
</script>
chromium/third_party/blink/web_tests/cssom/insertrule-namespace-mapping.html
