CSSKeyframesRule-deleteRule-detach.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/cssom/CSSKeyframesRule-deleteRule-detach.html - WPT Dashboard Interop Dashboard

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