Changeset 275160 in webkit


Ignore:
Timestamp:
Mar 29, 2021 9:30:09 AM (16 months ago)
Author:
graouts@webkit.org
Message:

Add support for animating the vertical-align CSS property
​https://bugs.webkit.org/show_bug.cgi?id=223853

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Add 161 PASS results in the WPT suite now that we support animating vertical-align.

  • web-platform-tests/css/css-transitions/animations/vertical-align-composition-expected.txt:
  • web-platform-tests/css/css-transitions/animations/vertical-align-interpolation-expected.txt:
  • web-platform-tests/css/css-transitions/properties-value-001-expected.txt:
  • web-platform-tests/css/css-transitions/properties-value-implicit-001-expected.txt:
  • web-platform-tests/css/css-transitions/properties-value-inherit-001-expected.txt:
  • web-platform-tests/css/css-transitions/properties-value-inherit-002-expected.txt:

Source/WebCore:

Adding support for animating vertical-align revealed a couple of long-standing issues with
regards to our support for this property.

First off, we didn't honor the "inherit" value since it required a custom builder method
to deal with both RenderStyle::verticalAlign() (the type) and RenderStyle::verticalAlignLength()
(the value).

Then, we would hit an assertion when obtaining the computed style for this property and a
calculated value since we didn't pass the RenderStyle to createValue().

We now correctly interpolate this property per the dedicated WPT test, the only issues remaining
being about how our calc serialization (​https://bugs.webkit.org/show_bug.cgi?id=223875).

  • animation/CSSPropertyAnimation.cpp:

(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):

  • css/CSSComputedStyleDeclaration.cpp:

(WebCore::ComputedStyleExtractor::valueForPropertyInStyle):

  • css/CSSProperties.json:
  • style/StyleBuilderCustom.h:

(WebCore::Style::BuilderCustom::applyInheritVerticalAlign):

LayoutTests:

  • TestExpectations: Unskip tests related to vertical-align interpolation since they are

no longer crashing.

Location:
trunk
Files:
14 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r275158 r275160  
     12021-03-28  Antoine Quint  <graouts@webkit.org>
     2
     3        Add support for animating the vertical-align CSS property
     4        https://bugs.webkit.org/show_bug.cgi?id=223853
     5
     6        Reviewed by Antti Koivisto.
     7
     8        * TestExpectations: Unskip tests related to vertical-align interpolation since they are
     9        no longer crashing.
     10
    1112021-03-28  Diego Pino Garcia  <dpino@igalia.com>
    212

  • trunk/LayoutTests/TestExpectations

    r275133 r275160  
    36193619webkit.org/b/207260 imported/w3c/web-platform-tests/web-animations/timing-model/animations/update-playback-rate-zero.html [ ImageOnlyFailure ]
    36203620
    3621 webkit.org/b/207261 [ Debug ] imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition.html [ Skip ]
    3622 webkit.org/b/207261 [ Debug ] imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation.html [ Skip ]
    36233621webkit.org/b/207261 [ Debug ] imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-outset-composition.html [ Skip ]
    36243622webkit.org/b/207261 [ Debug ] imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-width-composition.html [ Skip ]

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r275104 r275160  
     12021-03-28  Antoine Quint  <graouts@webkit.org>
     2
     3        Add support for animating the vertical-align CSS property
     4        https://bugs.webkit.org/show_bug.cgi?id=223853
     5
     6        Reviewed by Antti Koivisto.
     7
     8        Add 161 PASS results in the WPT suite now that we support animating vertical-align.
     9
     10        * web-platform-tests/css/css-transitions/animations/vertical-align-composition-expected.txt:
     11        * web-platform-tests/css/css-transitions/animations/vertical-align-interpolation-expected.txt:
     12        * web-platform-tests/css/css-transitions/properties-value-001-expected.txt:
     13        * web-platform-tests/css/css-transitions/properties-value-implicit-001-expected.txt:
     14        * web-platform-tests/css/css-transitions/properties-value-inherit-001-expected.txt:
     15        * web-platform-tests/css/css-transitions/properties-value-inherit-002-expected.txt:
     16
    1172021-03-26  Tim Nguyen  <ntim.bugs@gmail.com>
    218

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-composition-expected.txt

    r255821 r275160  
    11
    2 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (-0.3) should be [120px] assert_equals: expected "120px " but got "50px "
    3 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (0) should be [150px] assert_equals: expected "150px " but got "50px "
    4 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (0.5) should be [200px] assert_equals: expected "200px " but got "50px "
    5 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (1) should be [250px] assert_equals: expected "250px " but got "50px "
    6 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (1.5) should be [300px] assert_equals: expected "300px " but got "50px "
    7 FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (-0.5) should be [114px] assert_equals: expected "114px " but got "100px "
    8 FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (0) should be [110px] assert_equals: expected "110px " but got "100px "
    9 FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (0.5) should be [106px] assert_equals: expected "106px " but got "100px "
    10 FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (1) should be [102px] assert_equals: expected "102px " but got "100px "
    11 FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (1.5) should be [98px] assert_equals: expected "98px " but got "100px "
    12 FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (-0.3) should be [calc(130px + 4%)] assert_equals: expected "" but got "10 % "
    13 FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (0) should be [calc(100px + 10%)] assert_equals: expected "" but got "10 % "
    14 FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (0.5) should be [calc(50px + 20%)] assert_equals: expected "" but got "10 % "
    15 FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (1) should be [30%] assert_equals: expected "30 % " but got "10 % "
    16 FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (1.5) should be [calc(-50px + 40%)] assert_equals: expected "" but got "10 % "
    17 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (-0.3) should be [135px] assert_equals: expected "135px " but got "50px "
    18 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (0) should be [150px] assert_equals: expected "150px " but got "50px "
    19 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (0.5) should be [175px] assert_equals: expected "175px " but got "50px "
    20 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (1) should be [200px] assert_equals: expected "200px " but got "50px "
    21 FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (1.5) should be [225px] assert_equals: expected "225px " but got "50px "
     2FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (-0.3) should be [120px] assert_equals: expected "120px " but got "70px "
     3FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (0) should be [150px] assert_equals: expected "150px " but got "100px "
     4FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (0.5) should be [200px] assert_equals: expected "200px " but got "150px "
     5FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (1) should be [250px] assert_equals: expected "250px " but got "200px "
     6FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to add [200px] at (1.5) should be [300px] assert_equals: expected "300px " but got "250px "
     7FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (-0.5) should be [114px] assert_equals: expected "114px " but got "14px "
     8FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (0) should be [110px] assert_equals: expected "110px " but got "10px "
     9FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (0.5) should be [106px] assert_equals: expected "106px " but got "6px "
     10FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (1) should be [102px] assert_equals: expected "102px " but got "2px "
     11FAIL Compositing: property <vertical-align> underlying [100px] from add [10px] to add [2px] at (1.5) should be [98px] assert_equals: expected "98px " but got "- 2px "
     12FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (-0.3) should be [calc(130px + 4%)] assert_equals: expected "calc ( 4 % + 130px ) " but got "calc ( ( 100px * 1.3 ) + ( 20 % * - 0.3 ) ) "
     13FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (0) should be [calc(100px + 10%)] assert_equals: expected "calc ( 10 % + 100px ) " but got "100px "
     14FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (0.5) should be [calc(50px + 20%)] assert_equals: expected "calc ( 20 % + 50px ) " but got "calc ( ( 100px * 0.5 ) + ( 20 % * 0.5 ) ) "
     15FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (1) should be [30%] assert_equals: expected "30 % " but got "20 % "
     16FAIL Compositing: property <vertical-align> underlying [10%] from add [100px] to add [20%] at (1.5) should be [calc(-50px + 40%)] assert_equals: expected "calc ( 40 % - 50px ) " but got "calc ( ( 100px * - 0.5 ) + ( 20 % * 1.5 ) ) "
     17FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (-0.3) should be [135px] assert_equals: expected "135px " but got "70px "
     18FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (0) should be [150px] assert_equals: expected "150px " but got "100px "
     19FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (0.5) should be [175px] assert_equals: expected "175px " but got "150px "
     20PASS Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (1) should be [200px]
     21FAIL Compositing: property <vertical-align> underlying [50px] from add [100px] to replace [200px] at (1.5) should be [225px] assert_equals: expected "225px " but got "250px "
    2222

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/animations/vertical-align-interpolation-expected.txt

    r267650 r275160  
    11
    2 FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "40px "
    3 FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (0) should be [10px] assert_equals: expected "10px " but got "40px "
    4 FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "40px "
    5 FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "40px "
     2PASS CSS Transitions: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px]
     3PASS CSS Transitions: property <vertical-align> from neutral to [40px] at (0) should be [10px]
     4PASS CSS Transitions: property <vertical-align> from neutral to [40px] at (0.3) should be [19px]
     5PASS CSS Transitions: property <vertical-align> from neutral to [40px] at (0.6) should be [28px]
    66PASS CSS Transitions: property <vertical-align> from neutral to [40px] at (1) should be [40px]
    7 FAIL CSS Transitions: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "40px "
    8 FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "40px "
    9 FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0) should be [10px] assert_equals: expected "10px " but got "40px "
    10 FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "40px "
    11 FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "40px "
     7PASS CSS Transitions: property <vertical-align> from neutral to [40px] at (1.5) should be [55px]
     8PASS CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px]
     9PASS CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0) should be [10px]
     10PASS CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0.3) should be [19px]
     11PASS CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (0.6) should be [28px]
    1212PASS CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (1) should be [40px]
    13 FAIL CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "40px "
    14 FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "10px "
     13PASS CSS Transitions with transition: all: property <vertical-align> from neutral to [40px] at (1.5) should be [55px]
     14PASS CSS Animations: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px]
    1515PASS CSS Animations: property <vertical-align> from neutral to [40px] at (0) should be [10px]
    16 FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "10px "
    17 FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "10px "
    18 FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
    19 FAIL CSS Animations: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "10px "
    20 FAIL Web Animations: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px] assert_equals: expected "- 5px " but got "10px "
     16PASS CSS Animations: property <vertical-align> from neutral to [40px] at (0.3) should be [19px]
     17PASS CSS Animations: property <vertical-align> from neutral to [40px] at (0.6) should be [28px]
     18PASS CSS Animations: property <vertical-align> from neutral to [40px] at (1) should be [40px]
     19PASS CSS Animations: property <vertical-align> from neutral to [40px] at (1.5) should be [55px]
     20PASS Web Animations: property <vertical-align> from neutral to [40px] at (-0.5) should be [-5px]
    2121PASS Web Animations: property <vertical-align> from neutral to [40px] at (0) should be [10px]
    22 FAIL Web Animations: property <vertical-align> from neutral to [40px] at (0.3) should be [19px] assert_equals: expected "19px " but got "10px "
    23 FAIL Web Animations: property <vertical-align> from neutral to [40px] at (0.6) should be [28px] assert_equals: expected "28px " but got "10px "
    24 FAIL Web Animations: property <vertical-align> from neutral to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
    25 FAIL Web Animations: property <vertical-align> from neutral to [40px] at (1.5) should be [55px] assert_equals: expected "55px " but got "10px "
     22PASS Web Animations: property <vertical-align> from neutral to [40px] at (0.3) should be [19px]
     23PASS Web Animations: property <vertical-align> from neutral to [40px] at (0.6) should be [28px]
     24PASS Web Animations: property <vertical-align> from neutral to [40px] at (1) should be [40px]
     25PASS Web Animations: property <vertical-align> from neutral to [40px] at (1.5) should be [55px]
    2626PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (-0.3) should be [40px]
    2727PASS CSS Transitions: property <vertical-align> from [initial] to [40px] at (0) should be [40px]
    … …  
    3838PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (1) should be [40px]
    3939PASS CSS Transitions with transition: all: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px]
    40 FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (-0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
    41 FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0) should be [initial] assert_equals: expected "baseline " but got "10px "
    42 FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
    43 FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
    44 FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
    45 FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
    46 FAIL CSS Animations: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
    47 FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (-0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
    48 FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0) should be [initial] assert_equals: expected "baseline " but got "10px "
    49 FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0.3) should be [initial] assert_equals: expected "baseline " but got "10px "
    50 FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
    51 FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
    52 FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
    53 FAIL Web Animations: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
    54 FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "40px "
    55 FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "40px "
    56 FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "40px "
    57 FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "40px "
     40PASS CSS Animations: property <vertical-align> from [initial] to [40px] at (-0.3) should be [initial]
     41PASS CSS Animations: property <vertical-align> from [initial] to [40px] at (0) should be [initial]
     42PASS CSS Animations: property <vertical-align> from [initial] to [40px] at (0.3) should be [initial]
     43PASS CSS Animations: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px]
     44PASS CSS Animations: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px]
     45PASS CSS Animations: property <vertical-align> from [initial] to [40px] at (1) should be [40px]
     46PASS CSS Animations: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px]
     47PASS Web Animations: property <vertical-align> from [initial] to [40px] at (-0.3) should be [initial]
     48PASS Web Animations: property <vertical-align> from [initial] to [40px] at (0) should be [initial]
     49PASS Web Animations: property <vertical-align> from [initial] to [40px] at (0.3) should be [initial]
     50PASS Web Animations: property <vertical-align> from [initial] to [40px] at (0.5) should be [40px]
     51PASS Web Animations: property <vertical-align> from [initial] to [40px] at (0.6) should be [40px]
     52PASS Web Animations: property <vertical-align> from [initial] to [40px] at (1) should be [40px]
     53PASS Web Animations: property <vertical-align> from [initial] to [40px] at (1.5) should be [40px]
     54PASS CSS Transitions: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px]
     55PASS CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0) should be [100px]
     56PASS CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px]
     57PASS CSS Transitions: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px]
    5858PASS CSS Transitions: property <vertical-align> from [inherit] to [40px] at (1) should be [40px]
    59 FAIL CSS Transitions: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px] assert_equals: expected "10px " but got "40px "
    60 FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "40px "
    61 FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "40px "
    62 FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "40px "
    63 FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "40px "
     59PASS CSS Transitions: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px]
     60PASS CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px]
     61PASS CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0) should be [100px]
     62PASS CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px]
     63PASS CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px]
    6464PASS CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (1) should be [40px]
    65 FAIL CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px] assert_equals: expected "10px " but got "40px "
    66 FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "10px "
    67 FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "10px "
    68 FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "10px "
    69 FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "10px "
    70 FAIL CSS Animations: property <vertical-align> from [inherit] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
     65PASS CSS Transitions with transition: all: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px]
     66PASS CSS Animations: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px]
     67PASS CSS Animations: property <vertical-align> from [inherit] to [40px] at (0) should be [100px]
     68PASS CSS Animations: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px]
     69PASS CSS Animations: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px]
     70PASS CSS Animations: property <vertical-align> from [inherit] to [40px] at (1) should be [40px]
    7171PASS CSS Animations: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px]
    72 FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px] assert_equals: expected "130px " but got "10px "
    73 FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (0) should be [100px] assert_equals: expected "100px " but got "10px "
    74 FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px] assert_equals: expected "82px " but got "10px "
    75 FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px] assert_equals: expected "64px " but got "10px "
    76 FAIL Web Animations: property <vertical-align> from [inherit] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
     72PASS Web Animations: property <vertical-align> from [inherit] to [40px] at (-0.5) should be [130px]
     73PASS Web Animations: property <vertical-align> from [inherit] to [40px] at (0) should be [100px]
     74PASS Web Animations: property <vertical-align> from [inherit] to [40px] at (0.3) should be [82px]
     75PASS Web Animations: property <vertical-align> from [inherit] to [40px] at (0.6) should be [64px]
     76PASS Web Animations: property <vertical-align> from [inherit] to [40px] at (1) should be [40px]
    7777PASS Web Animations: property <vertical-align> from [inherit] to [40px] at (1.5) should be [10px]
    7878PASS CSS Transitions: property <vertical-align> from [unset] to [40px] at (-0.3) should be [40px]
    … …  
    9090PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (1) should be [40px]
    9191PASS CSS Transitions with transition: all: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px]
    92 FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (-0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
    93 FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0) should be [unset] assert_equals: expected "baseline " but got "10px "
    94 FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
    95 FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
    96 FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
    97 FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
    98 FAIL CSS Animations: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
    99 FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (-0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
    100 FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0) should be [unset] assert_equals: expected "baseline " but got "10px "
    101 FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0.3) should be [unset] assert_equals: expected "baseline " but got "10px "
    102 FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px] assert_equals: expected "40px " but got "10px "
    103 FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px] assert_equals: expected "40px " but got "10px "
    104 FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (1) should be [40px] assert_equals: expected "40px " but got "10px "
    105 FAIL Web Animations: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px] assert_equals: expected "40px " but got "10px "
    106 FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "100px "
    107 FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "100px "
    108 FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "100px "
    109 FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "100px "
     92PASS CSS Animations: property <vertical-align> from [unset] to [40px] at (-0.3) should be [unset]
     93PASS CSS Animations: property <vertical-align> from [unset] to [40px] at (0) should be [unset]
     94PASS CSS Animations: property <vertical-align> from [unset] to [40px] at (0.3) should be [unset]
     95PASS CSS Animations: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px]
     96PASS CSS Animations: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px]
     97PASS CSS Animations: property <vertical-align> from [unset] to [40px] at (1) should be [40px]
     98PASS CSS Animations: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px]
     99PASS Web Animations: property <vertical-align> from [unset] to [40px] at (-0.3) should be [unset]
     100PASS Web Animations: property <vertical-align> from [unset] to [40px] at (0) should be [unset]
     101PASS Web Animations: property <vertical-align> from [unset] to [40px] at (0.3) should be [unset]
     102PASS Web Animations: property <vertical-align> from [unset] to [40px] at (0.5) should be [40px]
     103PASS Web Animations: property <vertical-align> from [unset] to [40px] at (0.6) should be [40px]
     104PASS Web Animations: property <vertical-align> from [unset] to [40px] at (1) should be [40px]
     105PASS Web Animations: property <vertical-align> from [unset] to [40px] at (1.5) should be [40px]
     106PASS CSS Transitions: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px]
     107PASS CSS Transitions: property <vertical-align> from [0px] to [100px] at (0) should be [0px]
     108PASS CSS Transitions: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px]
     109PASS CSS Transitions: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px]
    110110PASS CSS Transitions: property <vertical-align> from [0px] to [100px] at (1) should be [100px]
    111 FAIL CSS Transitions: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "100px "
    112 FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "100px "
    113 FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "100px "
    114 FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "100px "
    115 FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "100px "
     111PASS CSS Transitions: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px]
     112PASS CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px]
     113PASS CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0) should be [0px]
     114PASS CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px]
     115PASS CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px]
    116116PASS CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (1) should be [100px]
    117 FAIL CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "100px "
    118 FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "10px "
    119 FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "10px "
    120 FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "10px "
    121 FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "10px "
    122 FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (1) should be [100px] assert_equals: expected "100px " but got "10px "
    123 FAIL CSS Animations: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "10px "
    124 FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px] assert_equals: expected "- 50px " but got "10px "
    125 FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (0) should be [0px] assert_equals: expected "0px " but got "10px "
    126 FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px] assert_equals: expected "30px " but got "10px "
    127 FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px] assert_equals: expected "60px " but got "10px "
    128 FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (1) should be [100px] assert_equals: expected "100px " but got "10px "
    129 FAIL Web Animations: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px] assert_equals: expected "150px " but got "10px "
    130 FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "40 % "
    131 FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "40 % "
    132 FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "40 % "
    133 FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "40 % "
    134 FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "40 % "
    135 FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "40 % "
    136 FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "40 % "
    137 FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "40 % "
    138 FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "40 % "
    139 FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "40 % "
    140 FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "10px "
    141 FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "10px "
    142 FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "10px "
    143 FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "10px "
    144 FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "10px "
    145 FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "" but got "10px "
    146 FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "" but got "10px "
    147 FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "" but got "10px "
    148 FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "" but got "10px "
    149 FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "" but got "10px "
     117PASS CSS Transitions with transition: all: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px]
     118PASS CSS Animations: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px]
     119PASS CSS Animations: property <vertical-align> from [0px] to [100px] at (0) should be [0px]
     120PASS CSS Animations: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px]
     121PASS CSS Animations: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px]
     122PASS CSS Animations: property <vertical-align> from [0px] to [100px] at (1) should be [100px]
     123PASS CSS Animations: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px]
     124PASS Web Animations: property <vertical-align> from [0px] to [100px] at (-0.5) should be [-50px]
     125PASS Web Animations: property <vertical-align> from [0px] to [100px] at (0) should be [0px]
     126PASS Web Animations: property <vertical-align> from [0px] to [100px] at (0.3) should be [30px]
     127PASS Web Animations: property <vertical-align> from [0px] to [100px] at (0.6) should be [60px]
     128PASS Web Animations: property <vertical-align> from [0px] to [100px] at (1) should be [100px]
     129PASS Web Animations: property <vertical-align> from [0px] to [100px] at (1.5) should be [150px]
     130FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "calc ( - 20 % + 60px ) " but got "calc ( ( 40px * 1.5 ) + ( 40 % * - 0.5 ) ) "
     131FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "calc ( 0 % + 40px ) " but got "40px "
     132FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "calc ( 12 % + 28px ) " but got "calc ( ( 40px * 0.7 ) + ( 40 % * 0.3 ) ) "
     133FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "calc ( 40 % + 0px ) " but got "40 % "
     134FAIL CSS Transitions: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "calc ( 60 % - 20px ) " but got "calc ( ( 40px * - 0.5 ) + ( 40 % * 1.5 ) ) "
     135FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "calc ( - 20 % + 60px ) " but got "calc ( ( 40px * 1.5 ) + ( 40 % * - 0.5 ) ) "
     136FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "calc ( 0 % + 40px ) " but got "40px "
     137FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "calc ( 12 % + 28px ) " but got "calc ( ( 40px * 0.7 ) + ( 40 % * 0.3 ) ) "
     138FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "calc ( 40 % + 0px ) " but got "40 % "
     139FAIL CSS Transitions with transition: all: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "calc ( 60 % - 20px ) " but got "calc ( ( 40px * - 0.5 ) + ( 40 % * 1.5 ) ) "
     140FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "calc ( - 20 % + 60px ) " but got "calc ( ( 40px * 1.5 ) + ( 40 % * - 0.5 ) ) "
     141FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "calc ( 0 % + 40px ) " but got "40px "
     142FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "calc ( 12 % + 28px ) " but got "calc ( ( 40px * 0.7 ) + ( 40 % * 0.3 ) ) "
     143FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "calc ( 40 % + 0px ) " but got "40 % "
     144FAIL CSS Animations: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "calc ( 60 % - 20px ) " but got "calc ( ( 40px * - 0.5 ) + ( 40 % * 1.5 ) ) "
     145FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (-0.5) should be [calc(60px - 20%)] assert_equals: expected "calc ( - 20 % + 60px ) " but got "calc ( ( 40px * 1.5 ) + ( 40 % * - 0.5 ) ) "
     146FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (0) should be [calc(40px + 0%)] assert_equals: expected "calc ( 0 % + 40px ) " but got "40px "
     147FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (0.3) should be [calc(28px + 12%)] assert_equals: expected "calc ( 12 % + 28px ) " but got "calc ( ( 40px * 0.7 ) + ( 40 % * 0.3 ) ) "
     148FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (1) should be [calc(0px + 40%)] assert_equals: expected "calc ( 40 % + 0px ) " but got "40 % "
     149FAIL Web Animations: property <vertical-align> from [40px] to [40%] at (1.5) should be [calc(-20px + 60%)] assert_equals: expected "calc ( 60 % - 20px ) " but got "calc ( ( 40px * - 0.5 ) + ( 40 % * 1.5 ) ) "
    150150PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (-0.3) should be [40%]
    151151PASS CSS Transitions: property <vertical-align> from [super] to [40%] at (0) should be [40%]
    … …  
    162162PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (1) should be [40%]
    163163PASS CSS Transitions with transition: all: property <vertical-align> from [super] to [40%] at (1.5) should be [40%]
    164 FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (-0.3) should be [super] assert_equals: expected "super " but got "10px "
    165 FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0) should be [super] assert_equals: expected "super " but got "10px "
    166 FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0.3) should be [super] assert_equals: expected "super " but got "10px "
    167 FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0.5) should be [40%] assert_equals: expected "40 % " but got "10px "
    168 FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (0.6) should be [40%] assert_equals: expected "40 % " but got "10px "
    169 FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (1) should be [40%] assert_equals: expected "40 % " but got "10px "
    170 FAIL CSS Animations: property <vertical-align> from [super] to [40%] at (1.5) should be [40%] assert_equals: expected "40 % " but got "10px "
    171 FAIL Web Animations: property <vertical-align> from [super] to [40%] at (-0.3) should be [super] assert_equals: expected "super " but got "10px "
    172 FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0) should be [super] assert_equals: expected "super " but got "10px "
    173 FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0.3) should be [super] assert_equals: expected "super " but got "10px "
    174 FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0.5) should be [40%] assert_equals: expected "40 % " but got "10px "
    175 FAIL Web Animations: property <vertical-align> from [super] to [40%] at (0.6) should be [40%] assert_equals: expected "40 % " but got "10px "
    176 FAIL Web Animations: property <vertical-align> from [super] to [40%] at (1) should be [40%] assert_equals: expected "40 % " but got "10px "
    177 FAIL Web Animations: property <vertical-align> from [super] to [40%] at (1.5) should be [40%] assert_equals: expected "40 % " but got "10px "
     164PASS CSS Animations: property <vertical-align> from [super] to [40%] at (-0.3) should be [super]
     165PASS CSS Animations: property <vertical-align> from [super] to [40%] at (0) should be [super]
     166PASS CSS Animations: property <vertical-align> from [super] to [40%] at (0.3) should be [super]
     167PASS CSS Animations: property <vertical-align> from [super] to [40%] at (0.5) should be [40%]
     168PASS CSS Animations: property <vertical-align> from [super] to [40%] at (0.6) should be [40%]
     169PASS CSS Animations: property <vertical-align> from [super] to [40%] at (1) should be [40%]
     170PASS CSS Animations: property <vertical-align> from [super] to [40%] at (1.5) should be [40%]
     171PASS Web Animations: property <vertical-align> from [super] to [40%] at (-0.3) should be [super]
     172PASS Web Animations: property <vertical-align> from [super] to [40%] at (0) should be [super]
     173PASS Web Animations: property <vertical-align> from [super] to [40%] at (0.3) should be [super]
     174PASS Web Animations: property <vertical-align> from [super] to [40%] at (0.5) should be [40%]
     175PASS Web Animations: property <vertical-align> from [super] to [40%] at (0.6) should be [40%]
     176PASS Web Animations: property <vertical-align> from [super] to [40%] at (1) should be [40%]
     177PASS Web Animations: property <vertical-align> from [super] to [40%] at (1.5) should be [40%]
    178178

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-001-expected.txt

    r267650 r275160  
    536536PASS clip rectangle(rectangle) / values
    537537PASS clip rectangle(rectangle) / events
    538 FAIL vertical-align length(pt) / values assert_not_equals: must not be target value after start got disallowed value "13.333333015441895px"
    539 FAIL vertical-align length(pt) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    540 FAIL vertical-align length(pc) / values assert_not_equals: must not be target value after start got disallowed value "160px"
    541 FAIL vertical-align length(pc) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    542 FAIL vertical-align length(px) / values assert_not_equals: must not be target value after start got disallowed value "10px"
    543 FAIL vertical-align length(px) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    544 FAIL vertical-align length(em) / values assert_not_equals: must not be target value after start got disallowed value "160px"
    545 FAIL vertical-align length(em) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    546 FAIL vertical-align length(ex) / values assert_not_equals: must not be target value after start got disallowed value "71.796875px"
    547 FAIL vertical-align length(ex) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    548 FAIL vertical-align length(mm) / values assert_not_equals: must not be target value after start got disallowed value "37.7952766418457px"
    549 FAIL vertical-align length(mm) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    550 FAIL vertical-align length(cm) / values assert_not_equals: must not be target value after start got disallowed value "377.9527587890625px"
    551 FAIL vertical-align length(cm) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    552 FAIL vertical-align length(in) / values assert_not_equals: must not be target value after start got disallowed value "960px"
    553 FAIL vertical-align length(in) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    554 FAIL vertical-align percentage(%) / values assert_not_equals: must not be target value after start got disallowed value "80%"
    555 FAIL vertical-align percentage(%) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
     538PASS vertical-align length(pt) / values
     539PASS vertical-align length(pt) / events
     540PASS vertical-align length(pc) / values
     541PASS vertical-align length(pc) / events
     542PASS vertical-align length(px) / values
     543PASS vertical-align length(px) / events
     544PASS vertical-align length(em) / values
     545PASS vertical-align length(em) / events
     546PASS vertical-align length(ex) / values
     547PASS vertical-align length(ex) / events
     548PASS vertical-align length(mm) / values
     549PASS vertical-align length(mm) / events
     550PASS vertical-align length(cm) / values
     551PASS vertical-align length(cm) / events
     552PASS vertical-align length(in) / values
     553PASS vertical-align length(in) / events
     554PASS vertical-align percentage(%) / values
     555PASS vertical-align percentage(%) / events
    556556PASS opacity number[0,1](zero-to-one) / values
    557557PASS opacity number[0,1](zero-to-one) / events

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-implicit-001-expected.txt

    r267650 r275160  
    5858PASS outline-width length-em(em) / values
    5959PASS outline-width length-em(em) / events
    60 FAIL vertical-align length-em(em) / values assert_not_equals: must not be target value after start got disallowed value "33px"
    61 FAIL vertical-align length-em(em) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
     60PASS vertical-align length-em(em) / values
     61PASS vertical-align length-em(em) / events
    6262Text sample
    6363

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-001-expected.txt

    r267650 r275160  
    536536PASS clip rectangle(rectangle) / values
    537537PASS clip rectangle(rectangle) / events
    538 FAIL vertical-align length(pt) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    539 FAIL vertical-align length(pt) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    540 FAIL vertical-align length(pc) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    541 FAIL vertical-align length(pc) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    542 FAIL vertical-align length(px) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    543 FAIL vertical-align length(px) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    544 FAIL vertical-align length(em) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    545 FAIL vertical-align length(em) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    546 FAIL vertical-align length(ex) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    547 FAIL vertical-align length(ex) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    548 FAIL vertical-align length(mm) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    549 FAIL vertical-align length(mm) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    550 FAIL vertical-align length(cm) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    551 FAIL vertical-align length(cm) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    552 FAIL vertical-align length(in) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    553 FAIL vertical-align length(in) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
    554 FAIL vertical-align percentage(%) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    555 FAIL vertical-align percentage(%) / events assert_equals: Expected TransitionEnd events triggered on .container expected "vertical-align:2s" but got ""
     538PASS vertical-align length(pt) / values
     539PASS vertical-align length(pt) / events
     540PASS vertical-align length(pc) / values
     541PASS vertical-align length(pc) / events
     542PASS vertical-align length(px) / values
     543PASS vertical-align length(px) / events
     544PASS vertical-align length(em) / values
     545PASS vertical-align length(em) / events
     546PASS vertical-align length(ex) / values
     547PASS vertical-align length(ex) / events
     548PASS vertical-align length(mm) / values
     549PASS vertical-align length(mm) / events
     550PASS vertical-align length(cm) / values
     551PASS vertical-align length(cm) / events
     552PASS vertical-align length(in) / values
     553PASS vertical-align length(in) / events
     554PASS vertical-align percentage(%) / values
     555PASS vertical-align percentage(%) / events
    556556PASS opacity number[0,1](zero-to-one) / values
    557557PASS opacity number[0,1](zero-to-one) / events

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/properties-value-inherit-002-expected.txt

    r267650 r275160  
    536536PASS clip rectangle(rectangle) / values
    537537PASS clip rectangle(rectangle) / events
    538 FAIL vertical-align length(pt) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    539 FAIL vertical-align length(pt) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    540 FAIL vertical-align length(pc) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    541 FAIL vertical-align length(pc) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    542 FAIL vertical-align length(px) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    543 FAIL vertical-align length(px) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    544 FAIL vertical-align length(em) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    545 FAIL vertical-align length(em) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    546 FAIL vertical-align length(ex) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    547 FAIL vertical-align length(ex) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    548 FAIL vertical-align length(mm) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    549 FAIL vertical-align length(mm) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    550 FAIL vertical-align length(cm) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    551 FAIL vertical-align length(cm) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    552 FAIL vertical-align length(in) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    553 FAIL vertical-align length(in) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
    554 FAIL vertical-align percentage(%) / values assert_not_equals: initial and target values may not match got disallowed value "auto"
    555 FAIL vertical-align percentage(%) / events assert_equals: Expected TransitionEnd events triggered on .transition expected "vertical-align:2s" but got ""
     538PASS vertical-align length(pt) / values
     539PASS vertical-align length(pt) / events
     540PASS vertical-align length(pc) / values
     541PASS vertical-align length(pc) / events
     542PASS vertical-align length(px) / values
     543PASS vertical-align length(px) / events
     544PASS vertical-align length(em) / values
     545PASS vertical-align length(em) / events
     546PASS vertical-align length(ex) / values
     547PASS vertical-align length(ex) / events
     548PASS vertical-align length(mm) / values
     549PASS vertical-align length(mm) / events
     550PASS vertical-align length(cm) / values
     551PASS vertical-align length(cm) / events
     552PASS vertical-align length(in) / values
     553PASS vertical-align length(in) / events
     554PASS vertical-align percentage(%) / values
     555PASS vertical-align percentage(%) / events
    556556PASS opacity number[0,1](zero-to-one) / values
    557557PASS opacity number[0,1](zero-to-one) / events

  • trunk/Source/WebCore/ChangeLog

    r275154 r275160  
     12021-03-28  Antoine Quint  <graouts@webkit.org>
     2
     3        Add support for animating the vertical-align CSS property
     4        https://bugs.webkit.org/show_bug.cgi?id=223853
     5
     6        Reviewed by Antti Koivisto.
     7
     8        Adding support for animating vertical-align revealed a couple of long-standing issues with
     9        regards to our support for this property.
     10
     11        First off, we didn't honor the "inherit" value since it required a custom builder method
     12        to deal with both RenderStyle::verticalAlign() (the type) and RenderStyle::verticalAlignLength()
     13        (the value).
     14
     15        Then, we would hit an assertion when obtaining the computed style for this property and a
     16        calculated value since we didn't pass the RenderStyle to createValue().
     17
     18        We now correctly interpolate this property per the dedicated WPT test, the only issues remaining
     19        being about how our calc serialization (https://bugs.webkit.org/show_bug.cgi?id=223875).
     20
     21        * animation/CSSPropertyAnimation.cpp:
     22        (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
     23        * css/CSSComputedStyleDeclaration.cpp:
     24        (WebCore::ComputedStyleExtractor::valueForPropertyInStyle):
     25        * css/CSSProperties.json:
     26        * style/StyleBuilderCustom.h:
     27        (WebCore::Style::BuilderCustom::applyInheritVerticalAlign):
     28
    1292021-03-28  Sam Weinig  <weinig@apple.com>
    230

  • trunk/Source/WebCore/animation/CSSPropertyAnimation.cpp

    r275104 r275160  
    721721}
    722722
    723 class LengthPropertyWrapper final : public PropertyWrapperGetter<const Length&> {
     723class LengthPropertyWrapper : public PropertyWrapperGetter<const Length&> {
    724724    WTF_MAKE_FAST_ALLOCATED;
    725725public:
    … …  
    735735    }
    736736
    737 private:
    738     bool canInterpolate(const RenderStyle* from, const RenderStyle* to) const final
     737protected:
     738    bool canInterpolate(const RenderStyle* from, const RenderStyle* to) const override
    739739    {
    740740        return canInterpolateLengths(value(from), value(to), m_flags.contains(Flags::IsLengthPercentage));
    741741    }
    742742
    743     void blend(const CSSPropertyBlendingClient* client, RenderStyle* destination, const RenderStyle* from, const RenderStyle* to, double progress) const final
     743    void blend(const CSSPropertyBlendingClient* client, RenderStyle* destination, const RenderStyle* from, const RenderStyle* to, double progress) const override
    744744    {
    745745        auto valueRange = m_flags.contains(Flags::NegativeLengthsAreInvalid) ? ValueRangeNonNegative : ValueRangeAll;
    … …  
    747747    }
    748748
     749private:
    749750    void (RenderStyle::*m_setter)(Length&&);
    750751    OptionSet<Flags> m_flags;
    … …  
    19261927};
    19271928
     1929class VerticalAlignWrapper final : public LengthPropertyWrapper {
     1930    WTF_MAKE_FAST_ALLOCATED;
     1931public:
     1932    VerticalAlignWrapper()
     1933        : LengthPropertyWrapper(CSSPropertyVerticalAlign, &RenderStyle::verticalAlignLength, &RenderStyle::setVerticalAlignLength, LengthPropertyWrapper::Flags::IsLengthPercentage)
     1934    {
     1935    }
     1936
     1937private:
     1938    bool canInterpolate(const RenderStyle* from, const RenderStyle* to) const final
     1939    {
     1940        return from->verticalAlign() == VerticalAlign::Length && to->verticalAlign() == VerticalAlign::Length && LengthPropertyWrapper::canInterpolate(from, to);
     1941    }
     1942
     1943    void blend(const CSSPropertyBlendingClient* client, RenderStyle* destination, const RenderStyle* from, const RenderStyle* to, double progress) const final
     1944    {
     1945        LengthPropertyWrapper::blend(client, destination, from, to, progress);
     1946        auto* blendingStyle = !canInterpolate(from, to) && progress ? to : from;
     1947        destination->setVerticalAlign(blendingStyle->verticalAlign());
     1948    }
     1949};
     1950
    19281951class PerspectiveWrapper final : public NonNegativeFloatPropertyWrapper {
    19291952    WTF_MAKE_FAST_ALLOCATED;
    … …  
    21482171        new LengthPropertyWrapper(CSSPropertyWordSpacing, &RenderStyle::wordSpacing, &RenderStyle::setWordSpacing),
    21492172        new LengthPropertyWrapper(CSSPropertyTextIndent, &RenderStyle::textIndent, &RenderStyle::setTextIndent, LengthPropertyWrapper::Flags::IsLengthPercentage),
     2173        new VerticalAlignWrapper,
    21502174
    21512175        new PerspectiveWrapper,

  • trunk/Source/WebCore/css/CSSComputedStyleDeclaration.cpp

    r275141 r275160  
    33023302                return cssValuePool.createIdentifierValue(CSSValueWebkitBaselineMiddle);
    33033303            case VerticalAlign::Length:
    3304                 return cssValuePool.createValue(style.verticalAlignLength());
     3304                return cssValuePool.createValue(style.verticalAlignLength(), style);
    33053305            }
    33063306            ASSERT_NOT_REACHED();

  • trunk/Source/WebCore/css/CSSProperties.json

    r275092 r275160  
    43314331        "vertical-align": {
    43324332            "codegen-properties": {
    4333                 "custom": "Value"
     4333                "custom": "Inherit|Value"
    43344334            },
    43354335            "specification": {

  • trunk/Source/WebCore/style/StyleBuilderCustom.h

    r275141 r275160  
    140140    static void applyValueBaselineShift(BuilderState&, CSSValue&);
    141141    static void applyValueDirection(BuilderState&, CSSValue&);
     142    static void applyInheritVerticalAlign(BuilderState&);
    142143    static void applyValueVerticalAlign(BuilderState&, CSSValue&);
    143144    static void applyInitialTextAlign(BuilderState&);
    … …  
    329330    }
    330331    return true;
     332}
     333
     334inline void BuilderCustom::applyInheritVerticalAlign(BuilderState& builderState)
     335{
     336    builderState.style().setVerticalAlignLength(forwardInheritedValue(builderState.parentStyle().verticalAlignLength()));
     337    builderState.style().setVerticalAlign(forwardInheritedValue(builderState.parentStyle().verticalAlign()));
    331338}
    332339
Note: See TracChangeset for help on using the changeset viewer.