Changeset 200043 in webkit


Ignore:
Timestamp:
Apr 25, 2016 1:06:09 PM (8 years ago)
Author:
Simon Fraser
Message:

play-state not parsed as part of animation shorthand
https://bugs.webkit.org/show_bug.cgi?id=156959

Reviewed by Darin Adler.

Source/WebCore:

We failed to parse animation-play-state as part of the animation shorthand, contrary
to the spec and other browsers.

Fix for both the prefixed and unprefixed properties. There is some compat risk here,
but only changing unprefixed behavior will probably lead to more author confusion.

Test: animations/play-state-in-shorthand.html

  • css/CSSParser.cpp:

(WebCore::CSSParser::parseAnimationShorthand):

  • css/CSSPropertyNames.in:
  • css/StylePropertyShorthand.cpp:

(WebCore::animationShorthandForParsing): Remove the long comment which is no longer relevant
now that the behavior has been written into the spec.

LayoutTests:

  • animations/animation-shorthand-expected.txt:
  • animations/animation-shorthand.html:
  • animations/play-state-in-shorthand-expected.txt: Added.
  • animations/play-state-in-shorthand.html: Added.
  • animations/resources/animation-test-helpers.js:

(getPropertyValue):
(comparePropertyValue):

Location:
trunk
Files:
2 added
8 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r200042 r200043  
     12016-04-25  Simon Fraser  <simon.fraser@apple.com>
     2
     3        play-state not parsed as part of animation shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=156959
     5
     6        Reviewed by Darin Adler.
     7
     8        * animations/animation-shorthand-expected.txt:
     9        * animations/animation-shorthand.html:
     10        * animations/play-state-in-shorthand-expected.txt: Added.
     11        * animations/play-state-in-shorthand.html: Added.
     12        * animations/resources/animation-test-helpers.js:
     13        (getPropertyValue):
     14        (comparePropertyValue):
     15
    1162016-04-25  Simon Fraser  <simon.fraser@apple.com>
    217
  • trunk/LayoutTests/animations/animation-shorthand-expected.txt

    r180441 r200043  
    66Testing webkitAnimationDirection on a: PASS
    77Testing webkitAnimationFillMode on a: PASS
     8Testing webkitAnimationPlayState on a: PASS
    89Testing webkitAnimationName on b: PASS
    910Testing webkitAnimationDuration on b: PASS
     
    1314Testing webkitAnimationDirection on b: PASS
    1415Testing webkitAnimationFillMode on b: PASS
     16Testing webkitAnimationPlayState on b: PASS
    1517Testing webkitAnimationName on c: PASS
    1618Testing webkitAnimationDuration on c: PASS
     
    2022Testing webkitAnimationDirection on c: PASS
    2123Testing webkitAnimationFillMode on c: PASS
     24Testing webkitAnimationPlayState on c: PASS
    2225Testing webkitAnimationName on d: PASS
    2326Testing webkitAnimationDuration on d: PASS
     
    2730Testing webkitAnimationDirection on d: PASS
    2831Testing webkitAnimationFillMode on d: PASS
     32Testing webkitAnimationPlayState on d: PASS
    2933Testing webkitAnimationName on e: PASS
    3034Testing webkitAnimationDuration on e: PASS
     
    3438Testing webkitAnimationDirection on e: PASS
    3539Testing webkitAnimationFillMode on e: PASS
     40Testing webkitAnimationPlayState on e: PASS
    3641Testing webkitAnimationName on f: PASS
    3742Testing webkitAnimationDuration on f: PASS
     
    4146Testing webkitAnimationDirection on f: PASS
    4247Testing webkitAnimationFillMode on f: PASS
     48Testing webkitAnimationPlayState on f: PASS
    4349Testing webkitAnimationName on g: PASS
    4450Testing webkitAnimationDuration on g: PASS
     
    4854Testing webkitAnimationDirection on g: PASS
    4955Testing webkitAnimationFillMode on g: PASS
     56Testing webkitAnimationPlayState on g: PASS
    5057Testing webkitAnimationName on h: PASS
    5158Testing webkitAnimationDuration on h: PASS
     
    5562Testing webkitAnimationDirection on h: PASS
    5663Testing webkitAnimationFillMode on h: PASS
     64Testing webkitAnimationPlayState on h: PASS
    5765Testing webkitAnimationName on i: PASS
    5866Testing webkitAnimationDuration on i: PASS
     
    6270Testing webkitAnimationDirection on i: PASS
    6371Testing webkitAnimationFillMode on i: PASS
     72Testing webkitAnimationPlayState on i: PASS
    6473Testing webkitAnimationName on j: PASS
    6574Testing webkitAnimationDuration on j: PASS
     
    6978Testing webkitAnimationDirection on j: PASS
    7079Testing webkitAnimationFillMode on j: PASS
     80Testing webkitAnimationPlayState on j: PASS
     81Testing webkitAnimationName on k: PASS
     82Testing webkitAnimationDuration on k: PASS
     83Testing webkitAnimationTimingFunction on k: PASS
     84Testing webkitAnimationDelay on k: PASS
     85Testing webkitAnimationIterationCount on k: PASS
     86Testing webkitAnimationDirection on k: PASS
     87Testing webkitAnimationFillMode on k: PASS
     88Testing webkitAnimationPlayState on k: PASS
    7189
  • trunk/LayoutTests/animations/animation-shorthand.html

    r180441 r200043  
    3535}
    3636#j {
    37   -webkit-animation: anim1 10s linear infinite backwards, anim2 3s none, anim3 5s both;
     37  -webkit-animation: anim1 10s ease infinite both paused;
     38}
     39#k {
     40  -webkit-animation: anim1 10s linear infinite backwards, anim2 3s none paused, anim3 5s both;
    3841}
    3942
     
    5255      "webkitAnimationIterationCount",
    5356      "webkitAnimationDirection",
    54       "webkitAnimationFillMode"
     57      "webkitAnimationFillMode",
     58      "webkitAnimationPlayState",
    5559    ];
    5660    const kExpectedResults = [
    57       { id: 'a',  values: [ "none", "0s", "ease", "0s", "1", "normal", "none" ] },
    58       { id: 'b',  values: [ "none", "0s", "ease", "0s", "1", "normal", "none" ] },
    59       { id: 'c',  values: [ "anim1", "10s", "ease", "0s", "1", "normal", "none" ] },
    60       { id: 'd',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] },
    61       { id: 'e',  values: [ "anim1", "10s", "linear", "5s", "1", "normal", "none" ] },
    62       { id: 'f',  values: [ "anim1", "10s", "linear", "5s", "3", "normal", "none" ] },
    63       { id: 'g',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "none" ] },
    64       { id: 'h',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "forwards" ] },
    65       { id: 'i',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none" ] },
    66       { id: 'j',  values: [ "anim1, anim2, anim3", "10s, 3s, 5s", "linear, ease, ease", "0s, 0s, 0s", "infinite, 1, 1", "normal, normal, normal", "backwards, none, both" ] }
     61      { id: 'a',  values: [ "none", "0s", "ease", "0s", "1", "normal", "none", "running" ] },
     62      { id: 'b',  values: [ "none", "0s", "ease", "0s", "1", "normal", "none", "running" ] },
     63      { id: 'c',  values: [ "anim1", "10s", "ease", "0s", "1", "normal", "none", "running" ] },
     64      { id: 'd',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none", "running" ] },
     65      { id: 'e',  values: [ "anim1", "10s", "linear", "5s", "1", "normal", "none", "running" ] },
     66      { id: 'f',  values: [ "anim1", "10s", "linear", "5s", "3", "normal", "none", "running" ] },
     67      { id: 'g',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "none", "running" ] },
     68      { id: 'h',  values: [ "anim1", "10s", "linear", "5s", "infinite", "alternate", "forwards", "running" ] },
     69      { id: 'i',  values: [ "anim1", "10s", "linear", "0s", "1", "normal", "none", "running" ] },
     70      { id: 'j',  values: [ "anim1", "10s", "ease", "0s", "infinite", "normal", "both", "paused" ] },
     71      { id: 'k',  values: [ "anim1, anim2, anim3", "10s, 3s, 5s", "linear, ease, ease", "0s, 0s, 0s", "infinite, 1, 1", "normal, normal, normal", "backwards, none, both", "running, paused, running" ] },
    6772    ];
    6873   
     
    103108<div id="i" class="box"></div>
    104109<div id="j" class="box"></div>
     110<div id="k" class="box"></div>
    105111<div id="result">
    106112</div>
  • trunk/LayoutTests/animations/resources/animation-test-helpers.js

    r188647 r200043  
    400400               || property == "webkitShapeInside"
    401401               || property == "webkitShapeOutside"
    402                || !property.indexOf("webkitTransform")) {
     402               || !property.indexOf("webkitTransform")
     403               || !property.indexOf("transform")) {
    403404        computedValue = window.getComputedStyle(element)[property.split(".")[0]];
    404405    } else {
     
    414415    var result = true;
    415416
    416     if (!property.indexOf("webkitTransform")) {
     417    if (!property.indexOf("webkitTransform") || !property.indexOf("transform")) {
    417418        if (typeof expectedValue == "string")
    418419            result = (computedValue == expectedValue);
  • trunk/Source/WebCore/ChangeLog

    r200042 r200043  
     12016-04-25  Simon Fraser  <simon.fraser@apple.com>
     2
     3        play-state not parsed as part of animation shorthand
     4        https://bugs.webkit.org/show_bug.cgi?id=156959
     5
     6        Reviewed by Darin Adler.
     7
     8        We failed to parse animation-play-state as part of the animation shorthand, contrary
     9        to the spec and other browsers.
     10
     11        Fix for both the prefixed and unprefixed properties. There is some compat risk here,
     12        but only changing unprefixed behavior will probably lead to more author confusion.
     13
     14        Test: animations/play-state-in-shorthand.html
     15
     16        * css/CSSParser.cpp:
     17        (WebCore::CSSParser::parseAnimationShorthand):
     18        * css/CSSPropertyNames.in:
     19        * css/StylePropertyShorthand.cpp:
     20        (WebCore::animationShorthandForParsing): Remove the long comment which is no longer relevant
     21        now that the behavior has been written into the spec.
     22
    1232016-04-25  Simon Fraser  <simon.fraser@apple.com>
    224
  • trunk/Source/WebCore/css/CSSParser.cpp

    r199343 r200043  
    37863786    ASSERT(propId == CSSPropertyAnimation || propId == CSSPropertyWebkitAnimation);
    37873787
    3788     const unsigned numProperties = 7;
     3788    const unsigned numProperties = 8;
    37893789    const StylePropertyShorthand& shorthand = animationShorthandForParsing(propId);
    37903790
  • trunk/Source/WebCore/css/CSSPropertyNames.in

    r197617 r200043  
    133133alignment-baseline [SVG]
    134134all [Longhands=all]
    135 animation [Longhands=animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count|animation-direction|animation-fill-mode]
     135animation [Longhands=animation-name|animation-duration|animation-timing-function|animation-delay|animation-iteration-count|animation-direction|animation-fill-mode|animation-play-state]
    136136animation-delay [AnimationProperty, NameForMethods=Delay]
    137137animation-direction [AnimationProperty, NameForMethods=Direction]
     
    373373alt [NameForMethods=ContentAltText, Custom=Value]
    374374-webkit-alt = alt
    375 -webkit-animation [Longhands=-webkit-animation-name|-webkit-animation-duration|-webkit-animation-timing-function|-webkit-animation-delay|-webkit-animation-iteration-count|-webkit-animation-direction|-webkit-animation-fill-mode]
     375-webkit-animation [Longhands=-webkit-animation-name|-webkit-animation-duration|-webkit-animation-timing-function|-webkit-animation-delay|-webkit-animation-iteration-count|-webkit-animation-direction|-webkit-animation-fill-mode|-webkit-animation-play-state]
    376376-webkit-animation-delay [AnimationProperty, NameForMethods=Delay]
    377377-webkit-animation-direction [AnimationProperty, NameForMethods=Direction]
  • trunk/Source/WebCore/css/StylePropertyShorthand.cpp

    r179227 r200043  
    3636StylePropertyShorthand animationShorthandForParsing(CSSPropertyID propId)
    3737{
    38     // When we parse the animation shorthand we need to look for animation-name
    39     // last because otherwise it might match against the keywords for fill mode,
    40     // timing functions and infinite iteration. This means that animation names
    41     // that are the same as keywords (e.g. 'forwards') won't always match in the
    42     // shorthand. In that case the authors should be using longhands (or
    43     // reconsidering their approach). This is covered by the animations spec
    44     // bug: https://www.w3.org/Bugs/Public/show_bug.cgi?id=14790
    45     // And in the spec (editor's draft) at:
    46     // http://dev.w3.org/csswg/css3-animations/#animation-shorthand-property
     38    // Animation-name must come last, so that keywords for other properties in the shorthand
     39    // preferentially match those properties.
    4740    static const CSSPropertyID animationPropertiesForParsing[] = {
    4841        CSSPropertyAnimationDuration,
     
    5245        CSSPropertyAnimationDirection,
    5346        CSSPropertyAnimationFillMode,
     47        CSSPropertyAnimationPlayState,
    5448        CSSPropertyAnimationName
    5549    };
     
    6256        CSSPropertyWebkitAnimationDirection,
    6357        CSSPropertyWebkitAnimationFillMode,
     58        CSSPropertyWebkitAnimationPlayState,
    6459        CSSPropertyWebkitAnimationName
    6560    };
Note: See TracChangeset for help on using the changeset viewer.