third_party/WebKit/LayoutTests/http/tests/devtools/elements/styles-4/keyframes-source-offsets.js

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

(async function() {
  TestRunner.addResult(`Tests that proper data and start/end offset positions are reported for CSS keyframes.\n`);
  await TestRunner.loadModule('elements_test_runner');
  await TestRunner.showPanel('elements');
  await TestRunner.loadHTML(`
      <style>
      @keyframes animName {
          from, 20% {
              height: 200px;
              color: red;
          }
          to {
              height: 500px;
          }
      }
      </style>
      <div id="element"></div>
    `);
  await TestRunner.addStylesheetTag('../styles/resources/keyframes.css');

  function dumpRule(rule) {
    TestRunner.addResult(
        '\n' + rule.animationName.text + ' @' + ElementsTestRunner.rangeText(rule.animationName.range));
    for (var keyframe of rule.keyframes) {
      TestRunner.addResult(
          keyframe.keyText.text + ' @' + ElementsTestRunner.rangeText(keyframe.keyText.range) + ' {} @' +
          ElementsTestRunner.rangeText(keyframe.style.range));
      var allProperties = keyframe.style.cssProperties;
      for (var i = 0; i < allProperties.length; ++i) {
        var property = allProperties[i];
        if (!property.range)
          continue;
        TestRunner.addResult(
            property.name + ':' + property.value + (property.important ? ' !important' : '') +
            (('parsedOk' in property) ? ' non-parsed' : '') + ' @' + ElementsTestRunner.rangeText(property.range));
      }
    }
  }

  ElementsTestRunner.selectNodeWithId('element', step1);

  async function step1(node) {
    var response = await TestRunner.CSSAgent.invoke_getMatchedStylesForNode({nodeId: node.id});

    for (var animation of response.cssKeyframesRules)
      dumpRule(animation);

    TestRunner.addResult('\n>> Modifying keyframe rule');
    var style = new SDK.CSSStyleDeclaration(
        TestRunner.cssModel, null, response.cssKeyframesRules[1].keyframes[0].style,
        SDK.CSSStyleDeclaration.Type.Regular);
    await style.setText('width: 123px');

    response = await TestRunner.CSSAgent.invoke_getMatchedStylesForNode({nodeId: node.id});

    for (var animation of response.cssKeyframesRules)
      dumpRule(animation);
    TestRunner.completeTest();
  }
})();