Diff
Modified: trunk/LayoutTests/ChangeLog (176367 => 176368)
--- trunk/LayoutTests/ChangeLog 2014-11-20 00:34:35 UTC (rev 176367)
+++ trunk/LayoutTests/ChangeLog 2014-11-20 00:59:09 UTC (rev 176368)
@@ -1,3 +1,18 @@
+2014-11-19 Dean Jackson <[email protected]>
+
+ Handle unprefixed @keyframes rule
+ https://bugs.webkit.org/show_bug.cgi?id=138899
+ <rdar://problem/18943117>
+
+ Reviewed by Simon Fraser.
+
+ Tests for @keyframes, both the OM side and the parsing.
+
+ * animations/unprefixed-keyframes-expected.txt: Added.
+ * animations/unprefixed-keyframes-rule-expected.txt: Added.
+ * animations/unprefixed-keyframes-rule.html: Added.
+ * animations/unprefixed-keyframes.html: Added.
+
2014-11-19 Joseph Pecoraro <[email protected]>
Web Inspector: JSContext inspection Resource search does not work
Added: trunk/LayoutTests/animations/unprefixed-keyframes-expected.txt (0 => 176368)
--- trunk/LayoutTests/animations/unprefixed-keyframes-expected.txt (rev 0)
+++ trunk/LayoutTests/animations/unprefixed-keyframes-expected.txt 2014-11-20 00:59:09 UTC (rev 176368)
@@ -0,0 +1,4 @@
+This test performs an animation of the left property. It should stop for 100ms at 100px and 200px We test for those values 50ms after it has stopped at each position.
+PASS - "left" property for "box" element at 0.3s saw something close to: 100
+PASS - "left" property for "box" element at 0.7s saw something close to: 200
+
Property changes on: trunk/LayoutTests/animations/unprefixed-keyframes-expected.txt
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/animations/unprefixed-keyframes-rule-expected.txt (0 => 176368)
--- trunk/LayoutTests/animations/unprefixed-keyframes-rule-expected.txt (rev 0)
+++ trunk/LayoutTests/animations/unprefixed-keyframes-rule-expected.txt 2014-11-20 00:59:09 UTC (rev 176368)
@@ -0,0 +1,81 @@
+This tests unprefixed @keyframes parsing and the CSSKeyframeRule and CSSKeyframesRule interfaces.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS CSSKeyframeRule exists on Window object
+PASS CSSKeyframesRule exists on Window object
+PASS KEYFRAME_RULE exists on Window.CSSRule object
+PASS KEYFRAMES_RULE exists on Window.CSSRule object
+
+Check that the old values still work.
+PASS window.CSSRule.KEYFRAME_RULE is window.CSSRule.WEBKIT_KEYFRAME_RULE
+PASS window.CSSRule.KEYFRAMES_RULE is window.CSSRule.WEBKIT_KEYFRAMES_RULE
+
+PASS keyframes1.type is window.CSSRule.KEYFRAMES_RULE
+PASS keyframes1.name is 'test1'
+
+PASS rules1.length is 2
+PASS rules1.item(0).type is window.CSSRule.KEYFRAME_RULE
+PASS rules1.item(0).cssText is '0% { left: 10px; }'
+PASS rules1.item(1).cssText is '100% { left: 20px; }'
+
+Insert three new rules
+PASS rules1.length is 5
+PASS rules1.item(0).cssText is '0% { left: 10px; }'
+PASS rules1.item(1).cssText is '100% { left: 20px; }'
+PASS rules1.item(2).cssText is '30% { left: 30px; }'
+PASS rules1.item(3).cssText is '60% { left: 60px; }'
+PASS rules1.item(4).cssText is '20% { left: 50px; }'
+
+PASS keyframes2.type is window.CSSRule.KEYFRAMES_RULE
+PASS keyframes2.name is 'test2'
+
+PASS rules2.length is 3
+PASS rules2.item(0).type is window.CSSRule.KEYFRAME_RULE
+PASS rules2.item(0).keyText is '0%'
+PASS rules2.item(1).keyText is '50%'
+PASS rules2.item(2).keyText is '100%'
+PASS rules2.item(0).cssText is '0% { left: 10px; }'
+PASS rules2.item(1).cssText is '50% { left: 30px; }'
+PASS rules2.item(2).cssText is '100% { left: 20px; }'
+
+PASS rules2.item(0).style is an instance of CSSStyleDeclaration
+PASS rules2.item(0).style.length is 1
+
+Find a rule
+PASS rule.type is window.CSSRule.KEYFRAME_RULE
+PASS rule.cssText is '50% { left: 30px; }'
+
+Find a rule using from and to
+PASS keyframesFromTo.type is window.CSSRule.KEYFRAMES_RULE
+PASS rule.type is window.CSSRule.KEYFRAME_RULE
+PASS rule.cssText is '0% { left: 10px; }'
+PASS rule.type is window.CSSRule.KEYFRAME_RULE
+PASS rule.cssText is '100% { left: 20px; }'
+
+Try to find a rule that doesn't exist
+PASS Non-existent rule was not found
+
+Delete a rule
+PASS rules2.length is 2
+PASS rules2.item(0).type is window.CSSRule.KEYFRAME_RULE
+PASS rules2.item(0).keyText is '0%'
+PASS rules2.item(1).keyText is '100%'
+
+Delete a from rule
+PASS rulesFromTo.length is 2
+PASS rulesFromTo.item(0).type is window.CSSRule.KEYFRAME_RULE
+PASS rulesFromTo.item(0).keyText is '50%'
+PASS rulesFromTo.item(1).keyText is '100%'
+
+Delete a rule that doesn't exist
+PASS rules2.length is 2
+PASS rules2.item(0).type is window.CSSRule.KEYFRAME_RULE
+PASS rules2.item(0).keyText is '0%'
+PASS rules2.item(1).keyText is '100%'
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Property changes on: trunk/LayoutTests/animations/unprefixed-keyframes-rule-expected.txt
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/animations/unprefixed-keyframes-rule.html (0 => 176368)
--- trunk/LayoutTests/animations/unprefixed-keyframes-rule.html (rev 0)
+++ trunk/LayoutTests/animations/unprefixed-keyframes-rule.html 2014-11-20 00:59:09 UTC (rev 176368)
@@ -0,0 +1,175 @@
+<html>
+<head>
+<style>
+ @keyframes test1 {
+ from { left: 10px; }
+ to { left: 20px; }
+ }
+ @keyframes test2 {
+ 0% { left: 10px; }
+ 50% { left: 30px; }
+ 100% { left: 20px; }
+ }
+ @keyframes test-from-to {
+ from { left: 10px; }
+ 50% { left: 30px; }
+ to { left: 20px; }
+ }
+</style>
+<script src=""
+</head>
+<body>
+<script>
+
+description("This tests unprefixed @keyframes parsing and the CSSKeyframeRule and CSSKeyframesRule interfaces.");
+
+if (window.CSSKeyframeRule)
+ testPassed("CSSKeyframeRule exists on Window object");
+else
+ testFailed("CSSKeyframeRule does not exist on Window object");
+
+if (window.CSSKeyframesRule)
+ testPassed("CSSKeyframesRule exists on Window object");
+else
+ testFailed("CSSKeyframesRule does not exist on Window object");
+
+if (window.CSSRule.KEYFRAME_RULE)
+ testPassed("KEYFRAME_RULE exists on Window.CSSRule object");
+else
+ testFailed("KEYFRAME_RULE does not exist on Window.CSSRule object");
+
+if (window.CSSRule.KEYFRAMES_RULE)
+ testPassed("KEYFRAMES_RULE exists on Window.CSSRule object");
+else
+ testFailed("KEYFRAMES_RULE does not exist on Window.CSSRule object");
+
+debug("");
+
+debug("Check that the old values still work.");
+shouldBe("window.CSSRule.KEYFRAME_RULE", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
+shouldBe("window.CSSRule.KEYFRAMES_RULE", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
+
+debug("")
+
+var keyframes1 = document.styleSheets.item(0).cssRules.item(0);
+
+shouldBe("keyframes1.type", "window.CSSRule.KEYFRAMES_RULE");
+shouldBe("keyframes1.name", "'test1'");
+
+debug("");
+
+var rules1 = keyframes1.cssRules;
+shouldBe("rules1.length", "2");
+
+shouldBe("rules1.item(0).type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
+shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
+
+debug("");
+debug("Insert three new rules");
+keyframes1.insertRule("30% { left: 30px; }");
+keyframes1.insertRule("60% { left: 60px; }");
+keyframes1.insertRule("20% { left: 50px; }");
+shouldBe("rules1.length", "5");
+
+shouldBe("rules1.item(0).cssText", "'0% { left: 10px; }'");
+shouldBe("rules1.item(1).cssText", "'100% { left: 20px; }'");
+shouldBe("rules1.item(2).cssText", "'30% { left: 30px; }'");
+shouldBe("rules1.item(3).cssText", "'60% { left: 60px; }'");
+shouldBe("rules1.item(4).cssText", "'20% { left: 50px; }'");
+
+debug("");
+
+var keyframes2 = document.styleSheets.item(0).cssRules.item(1);
+
+shouldBe("keyframes2.type", "window.CSSRule.KEYFRAMES_RULE");
+shouldBe("keyframes2.name", "'test2'");
+
+var rules2 = keyframes2.cssRules;
+
+debug("");
+
+shouldBe("rules2.length", "3");
+
+shouldBe("rules2.item(0).type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rules2.item(0).keyText", "'0%'");
+shouldBe("rules2.item(1).keyText", "'50%'");
+shouldBe("rules2.item(2).keyText", "'100%'");
+
+shouldBe("rules2.item(0).cssText", "'0% { left: 10px; }'");
+shouldBe("rules2.item(1).cssText", "'50% { left: 30px; }'");
+shouldBe("rules2.item(2).cssText", "'100% { left: 20px; }'");
+
+debug("");
+
+shouldBeType("rules2.item(0).style", "CSSStyleDeclaration");
+shouldBe("rules2.item(0).style.length", "1");
+
+debug("");
+debug("Find a rule");
+
+var rule = keyframes2.findRule("50%");
+
+if (!rule)
+ testFailed("Could not extract '50%' keyframe rule");
+
+shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rule.cssText", "'50% { left: 30px; }'");
+
+debug("");
+debug("Find a rule using from and to");
+
+var keyframesFromTo = document.styleSheets.item(0).cssRules.item(2);
+shouldBe("keyframesFromTo.type", "window.CSSRule.KEYFRAMES_RULE");
+rule = keyframesFromTo.findRule("From");
+shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rule.cssText", "'0% { left: 10px; }'");
+
+rule = keyframesFromTo.findRule("TO");
+shouldBe("rule.type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rule.cssText", "'100% { left: 20px; }'");
+
+debug("");
+debug("Try to find a rule that doesn't exist");
+
+rule = keyframes2.findRule("70%");
+
+if (rule)
+ testFailed("Was able to find the non-existent '70%' keyframe rule");
+else
+ testPassed("Non-existent rule was not found");
+
+debug("");
+debug("Delete a rule");
+
+keyframes2.deleteRule("50%");
+shouldBe("rules2.length", "2");
+shouldBe("rules2.item(0).type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rules2.item(0).keyText", "'0%'");
+shouldBe("rules2.item(1).keyText", "'100%'");
+
+debug("");
+debug("Delete a from rule");
+keyframesFromTo.deleteRule("0%");
+var rulesFromTo = keyframesFromTo.cssRules;
+shouldBe("rulesFromTo.length", "2");
+shouldBe("rulesFromTo.item(0).type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rulesFromTo.item(0).keyText", "'50%'");
+shouldBe("rulesFromTo.item(1).keyText", "'100%'");
+
+
+debug("");
+debug("Delete a rule that doesn't exist");
+
+keyframes2.deleteRule("70%");
+shouldBe("rules2.length", "2");
+shouldBe("rules2.item(0).type", "window.CSSRule.KEYFRAME_RULE");
+shouldBe("rules2.item(0).keyText", "'0%'");
+shouldBe("rules2.item(1).keyText", "'100%'");
+
+debug("");
+
+</script>
+<script src=""
+</body>
+</html>
Property changes on: trunk/LayoutTests/animations/unprefixed-keyframes-rule.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Added: trunk/LayoutTests/animations/unprefixed-keyframes.html (0 => 176368)
--- trunk/LayoutTests/animations/unprefixed-keyframes.html (rev 0)
+++ trunk/LayoutTests/animations/unprefixed-keyframes.html 2014-11-20 00:59:09 UTC (rev 176368)
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Unprefixed keyframes test</title>
+ <style>
+ #box {
+ position: absolute;
+ left: 0;
+ top: 100px;
+ height: 100px;
+ width: 100px;
+ background-color: blue;
+ animation-duration: 1s;
+ animation-timing-function: linear;
+ animation-name: anim;
+ }
+ @keyframes anim {
+ from { left: 50px; }
+ 20% { left: 100px; }
+ 40% { left: 100px; }
+ 60% { left: 200px; }
+ 80% { left: 200px; }
+ to { left: 300px; }
+ }
+ </style>
+ <script src="" type="text/_javascript_" charset="utf-8"></script>
+ <script type="text/_javascript_" charset="utf-8">
+
+ var expectedValues = [
+ // [animation-name, time, element-id, property, expected-value, tolerance]
+ ["anim", 0.3, "box", "left", 100, 1],
+ ["anim", 0.7, "box", "left", 200, 1],
+ ];
+
+ runAnimationTest(expectedValues);
+
+ </script>
+</head>
+<body>
+This test performs an animation of the left property. It should stop for 100ms at 100px and 200px
+We test for those values 50ms after it has stopped at each position.
+<div id="box">
+</div>
+<div id="result">
+</div>
+</body>
+</html>
Property changes on: trunk/LayoutTests/animations/unprefixed-keyframes.html
___________________________________________________________________
Added: svn:mime-type
Added: svn:keywords
Added: svn:eol-style
Modified: trunk/Source/WebCore/ChangeLog (176367 => 176368)
--- trunk/Source/WebCore/ChangeLog 2014-11-20 00:34:35 UTC (rev 176367)
+++ trunk/Source/WebCore/ChangeLog 2014-11-20 00:59:09 UTC (rev 176368)
@@ -1,3 +1,28 @@
+2014-11-19 Dean Jackson <[email protected]>
+
+ Handle unprefixed @keyframes rule
+ https://bugs.webkit.org/show_bug.cgi?id=138899
+ <rdar://problem/18943117>
+
+ Reviewed by Simon Fraser.
+
+ Support the parsing of unprefixed @keyframes. In
+ CSSParser, assign the same token identifier to
+ the prefixed and unprefixed forms. This will
+ keep compatibility with older content. If a page
+ has both forms, then whatever comes last will
+ win (as it does if you had duplicate names of the same
+ form).
+
+ Tests: animations/unprefixed-keyframes-rule.html
+ animations/unprefixed-keyframes.html
+
+ * css/CSSGrammar.y.in: Rename the WEBKIT_KEYFRAME_RULE_SYM symbol to
+ be KEYFRAME_RULE_SYM. Same with KEYFRAMES_SYM.
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::detectAtToken): Look for the @keyframes style
+ strings and assign the new token values.
+
2014-11-19 Andreas Kling <[email protected]>
Move pseudo-style code from RenderObject to RenderElement.
Modified: trunk/Source/WebCore/css/CSSGrammar.y.in (176367 => 176368)
--- trunk/Source/WebCore/css/CSSGrammar.y.in 2014-11-20 00:34:35 UTC (rev 176367)
+++ trunk/Source/WebCore/css/CSSGrammar.y.in 2014-11-20 00:59:09 UTC (rev 176368)
@@ -151,11 +151,11 @@
%token MEDIA_SYM
%token FONT_FACE_SYM
%token CHARSET_SYM
+%token KEYFRAME_RULE_SYM
+%token KEYFRAMES_SYM
%token NAMESPACE_SYM
%token WEBKIT_RULE_SYM
%token WEBKIT_DECLS_SYM
-%token WEBKIT_KEYFRAME_RULE_SYM
-%token WEBKIT_KEYFRAMES_SYM
%token WEBKIT_VALUE_SYM
%token WEBKIT_MEDIAQUERY_SYM
#if ENABLE_PICTURE_SIZES
@@ -395,7 +395,7 @@
webkit_rule: WEBKIT_RULE_SYM '{' maybe_space valid_rule maybe_space '}' { parser->m_rule = adoptRef($4); } ;
-webkit_keyframe_rule: WEBKIT_KEYFRAME_RULE_SYM '{' maybe_space keyframe_rule maybe_space '}' { parser->m_keyframe = adoptRef($4); } ;
+webkit_keyframe_rule: KEYFRAME_RULE_SYM '{' maybe_space keyframe_rule maybe_space '}' { parser->m_keyframe = adoptRef($4); } ;
webkit_decls: WEBKIT_DECLS_SYM '{' maybe_space_before_declaration declaration_list '}' ;
@@ -803,7 +803,7 @@
;
keyframes:
- before_keyframes_rule WEBKIT_KEYFRAMES_SYM maybe_space keyframe_name at_rule_header_end_maybe_space '{' at_rule_body_start maybe_space keyframes_rule closing_brace {
+ before_keyframes_rule KEYFRAMES_SYM maybe_space keyframe_name at_rule_header_end_maybe_space '{' at_rule_body_start maybe_space keyframes_rule closing_brace {
$$ = parser->createKeyframesRule($4, std::unique_ptr<Vector<RefPtr<StyleKeyframe>>>($9)).leakRef();
}
;
Modified: trunk/Source/WebCore/css/CSSParser.cpp (176367 => 176368)
--- trunk/Source/WebCore/css/CSSParser.cpp 2014-11-20 00:34:35 UTC (rev 176367)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2014-11-20 00:59:09 UTC (rev 176368)
@@ -10973,6 +10973,13 @@
}
return;
+ case 'k':
+ if (length == 10 && isEqualToCSSIdentifier(name + 2, "eyframes"))
+ m_token = KEYFRAMES_SYM;
+ else if (length == 14 && !hasEscape && isEqualToCSSIdentifier(name + 2, "eyframe-rule"))
+ m_token = KEYFRAME_RULE_SYM;
+ return;
+
case 'l':
if (hasEscape)
return;
@@ -11103,7 +11110,7 @@
case 18:
if (isEqualToCSSIdentifier(name + 2, "webkit-keyframes"))
- m_token = WEBKIT_KEYFRAMES_SYM;
+ m_token = KEYFRAMES_SYM;
#if ENABLE(PICTURE_SIZES)
else if (isEqualToCSSIdentifier(name + 2, "webkit-sizesattr"))
m_token = WEBKIT_SIZESATTR_SYM;
@@ -11119,7 +11126,7 @@
case 22:
if (!hasEscape && isEqualToCSSIdentifier(name + 2, "webkit-keyframe-rule"))
- m_token = WEBKIT_KEYFRAME_RULE_SYM;
+ m_token = KEYFRAME_RULE_SYM;
return;
case 27:
