<!doctype html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    0% { left: 0px; }
    0% { right: 0px; }
    from, 50%, 100% { left: 100px; }
    100% { right: 100px; }
  }
</style>
<script>
  test(function() {
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i = 0; i < rules.length; i++) {
      if (rules[i].type == CSSRule.KEYFRAMES_RULE) {
        assert_equals(rules[i].findRule('0%').cssText, '0% { right: 0px; }');
        assert_equals(rules[i].findRule('   0%   ').cssText, '0% { right: 0px; }');
        assert_equals(rules[i].findRule('from').cssText, '0% { right: 0px; }');
        assert_equals(rules[i].findRule('    FROM ,    50%   , 100%  ').cssText, '0%, 50%, 100% { left: 100px; }');
        assert_equals(rules[i].findRule('  0% , 50%, to  ').cssText, '0%, 50%, 100% { left: 100px; }');
        assert_equals(rules[i].findRule('100%').cssText, '100% { right: 100px; }');
        assert_equals(rules[i].findRule('to').cssText, '100% { right: 100px; }');
        assert_equals(rules[i].findRule('1%'), null);
        assert_equals(rules[i].findRule('0%, 100%'), null);
        assert_equals(rules[i].findRule('from, 100%, 50%'), null);
        assert_equals(rules[i].findRule('100%, from, 50%'), null);
        assert_equals(rules[i].findRule(''), null);
        assert_equals(rules[i].findRule('foo'), null);
      }
    }
  }, 'Check CSSKeyframesRule.findRule returns the correct matching keyframe rule');
</script>