css/cssom/CSSKeyframesRule-deleteRule-detach.html

<!doctype html>
<title>CSSKeyframesRule deleteRule() should detach removed keyframe rules</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#dom-csskeyframesrule-deleterule">
<script>
"use strict";

function getKeyframesRule() {
  const style = document.createElement("style");
  style.textContent = "@keyframes a { from { opacity: 0 } to { opacity: 1 } }";
  document.head.append(style);
  return { style, keyframes: style.sheet.cssRules[0] };
}

test(() => {
  const { style, keyframes } = getKeyframesRule();
  const removed = keyframes.cssRules[0];
  assert_equals(removed.parentRule, keyframes, "setup: parentRule should be the keyframes rule");
  assert_equals(removed.parentStyleSheet, style.sheet, "setup: parentStyleSheet should be the sheet");

  keyframes.deleteRule("from");
  assert_equals(removed.parentRule, null, "parentRule should be null after deletion");
  assert_equals(removed.parentStyleSheet, null, "parentStyleSheet should be null after deletion");

  style.remove();
}, "deleteRule() nullifies parentRule and parentStyleSheet on the removed keyframe rule");

test(() => {
  const { style, keyframes } = getKeyframesRule();
  const kept = keyframes.cssRules[1];
  assert_equals(kept.keyText, "100%");

  keyframes.deleteRule("from");
  assert_equals(kept.parentRule, keyframes, "kept rule's parentRule should still be the keyframes rule");
  assert_equals(kept.parentStyleSheet, style.sheet, "kept rule's parentStyleSheet should still be the sheet");

  style.remove();
}, "deleteRule() does not detach rules that were not removed");
</script>