Changeset 275015 in webkit


Ignore:
Timestamp:
Mar 25, 2021 5:22:22 AM (16 months ago)
Author:
graouts@webkit.org
Message:

Improve interpolation of the shape-outside CSS property
​https://bugs.webkit.org/show_bug.cgi?id=223738

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Add another 29 PASS results for shape-outside interpolation.

  • web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt:
  • web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt:
  • web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:

Source/WebCore:

While we had logic to deal with cases where ShapeValue objects could not be interpolated, we did not make
use of it in the animation wrapper. We now move this logic from the blendFunc() to the canInterpolate()
override method on the wrapper to correctly interpolate only when possible.

  • animation/CSSPropertyAnimation.cpp:

(WebCore::blendFunc):

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r274978 r275015  
     12021-03-25  Antoine Quint  <graouts@webkit.org>
     2
     3        Improve interpolation of the shape-outside CSS property
     4        https://bugs.webkit.org/show_bug.cgi?id=223738
     5
     6        Reviewed by Antti Koivisto.
     7
     8        Add another 29 PASS results for shape-outside interpolation.
     9
     10        * web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt:
     11        * web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt:
     12        * web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt:
     13
    1142021-03-24  Antoine Quint  <graouts@webkit.org>
    215

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-composition-expected.txt

    r274353 r275015  
    1212PASS Compositing: property <shape-outside> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1) should be [circle(50% at 150px 150%)]
    1313FAIL Compositing: property <shape-outside> underlying [circle(100px at 20px 20%)] from add [circle(50px at 50px 50%)] to replace [circle(50% at 150px 150%)] at (1.5) should be [circle(calc(-75px + 75%) at 190px 190%)] assert_equals: expected "circle ( calc ( 75 % - 75px ) at 190px 190 % ) " but got "circle ( calc ( ( 50px * - 0.5 ) + ( 50 % * 1.5 ) ) at 200px 200 % ) "
    14 FAIL Compositing: property <shape-outside> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.25) should be [circle(farthest-side at 25px 75%)] assert_equals: expected "circle ( farthest - side at 25px 75 % ) " but got "circle ( farthest - side at 50px 50 % ) "
     14PASS Compositing: property <shape-outside> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.25) should be [circle(farthest-side at 25px 75%)]
    1515PASS Compositing: property <shape-outside> underlying [circle(farthest-side at 25px 75%)] from add [circle(farthest-side at 25px 75%)] to add [circle(farthest-side at 50px center)] at (0.75) should be [circle(farthest-side at 50px 50%)]
    16 FAIL Compositing: property <shape-outside> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.25) should be [circle(100px at 20px 40px)] assert_equals: expected "circle ( 100px at 20px 40px ) " but got "circle ( farthest - side at 30px 40px ) "
     16FAIL Compositing: property <shape-outside> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.25) should be [circle(100px at 20px 40px)] assert_equals: expected "circle ( 100px at 20px 40px ) " but got "circle ( 50px at 10px 20px ) "
    1717PASS Compositing: property <shape-outside> underlying [circle(50px at 10px 20px)] from add [circle(50px at 10px 20px)] to add [circle(farthest-side at 30px 40px)] at (0.75) should be [circle(farthest-side at 30px 40px)]
    1818FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from add [ellipse(40px 30px at 20px 10px)] to add [ellipse(140px 130px at 120px 110px)] at (-0.3) should be [ellipse(20px 20px at 20px 20px)] assert_equals: expected "ellipse ( 20px 20px at 20px 20px ) " but got "ellipse ( 10px 0px at - 10px - 20px ) "
    … …  
    2828FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1) should be [ellipse(50px 50px at 50px 50px)] assert_equals: expected "ellipse ( 50px 50px at 50px 50px ) " but got "ellipse ( 40px 30px at 20px 10px ) "
    2929FAIL Compositing: property <shape-outside> underlying [ellipse(10px 20px at 30px 40px)] from replace [ellipse(40px 30px at 20px 10px)] to add [ellipse(40px 30px at 20px 10px)] at (1.5) should be [ellipse(55px 60px at 65px 70px)] assert_equals: expected "ellipse ( 55px 60px at 65px 70px ) " but got "ellipse ( 40px 30px at 20px 10px ) "
    30 FAIL Compositing: property <shape-outside> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.25) should be [ellipse(at 50% 50%)] assert_equals: expected "ellipse ( at 50 % 50 % ) " but got "ellipse ( closest - side farthest - side at 50 % 50 % ) "
     30PASS Compositing: property <shape-outside> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.25) should be [ellipse(at 50% 50%)]
    3131PASS Compositing: property <shape-outside> underlying [ellipse(25px 75%)] from add [ellipse()] to add [ellipse(closest-side farthest-side)] at (0.75) should be [ellipse(closest-side farthest-side at 50% 50%)]
    3232FAIL Compositing: property <shape-outside> underlying [inset(20px)] from add [inset(20px)] to add [inset(40%)] at (-0.3) should be [inset(calc(46px + -12%))] assert_equals: expected "inset ( calc ( - 12 % + 46px ) ) " but got "inset ( calc ( ( 20px * 1.3 ) + ( 40 % * - 0.3 ) ) ) "
    … …  
    6060FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1) should be [polygon(evenodd, 120px 140px)] assert_equals: expected "polygon ( evenodd , 120px 140px ) " but got "polygon ( evenodd , 110px 120px ) "
    6161FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(evenodd, 110px 120px)] at (1.5) should be [polygon(evenodd, 170px 190px)] assert_equals: expected "polygon ( evenodd , 170px 190px ) " but got "polygon ( evenodd , 160px 170px ) "
    62 FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.25) should be [polygon(evenodd, 20px 40px)] assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( 30px 40px ) "
     62FAIL Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.25) should be [polygon(evenodd, 20px 40px)] assert_equals: expected "polygon ( evenodd , 20px 40px ) " but got "polygon ( evenodd , 10px 20px ) "
    6363PASS Compositing: property <shape-outside> underlying [polygon(evenodd, 10px 20px)] from add [polygon(evenodd, 10px 20px)] to add [polygon(nonzero, 30px 40px)] at (0.75) should be [polygon(30px 40px)]
    64 FAIL Compositing: property <shape-outside> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.25) should be [polygon(20px 40px, 60px 80px)] assert_equals: expected "polygon ( 20px 40px , 60px 80px ) " but got "polygon ( 30px 40px ) "
     64FAIL Compositing: property <shape-outside> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.25) should be [polygon(20px 40px, 60px 80px)] assert_equals: expected "polygon ( 20px 40px , 60px 80px ) " but got "polygon ( 10px 20px , 30px 40px ) "
    6565PASS Compositing: property <shape-outside> underlying [polygon(10px 20px, 30px 40px)] from add [polygon(10px 20px, 30px 40px)] to add [polygon(30px 40px)] at (0.75) should be [polygon(30px 40px)]
    6666

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-shapes/animation/shape-outside-interpolation-expected.txt

    r272904 r275015  
    3838PASS CSS Transitions with transition: all: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
    3939PASS CSS Transitions with transition: all: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
    40 FAIL CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    41 FAIL CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    42 FAIL CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
     40PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial]
     41PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial]
     42PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial]
    4343PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
    4444PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
    4545PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
    4646PASS CSS Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
    47 FAIL Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    48 FAIL Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    49 FAIL Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
     47PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (-0.3) should be [initial]
     48PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0) should be [initial]
     49PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.3) should be [initial]
    5050PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
    5151PASS Web Animations: property <shape-outside> from [initial] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
    … …  
    9090PASS CSS Transitions with transition: all: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
    9191PASS CSS Transitions with transition: all: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
    92 FAIL CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    93 FAIL CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    94 FAIL CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
     92PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset]
     93PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset]
     94PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset]
    9595PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
    9696PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
    9797PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1) should be [circle(40% at 20% 20%)]
    9898PASS CSS Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (1.5) should be [circle(40% at 20% 20%)]
    99 FAIL Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    100 FAIL Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
    101 FAIL Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset] assert_equals: expected "none " but got "circle ( 40 % at 20 % 20 % ) "
     99PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (-0.3) should be [unset]
     100PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0) should be [unset]
     101PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.3) should be [unset]
    102102PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.5) should be [circle(40% at 20% 20%)]
    103103PASS Web Animations: property <shape-outside> from [unset] to [circle(40% at 20% 20%)] at (0.6) should be [circle(40% at 20% 20%)]
    … …  
    190190PASS CSS Transitions with transition: all: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    191191PASS CSS Transitions with transition: all: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    192 FAIL CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
    193 FAIL CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
    194 FAIL CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
     192PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
     193PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
     194PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
    195195PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    196196PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.6) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    197197PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    198198PASS CSS Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (1.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    199 FAIL Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
    200 FAIL Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
    201 FAIL Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] assert_equals: expected "polygon ( evenodd , 0px 0px , 25px 25px , 50px 50px ) " but got "polygon ( 25px 25px , 50px 50px , 75px 75px ) "
     199PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (-0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
     200PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
     201PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.3) should be [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)]
    202202PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.5) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    203203PASS Web Animations: property <shape-outside> from [polygon(evenodd, 0px 0px, 25px 25px, 50px 50px)] to [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)] at (0.6) should be [polygon(nonzero, 25px 25px, 50px 50px, 75px 75px)]
    … …  
    242242PASS CSS Transitions with transition: all: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
    243243PASS CSS Transitions with transition: all: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
    244 FAIL CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
    245 FAIL CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
    246 FAIL CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
     244PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none]
     245PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none]
     246PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none]
    247247PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
    248248PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]
    249249PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1) should be [ellipse(100% 100% at 0% 0%)]
    250250PASS CSS Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (1.5) should be [ellipse(100% 100% at 0% 0%)]
    251 FAIL Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
    252 FAIL Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
    253 FAIL Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none] assert_equals: expected "none " but got "ellipse ( 100 % 100 % at 0 % 0 % ) "
     251PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (-0.3) should be [none]
     252PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0) should be [none]
     253PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.3) should be [none]
    254254PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.5) should be [ellipse(100% 100% at 0% 0%)]
    255255PASS Web Animations: property <shape-outside> from [none] to [ellipse(100% 100% at 0% 0%)] at (0.6) should be [ellipse(100% 100% at 0% 0%)]

  • trunk/LayoutTests/imported/w3c/web-platform-tests/web-animations/animation-model/animation-types/interpolation-per-property-002-expected.txt

    r274355 r275015  
    114114PASS resize uses discrete animation when animating between "both" and "horizontal" with keyframe easing
    115115PASS shape-outside (type: discrete) has testInterpolation function
    116 FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with linear easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
    117 FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with effect easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
    118 FAIL shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with keyframe easing assert_equals: The value should be url("http://localhost/test-1") at 0ms expected "url(\"http://localhost/test-1\")" but got "url(\"http://localhost/test-2\")"
     116PASS shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with linear easing
     117PASS shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with effect easing
     118PASS shape-outside uses discrete animation when animating between "url("http://localhost/test-1")" and "url("http://localhost/test-2")" with keyframe easing
    119119PASS stop-color (type: color) has testInterpolation function
    120120PASS stop-color supports animating as color of rgb()

  • trunk/Source/WebCore/ChangeLog

    r275013 r275015  
     12021-03-25  Antoine Quint  <graouts@webkit.org>
     2
     3        Improve interpolation of the shape-outside CSS property
     4        https://bugs.webkit.org/show_bug.cgi?id=223738
     5
     6        Reviewed by Antti Koivisto.
     7
     8        While we had logic to deal with cases where ShapeValue objects could not be interpolated, we did not make
     9        use of it in the animation wrapper. We now move this logic from the blendFunc() to the canInterpolate()
     10        override method on the wrapper to correctly interpolate only when possible.
     11
     12        * animation/CSSPropertyAnimation.cpp:
     13        (WebCore::blendFunc):
     14
    1152021-03-25  Tim Horton  <timothy_horton@apple.com>
    216

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

    r274978 r275015  
    274274static inline RefPtr<ShapeValue> blendFunc(const CSSPropertyBlendingClient*, ShapeValue* from, ShapeValue* to, double progress)
    275275{
    276     if (!from || !to)
     276    if (!progress)
     277        return from;
     278
     279    if (progress == 1.0)
    277280        return to;
    278281
    279     if (from->type() != ShapeValue::Type::Shape || to->type() != ShapeValue::Type::Shape)
    280         return to;
    281 
    282     if (from->cssBox() != to->cssBox())
    283         return to;
    284 
     282    ASSERT(from && to);
    285283    const BasicShape& fromShape = *from->shape();
    286284    const BasicShape& toShape = *to->shape();
    287 
    288     if (!fromShape.canBlend(toShape))
    289         return to;
    290 
    291285    return ShapeValue::create(toShape.blend(fromShape, progress), to->cssBox());
    292286}
    … …  
    925919            return false;
    926920        return *shapeA == *shapeB;
     921    }
     922
     923    bool canInterpolate(const RenderStyle* from, const RenderStyle* to) const final
     924    {
     925        auto* fromShape = value(from);
     926        auto* toShape = value(to);
     927
     928        if (!fromShape || !toShape)
     929            return false;
     930
     931        if (fromShape->type() != ShapeValue::Type::Shape || toShape->type() != ShapeValue::Type::Shape)
     932            return false;
     933
     934        if (fromShape->cssBox() != toShape->cssBox())
     935            return false;
     936
     937        return fromShape->shape()->canBlend(*toShape->shape());
    927938    }
    928939};
Note: See TracChangeset for help on using the changeset viewer.