Changeset 273625 in webkit


Ignore:
Timestamp:
Feb 27, 2021 6:27:26 AM (17 months ago)
Author:
graouts@webkit.org
Message:

border-image-slice blending does not account for the fill keyword
​https://bugs.webkit.org/show_bug.cgi?id=222513

Reviewed by Antti Koivisto.

LayoutTests/imported/w3c:

Pass an extra 96 WPT tests for border-image-slice.

  • web-platform-tests/css/css-backgrounds/animations/border-image-slice-composition-expected.txt:
  • web-platform-tests/css/css-backgrounds/animations/border-image-slice-interpolation-expected.txt:

Source/WebCore:

The border-image-slice CSS property allows for the "fill" keyword on top of the four values defining the slices.
The presence of this keyword is stored as a bool flag on the NinePieceImage returned by RenderStyle::borderImage(),
while the four slices values are stored as a separate LengthBox on that NinePieceImage. So as we blend the
border-image-slice property using the LengthBoxPropertyWrapper, we only account for the four slices values.

In order to account for the "fill" keyword, we use an OptionSet instead of a single flag to represent different blending
options for CSS properties represented by a LengthBox. This allows us to now indicate that a given property,
namely border-image-slice, supports the "fill" keyword.

If this "fill" keyword flag is set, we force discrete interpolation in the case where the from and to blend values
don't have the same value for "fill". Then, as we blend, we set the "fill" keyword to match the from and to values.

To do this, we add a new RenderStyle::setBorderImageSliceFill() property since the NinePieceImage returned by
RenderStyle::borderImage() is marked const.

  • animation/CSSPropertyAnimation.cpp:

(WebCore::LengthBoxPropertyWrapper::LengthBoxPropertyWrapper):
(WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):

  • rendering/style/RenderStyle.cpp:

(WebCore::RenderStyle::setBorderImageSliceFill):

  • rendering/style/RenderStyle.h:
Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/imported/w3c/ChangeLog

    r273623 r273625  
     12021-02-27  Antoine Quint  <graouts@webkit.org>
     2
     3        border-image-slice blending does not account for the fill keyword
     4        https://bugs.webkit.org/show_bug.cgi?id=222513
     5
     6        Reviewed by Antti Koivisto.
     7
     8        Pass an extra 96 WPT tests for border-image-slice.
     9
     10        * web-platform-tests/css/css-backgrounds/animations/border-image-slice-composition-expected.txt:
     11        * web-platform-tests/css/css-backgrounds/animations/border-image-slice-interpolation-expected.txt:
     12
    1132021-02-27  Antoine Quint  <graouts@webkit.org>
    214

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-composition-expected.txt

    r273623 r273625  
    4242PASS Compositing: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (1) should be [0% 0]
    4343PASS Compositing: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (1.25) should be [0% 0]
    44 FAIL Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (-0.25) should be [100% 150%] assert_equals: expected "100 % 150 % " but got "75 % 125 % "
     44PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (-0.25) should be [100% 150%]
    4545PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0) should be [100% 150%]
    46 FAIL Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.25) should be [100% 150%] assert_equals: expected "100 % 150 % " but got "125 % 175 % "
    47 FAIL Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.5) should be [200% 250% fill] assert_equals: expected "200 % 250 % fill " but got "150 % 200 % "
    48 FAIL Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.75) should be [200% 250% fill] assert_equals: expected "200 % 250 % fill " but got "175 % 225 % "
    49 FAIL Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1) should be [200% 250% fill] assert_equals: expected "200 % 250 % fill " but got "200 % 250 % "
    50 FAIL Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1.25) should be [200% 250% fill] assert_equals: expected "200 % 250 % fill " but got "225 % 275 % "
     46PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.25) should be [100% 150%]
     47PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.5) should be [200% 250% fill]
     48PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.75) should be [200% 250% fill]
     49PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1) should be [200% 250% fill]
     50PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1.25) should be [200% 250% fill]
    5151PASS Compositing: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (-0.25) should be [100 150%]
    5252PASS Compositing: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0) should be [100 150%]

  • trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-interpolation-expected.txt

    r273623 r273625  
    182182PASS CSS Transitions with transition: all: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1) should be [40 50 60 70 fill]
    183183PASS CSS Transitions with transition: all: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1.5) should be [60 70 80 90 fill]
    184 FAIL CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (-0.5) should be [0 0 0 10 fill] assert_equals: expected "0 0 0 10 fill " but got "0 0 0 10 "
    185 FAIL CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0) should be [0 10 20 30 fill] assert_equals: expected "0 10 20 30 fill " but got "0 10 20 30 "
    186 FAIL CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.3) should be [12 22 32 42 fill] assert_equals: expected "12 22 32 42 fill " but got "12 22 32 42 "
    187 FAIL CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.5) should be [20 30 40 50 fill] assert_equals: expected "20 30 40 50 fill " but got "20 30 40 50 "
    188 FAIL CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.6) should be [24 34 44 54 fill] assert_equals: expected "24 34 44 54 fill " but got "24 34 44 54 "
    189 FAIL CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1) should be [40 50 60 70 fill] assert_equals: expected "40 50 60 70 fill " but got "40 50 60 70 "
    190 FAIL CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1.5) should be [60 70 80 90 fill] assert_equals: expected "60 70 80 90 fill " but got "60 70 80 90 "
    191 FAIL Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (-0.5) should be [0 0 0 10 fill] assert_equals: expected "0 0 0 10 fill " but got "0 0 0 10 "
    192 FAIL Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0) should be [0 10 20 30 fill] assert_equals: expected "0 10 20 30 fill " but got "0 10 20 30 "
    193 FAIL Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.3) should be [12 22 32 42 fill] assert_equals: expected "12 22 32 42 fill " but got "12 22 32 42 "
    194 FAIL Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.5) should be [20 30 40 50 fill] assert_equals: expected "20 30 40 50 fill " but got "20 30 40 50 "
    195 FAIL Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.6) should be [24 34 44 54 fill] assert_equals: expected "24 34 44 54 fill " but got "24 34 44 54 "
    196 FAIL Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1) should be [40 50 60 70 fill] assert_equals: expected "40 50 60 70 fill " but got "40 50 60 70 "
    197 FAIL Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1.5) should be [60 70 80 90 fill] assert_equals: expected "60 70 80 90 fill " but got "60 70 80 90 "
     184PASS CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (-0.5) should be [0 0 0 10 fill]
     185PASS CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0) should be [0 10 20 30 fill]
     186PASS CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.3) should be [12 22 32 42 fill]
     187PASS CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.5) should be [20 30 40 50 fill]
     188PASS CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.6) should be [24 34 44 54 fill]
     189PASS CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1) should be [40 50 60 70 fill]
     190PASS CSS Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1.5) should be [60 70 80 90 fill]
     191PASS Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (-0.5) should be [0 0 0 10 fill]
     192PASS Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0) should be [0 10 20 30 fill]
     193PASS Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.3) should be [12 22 32 42 fill]
     194PASS Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.5) should be [20 30 40 50 fill]
     195PASS Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (0.6) should be [24 34 44 54 fill]
     196PASS Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1) should be [40 50 60 70 fill]
     197PASS Web Animations: property <border-image-slice> from [0 10 20 30 fill] to [40 50 60 70 fill] at (1.5) should be [60 70 80 90 fill]
    198198PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (-0.5) should be [0% 0 0% 10 fill]
    199199PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0) should be [0% 10 20% 30 fill]
    … …  
    210210PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1) should be [40% 50 60% 70 fill]
    211211PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1.5) should be [60% 70 80% 90 fill]
    212 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (-0.5) should be [0% 0 0% 10 fill] assert_equals: expected "0 % 0 0 % 10 fill " but got "0 % 0 0 % 10 "
    213 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "0 % 10 20 % 30 "
    214 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.3) should be [12% 22 32% 42 fill] assert_equals: expected "12 % 22 32 % 42 fill " but got "12 % 22 32 % 42 "
    215 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.5) should be [20% 30 40% 50 fill] assert_equals: expected "20 % 30 40 % 50 fill " but got "20 % 30 40 % 50 "
    216 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.6) should be [24% 34 44% 54 fill] assert_equals: expected "24 % 34 44 % 54 fill " but got "24 % 34 44 % 54 "
    217 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1) should be [40% 50 60% 70 fill] assert_equals: expected "40 % 50 60 % 70 fill " but got "40 % 50 60 % 70 "
    218 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1.5) should be [60% 70 80% 90 fill] assert_equals: expected "60 % 70 80 % 90 fill " but got "60 % 70 80 % 90 "
    219 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (-0.5) should be [0% 0 0% 10 fill] assert_equals: expected "0 % 0 0 % 10 fill " but got "0 % 0 0 % 10 "
    220 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "0 % 10 20 % 30 "
    221 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.3) should be [12% 22 32% 42 fill] assert_equals: expected "12 % 22 32 % 42 fill " but got "12 % 22 32 % 42 "
    222 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.5) should be [20% 30 40% 50 fill] assert_equals: expected "20 % 30 40 % 50 fill " but got "20 % 30 40 % 50 "
    223 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.6) should be [24% 34 44% 54 fill] assert_equals: expected "24 % 34 44 % 54 fill " but got "24 % 34 44 % 54 "
    224 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1) should be [40% 50 60% 70 fill] assert_equals: expected "40 % 50 60 % 70 fill " but got "40 % 50 60 % 70 "
    225 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1.5) should be [60% 70 80% 90 fill] assert_equals: expected "60 % 70 80 % 90 fill " but got "60 % 70 80 % 90 "
    226 FAIL CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [50%] assert_equals: expected "50 % " but got "0 % "
    227 FAIL CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0) should be [50%] assert_equals: expected "50 % " but got "0 % "
    228 FAIL CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [50%] assert_equals: expected "50 % " but got "15 % "
    229 FAIL CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%] assert_equals: expected "50 % " but got "25 % "
    230 FAIL CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%] assert_equals: expected "50 % " but got "30 % "
     212PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (-0.5) should be [0% 0 0% 10 fill]
     213PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0) should be [0% 10 20% 30 fill]
     214PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.3) should be [12% 22 32% 42 fill]
     215PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.5) should be [20% 30 40% 50 fill]
     216PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.6) should be [24% 34 44% 54 fill]
     217PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1) should be [40% 50 60% 70 fill]
     218PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1.5) should be [60% 70 80% 90 fill]
     219PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (-0.5) should be [0% 0 0% 10 fill]
     220PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0) should be [0% 10 20% 30 fill]
     221PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.3) should be [12% 22 32% 42 fill]
     222PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.5) should be [20% 30 40% 50 fill]
     223PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (0.6) should be [24% 34 44% 54 fill]
     224PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1) should be [40% 50 60% 70 fill]
     225PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70 fill] at (1.5) should be [60% 70 80% 90 fill]
     226PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [50%]
     227PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0) should be [50%]
     228PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [50%]
     229PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
     230PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
    231231PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
    232 FAIL CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%] assert_equals: expected "50 % " but got "75 % "
    233 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [50%] assert_equals: expected "50 % " but got "0 % "
    234 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0) should be [50%] assert_equals: expected "50 % " but got "0 % "
    235 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [50%] assert_equals: expected "50 % " but got "15 % "
    236 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%] assert_equals: expected "50 % " but got "25 % "
    237 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%] assert_equals: expected "50 % " but got "30 % "
     232PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
     233PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [50%]
     234PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0) should be [50%]
     235PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [50%]
     236PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
     237PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
    238238PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
    239 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%] assert_equals: expected "50 % " but got "75 % "
    240 FAIL CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [0% fill] assert_equals: expected "0 % fill " but got "0 % "
    241 FAIL CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0) should be [0% fill] assert_equals: expected "0 % fill " but got "0 % "
    242 FAIL CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [0% fill] assert_equals: expected "0 % fill " but got "15 % "
    243 FAIL CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%] assert_equals: expected "50 % " but got "25 % "
    244 FAIL CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%] assert_equals: expected "50 % " but got "30 % "
     239PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
     240PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [0% fill]
     241PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0) should be [0% fill]
     242PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [0% fill]
     243PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
     244PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
    245245PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
    246 FAIL CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%] assert_equals: expected "50 % " but got "75 % "
    247 FAIL Web Animations: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [0% fill] assert_equals: expected "0 % fill " but got "0 % "
    248 FAIL Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0) should be [0% fill] assert_equals: expected "0 % fill " but got "0 % "
    249 FAIL Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [0% fill] assert_equals: expected "0 % fill " but got "15 % "
    250 FAIL Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%] assert_equals: expected "50 % " but got "25 % "
    251 FAIL Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%] assert_equals: expected "50 % " but got "30 % "
     246PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
     247PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [0% fill]
     248PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0) should be [0% fill]
     249PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [0% fill]
     250PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
     251PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
    252252PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
    253 FAIL Web Animations: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%] assert_equals: expected "50 % " but got "75 % "
     253PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
    254254PASS CSS Transitions: property <border-image-slice> from [50%] to [100] at (-0.3) should be [100]
    255255PASS CSS Transitions: property <border-image-slice> from [50%] to [100] at (0) should be [100]
    … …  
    294294PASS CSS Transitions with transition: all: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill]
    295295PASS CSS Transitions with transition: all: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill]
    296 FAIL CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (-0.3) should be [50% fill] assert_equals: expected "50 % fill " but got "50 % "
    297 FAIL CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0) should be [50% fill] assert_equals: expected "50 % fill " but got "50 % "
    298 FAIL CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.3) should be [50% fill] assert_equals: expected "50 % fill " but got "50 % "
    299 FAIL CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.5) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    300 FAIL CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.6) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    301 FAIL CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    302 FAIL CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    303 FAIL Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (-0.3) should be [50% fill] assert_equals: expected "50 % fill " but got "50 % "
    304 FAIL Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0) should be [50% fill] assert_equals: expected "50 % fill " but got "50 % "
    305 FAIL Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.3) should be [50% fill] assert_equals: expected "50 % fill " but got "50 % "
    306 FAIL Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.5) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    307 FAIL Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.6) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    308 FAIL Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    309 FAIL Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill] assert_equals: expected "100 fill " but got "100 "
    310 FAIL CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "0 % 0 8 % 18 "
    311 FAIL CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "0 % 10 20 % 30 "
    312 FAIL CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "12 % 22 32 % 42 "
    313 FAIL CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "20 % 30 40 % 50 "
    314 FAIL CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "24 % 34 44 % 54 "
     296PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (-0.3) should be [50% fill]
     297PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0) should be [50% fill]
     298PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.3) should be [50% fill]
     299PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.5) should be [100 fill]
     300PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.6) should be [100 fill]
     301PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill]
     302PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill]
     303PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (-0.3) should be [50% fill]
     304PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0) should be [50% fill]
     305PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.3) should be [50% fill]
     306PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.5) should be [100 fill]
     307PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.6) should be [100 fill]
     308PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill]
     309PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill]
     310PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [40% 50 60% 70]
     311PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [40% 50 60% 70]
     312PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [40% 50 60% 70]
     313PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70]
     314PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70]
    315315PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1) should be [40% 50 60% 70]
    316 FAIL CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "60 % 70 80 % 90 "
    317 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "0 % 0 8 % 18 "
    318 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "0 % 10 20 % 30 "
    319 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "12 % 22 32 % 42 "
    320 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "20 % 30 40 % 50 "
    321 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "24 % 34 44 % 54 "
     316PASS CSS Transitions: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70]
     317PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [40% 50 60% 70]
     318PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [40% 50 60% 70]
     319PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [40% 50 60% 70]
     320PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70]
     321PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70]
    322322PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1) should be [40% 50 60% 70]
    323 FAIL CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "60 % 70 80 % 90 "
    324 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "0 % 0 8 % 18 "
    325 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "0 % 10 20 % 30 "
    326 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "12 % 22 32 % 42 "
    327 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "20 % 30 40 % 50 "
    328 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "24 % 34 44 % 54 "
     323PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70]
     324PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [0% 10 20% 30 fill]
     325PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [0% 10 20% 30 fill]
     326PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [0% 10 20% 30 fill]
     327PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70]
     328PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70]
    329329PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1) should be [40% 50 60% 70]
    330 FAIL CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "60 % 70 80 % 90 "
    331 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "0 % 0 8 % 18 "
    332 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "0 % 10 20 % 30 "
    333 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [0% 10 20% 30 fill] assert_equals: expected "0 % 10 20 % 30 fill " but got "12 % 22 32 % 42 "
    334 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "20 % 30 40 % 50 "
    335 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "24 % 34 44 % 54 "
     330PASS CSS Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70]
     331PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (-0.3) should be [0% 10 20% 30 fill]
     332PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0) should be [0% 10 20% 30 fill]
     333PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.3) should be [0% 10 20% 30 fill]
     334PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.5) should be [40% 50 60% 70]
     335PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (0.6) should be [40% 50 60% 70]
    336336PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1) should be [40% 50 60% 70]
    337 FAIL Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70] assert_equals: expected "40 % 50 60 % 70 " but got "60 % 70 80 % 90 "
     337PASS Web Animations: property <border-image-slice> from [0% 10 20% 30 fill] to [40% 50 60% 70] at (1.5) should be [40% 50 60% 70]
    338338PASS CSS Transitions: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (-0.3) should be [40 50 60% 70]
    339339PASS CSS Transitions: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0) should be [40 50 60% 70]
    … …  
    350350PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (1) should be [40 50 60% 70]
    351351PASS CSS Transitions with transition: all: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (1.5) should be [40 50 60% 70]
    352 FAIL CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (-0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 "
    353 FAIL CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 "
    354 FAIL CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 "
     352FAIL CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (-0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 fill "
     353FAIL CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 fill "
     354FAIL CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 fill "
    355355PASS CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.5) should be [40 50 60% 70]
    356356PASS CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.6) should be [40 50 60% 70]
    357357PASS CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (1) should be [40 50 60% 70]
    358358PASS CSS Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (1.5) should be [40 50 60% 70]
    359 FAIL Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (-0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 "
    360 FAIL Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 "
    361 FAIL Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 "
     359FAIL Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (-0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 fill "
     360FAIL Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 fill "
     361FAIL Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.3) should be [0% 10 20 30 fill] assert_equals: expected "0 % 10 20 30 fill " but got "0 10 20 30 fill "
    362362PASS Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.5) should be [40 50 60% 70]
    363363PASS Web Animations: property <border-image-slice> from [0% 10 20 30 fill] to [40 50 60% 70] at (0.6) should be [40 50 60% 70]

  • trunk/Source/WebCore/ChangeLog

    r273623 r273625  
     12021-02-27  Antoine Quint  <graouts@webkit.org>
     2
     3        border-image-slice blending does not account for the fill keyword
     4        https://bugs.webkit.org/show_bug.cgi?id=222513
     5
     6        Reviewed by Antti Koivisto.
     7
     8        The border-image-slice CSS property allows for the "fill" keyword on top of the four values defining the slices.
     9        The presence of this keyword is stored as a bool flag on the NinePieceImage returned by RenderStyle::borderImage(),
     10        while the four slices values are stored as a separate LengthBox on that NinePieceImage. So as we blend the
     11        border-image-slice property using the LengthBoxPropertyWrapper, we only account for the four slices values.
     12
     13        In order to account for the "fill" keyword, we use an OptionSet instead of a single flag to represent different blending
     14        options for CSS properties represented by a LengthBox. This allows us to now indicate that a given property,
     15        namely border-image-slice, supports the "fill" keyword.
     16
     17        If this "fill" keyword flag is set, we force discrete interpolation in the case where the from and to blend values
     18        don't have the same value for "fill". Then, as we blend, we set the "fill" keyword to match the from and to values.
     19
     20        To do this, we add a new RenderStyle::setBorderImageSliceFill() property since the NinePieceImage returned by
     21        RenderStyle::borderImage() is marked const.
     22
     23        * animation/CSSPropertyAnimation.cpp:
     24        (WebCore::LengthBoxPropertyWrapper::LengthBoxPropertyWrapper):
     25        (WebCore::CSSPropertyAnimationWrapperMap::CSSPropertyAnimationWrapperMap):
     26        * rendering/style/RenderStyle.cpp:
     27        (WebCore::RenderStyle::setBorderImageSliceFill):
     28        * rendering/style/RenderStyle.h:
     29
    1302021-02-27  Antoine Quint  <graouts@webkit.org>
    231

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

    r273623 r273625  
    737737    WTF_MAKE_FAST_ALLOCATED;
    738738public:
    739     enum class IsLengthPercentage { Yes, No };
    740     LengthBoxPropertyWrapper(CSSPropertyID prop, const LengthBox& (RenderStyle::*getter)() const, void (RenderStyle::*setter)(LengthBox&&), IsLengthPercentage isLengthPercentage = IsLengthPercentage::No)
     739    enum class Flags {
     740        IsLengthPercentage  = 1 << 0,
     741        UsesFillKeyword     = 1 << 1,
     742    };
     743    LengthBoxPropertyWrapper(CSSPropertyID prop, const LengthBox& (RenderStyle::*getter)() const, void (RenderStyle::*setter)(LengthBox&&), OptionSet<Flags> flags = { })
    741744        : PropertyWrapperGetter<const LengthBox&>(prop, getter)
    742745        , m_setter(setter)
    743         , m_isLengthPercentage(isLengthPercentage)
     746        , m_flags(flags)
    744747    {
    745748    }
    … …  
    747750    bool canInterpolate(const RenderStyle* a, const RenderStyle* b) const override
    748751    {
     752        if (m_flags.contains(Flags::UsesFillKeyword) && a->borderImage().fill() != b->borderImage().fill())
     753            return false;
     754
    749755        auto canInterpolateBetweenLengths = [&](const Length& a, const Length& b) -> bool {
    750756            if (a.type() == b.type() || a.isZero() || b.isZero())
    … …  
    755761            // a <length> or <percentage>. We can use Length::isRelative() to determine whether we are
    756762            // dealing with a <number> as opposed to a <length> or <percentage>.
    757             if (m_isLengthPercentage == IsLengthPercentage::Yes)
     763            if (m_flags.contains(Flags::IsLengthPercentage))
    758764                return a.isRelative() == b.isRelative();
    759765
    … …  
    771777    void blend(const CSSPropertyBlendingClient* anim, RenderStyle* dst, const RenderStyle* a, const RenderStyle* b, double progress) const override
    772778    {
    773         if (!canInterpolate(a, b))
     779        if (!canInterpolate(a, b)) {
    774780            progress = progress < 0.5 ? 0 : 1;
     781            if (m_flags.contains(Flags::UsesFillKeyword))
     782                dst->setBorderImageSliceFill((progress ? b : a)->borderImage().fill());
     783        } else if (m_flags.contains(Flags::UsesFillKeyword))
     784            dst->setBorderImageSliceFill(a->borderImage().fill());
    775785        (dst->*m_setter)(blendFunc(anim, (a->*PropertyWrapperGetter<const LengthBox&>::m_getter)(), (b->*PropertyWrapperGetter<const LengthBox&>::m_getter)(), progress));
    776786    }
    … …  
    780790
    781791private:
    782     IsLengthPercentage m_isLengthPercentage;
     792    OptionSet<Flags> m_flags;
    783793};
    784794
    … …  
    18441854
    18451855        new StyleImagePropertyWrapper(CSSPropertyBorderImageSource, &RenderStyle::borderImageSource, &RenderStyle::setBorderImageSource),
    1846         new LengthBoxPropertyWrapper(CSSPropertyBorderImageSlice, &RenderStyle::borderImageSlices, &RenderStyle::setBorderImageSlices),
    1847         new LengthBoxPropertyWrapper(CSSPropertyBorderImageWidth, &RenderStyle::borderImageWidth, &RenderStyle::setBorderImageWidth, LengthBoxPropertyWrapper::IsLengthPercentage::Yes),
     1856        new LengthBoxPropertyWrapper(CSSPropertyBorderImageSlice, &RenderStyle::borderImageSlices, &RenderStyle::setBorderImageSlices, { LengthBoxPropertyWrapper::Flags::UsesFillKeyword }),
     1857        new LengthBoxPropertyWrapper(CSSPropertyBorderImageWidth, &RenderStyle::borderImageWidth, &RenderStyle::setBorderImageWidth, { LengthBoxPropertyWrapper::Flags::IsLengthPercentage }),
    18481858        new LengthBoxPropertyWrapper(CSSPropertyBorderImageOutset, &RenderStyle::borderImageOutset, &RenderStyle::setBorderImageOutset),
    18491859

  • trunk/Source/WebCore/rendering/style/RenderStyle.cpp

    r272805 r273625  
    23112311}
    23122312
     2313void RenderStyle::setBorderImageSliceFill(bool fill)
     2314{
     2315    if (m_surroundData->border.m_image.fill() == fill)
     2316        return;
     2317    m_surroundData.access().border.m_image.setFill(fill);
     2318}
     2319
    23132320void RenderStyle::setBorderImageSlices(LengthBox&& slices)
    23142321{

  • trunk/Source/WebCore/rendering/style/RenderStyle.h

    r272805 r273625  
    885885    void setBorderImage(const NinePieceImage& b) { SET_VAR(m_surroundData, border.m_image, b); }
    886886    void setBorderImageSource(RefPtr<StyleImage>&&);
     887    void setBorderImageSliceFill(bool);
    887888    void setBorderImageSlices(LengthBox&&);
    888889    void setBorderImageWidth(LengthBox&&);
Note: See TracChangeset for help on using the changeset viewer.