keyframes-cssom-unprefixed-02.html | Explore in Territory

<!DOCTYPE html>
<style type="text/css" media="screen">
#test {
  position: absolute;
  left: 0;
  top: 100px;
  height: 100px;
  width: 100px;
  background-color: blue;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-name: anim;
  animation-fill-mode: forwards;
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
async_test(t => {
  window.addEventListener("load", t.step_func_done(() => {
    var testContainer = document.createElement("div");
    document.body.appendChild(testContainer);

    testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>';

    e = document.getElementById('test');
    var lastSheet = document.styleSheets[document.styleSheets.length - 1];
    lastSheet.insertRule("@keyframes anim { from { left: 200px; } to { left: 300px;} }", lastSheet.cssRules.length);

    var keyframeRule = lastSheet.cssRules[lastSheet.cssRules.length - 1];
    assert_equals(keyframeRule.toString(), "[object CSSKeyframesRule]");
    assert_equals(keyframeRule.type, 7);
    assert_equals(keyframeRule.name, "anim");
    assert_equals(keyframeRule.findRule('from').cssText, "0% { left: 200px; }");
    assert_equals(keyframeRule.findRule('to').cssText, "100% { left: 300px; }");
    keyframeRule.deleteRule("from");
    assert_equals(keyframeRule.findRule('from'), null);
    keyframeRule.appendRule("from { left: 200px; }");
    assert_equals(keyframeRule.findRule('from').cssText, "0% { left: 200px; }");
    assert_equals(keyframeRule.cssRules[0].toString(), "[object CSSKeyframeRule]");
    assert_equals(keyframeRule.cssRules[0].cssText, "100% { left: 300px; }");
    assert_equals(keyframeRule.cssRules[0].keyText, "100%");
    assert_equals(keyframeRule.cssRules[0].style.cssText, "left: 300px;");
    assert_equals(keyframeRule.cssRules[1].toString(), "[object CSSKeyframeRule]");
    assert_equals(keyframeRule.cssRules[1].cssText, "0% { left: 200px; }");
    assert_equals(keyframeRule.cssRules[1].keyText, "0%");
    assert_equals(keyframeRule.cssRules[1].style.cssText, "left: 200px;");

    try {
      new CSSKeyframesRule().name;
    } catch (e) {
      assert_equals(e.message, "Illegal constructor");
    }

    document.body.removeChild(testContainer);
  }));
}, "Test the CSSOM of @keyframes");
</script>
chromium/third_party/blink/web_tests/animations/prefixed/keyframes-cssom-unprefixed-02.html
