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:
git-svn-id: http://svn.webkit.org/repository/webkit/trunk@273625 268f45cc-cd09-0410-ab3c-d52691b4dbfc
diff --git a/LayoutTests/imported/w3c/ChangeLog b/LayoutTests/imported/w3c/ChangeLog
index e4b87cc..5df7c51 100644
--- a/LayoutTests/imported/w3c/ChangeLog
+++ b/LayoutTests/imported/w3c/ChangeLog
@@ -1,5 +1,17 @@
2021-02-27 Antoine Quint <graouts@webkit.org>
+ border-image-slice blending does not account for the fill keyword
+ https://bugs.webkit.org/show_bug.cgi?id=222513
+
+ Reviewed by Antti Koivisto.
+
+ 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:
+
+2021-02-27 Antoine Quint <graouts@webkit.org>
+
Improve blending of LengthBox values
https://bugs.webkit.org/show_bug.cgi?id=222512
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-composition-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-composition-expected.txt
index b5f271c..d87c5bc 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-composition-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-composition-expected.txt
@@ -41,13 +41,13 @@
FAIL Compositing: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (0.75) should be [25% 25] assert_equals: expected "25 % 25 " but got "22.5 % 20 "
PASS Compositing: property <border-image-slice> underlying [10% 20] from add [90% 80] to replace [0% 0 0% 0] at (1) should be [0% 0]
PASS 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]
-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 % "
+PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (-0.25) should be [100% 150%]
PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0) should be [100% 150%]
-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 % "
-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 % "
-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 % "
-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 % "
-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 % "
+PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (0.25) should be [100% 150%]
+PASS 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]
+PASS 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]
+PASS Compositing: property <border-image-slice> underlying [10 20] from add [100% 150%] to add [200% 250% fill] at (1) should be [200% 250% fill]
+PASS 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]
PASS Compositing: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (-0.25) should be [100 150%]
PASS Compositing: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0) should be [100 150%]
PASS Compositing: property <border-image-slice> underlying [10 20] from add [100 150%] to add [200% 250] at (0.25) should be [100 150%]
diff --git a/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-interpolation-expected.txt b/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-interpolation-expected.txt
index 9cdd678..154f7101 100644
--- a/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-interpolation-expected.txt
+++ b/LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-slice-interpolation-expected.txt
@@ -181,20 +181,20 @@
PASS CSS Transitions with transition: all: 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]
PASS 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]
PASS 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]
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
PASS 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]
PASS 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]
PASS CSS Transitions: 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]
@@ -209,48 +209,48 @@
PASS CSS Transitions with transition: all: 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]
PASS 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]
PASS 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]
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 % "
-FAIL CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0) should be [50%] assert_equals: expected "50 % " but got "0 % "
-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 % "
-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 % "
-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 % "
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [50%]
+PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0) should be [50%]
+PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [50%]
+PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
+PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
-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 % "
-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 % "
-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 % "
-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 % "
-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 % "
-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 % "
+PASS CSS Transitions: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
+PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [50%]
+PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0) should be [50%]
+PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [50%]
+PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
+PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
-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 % "
-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 % "
-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 % "
-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 % "
-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 % "
-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 % "
+PASS CSS Transitions with transition: all: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
+PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [0% fill]
+PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0) should be [0% fill]
+PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [0% fill]
+PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
+PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
-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 % "
-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 % "
-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 % "
-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 % "
-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 % "
-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 % "
+PASS CSS Animations: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
+PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (-0.3) should be [0% fill]
+PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0) should be [0% fill]
+PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.3) should be [0% fill]
+PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.5) should be [50%]
+PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (0.6) should be [50%]
PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (1) should be [50%]
-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 % "
+PASS Web Animations: property <border-image-slice> from [0% fill] to [50%] at (1.5) should be [50%]
PASS CSS Transitions: property <border-image-slice> from [50%] to [100] at (-0.3) should be [100]
PASS CSS Transitions: property <border-image-slice> from [50%] to [100] at (0) should be [100]
PASS CSS Transitions: property <border-image-slice> from [50%] to [100] at (0.3) should be [100]
@@ -293,48 +293,48 @@
PASS CSS Transitions with transition: all: property <border-image-slice> from [50% fill] to [100 fill] at (0.6) should be [100 fill]
PASS CSS Transitions with transition: all: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill]
PASS CSS Transitions with transition: all: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill]
-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 % "
-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 % "
-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 % "
-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 "
-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 "
-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 "
-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 "
-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 % "
-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 % "
-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 % "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
+PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (-0.3) should be [50% fill]
+PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0) should be [50% fill]
+PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.3) should be [50% fill]
+PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.5) should be [100 fill]
+PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.6) should be [100 fill]
+PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill]
+PASS CSS Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill]
+PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (-0.3) should be [50% fill]
+PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0) should be [50% fill]
+PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.3) should be [50% fill]
+PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.5) should be [100 fill]
+PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (0.6) should be [100 fill]
+PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1) should be [100 fill]
+PASS Web Animations: property <border-image-slice> from [50% fill] to [100 fill] at (1.5) should be [100 fill]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
PASS 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]
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
PASS 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]
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
PASS 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]
-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 "
-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 "
-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 "
-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 "
-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 "
-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 "
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
+PASS 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]
PASS 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]
-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 "
+PASS 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]
PASS 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]
PASS 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]
PASS 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]
@@ -349,16 +349,16 @@
PASS 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]
PASS 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]
PASS 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]
-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 "
-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 "
-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 "
+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 fill "
+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 fill "
+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 fill "
PASS 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]
PASS 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]
PASS 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]
PASS 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]
-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 "
-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 "
-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 "
+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 fill "
+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 fill "
+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 fill "
PASS 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]
PASS 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]
PASS 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]
diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 9a9634b..b69cd26 100644
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,5 +1,34 @@
2021-02-27 Antoine Quint <graouts@webkit.org>
+ border-image-slice blending does not account for the fill keyword
+ https://bugs.webkit.org/show_bug.cgi?id=222513
+
+ Reviewed by Antti Koivisto.
+
+ 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:
+
+2021-02-27 Antoine Quint <graouts@webkit.org>
+
Improve blending of LengthBox values
https://bugs.webkit.org/show_bug.cgi?id=222512
diff --git a/Source/WebCore/animation/CSSPropertyAnimation.cpp b/Source/WebCore/animation/CSSPropertyAnimation.cpp
index 92e97a0..a56e22f 100644
--- a/Source/WebCore/animation/CSSPropertyAnimation.cpp
+++ b/Source/WebCore/animation/CSSPropertyAnimation.cpp
@@ -736,16 +736,22 @@
class LengthBoxPropertyWrapper : public PropertyWrapperGetter<const LengthBox&> {
WTF_MAKE_FAST_ALLOCATED;
public:
- enum class IsLengthPercentage { Yes, No };
- LengthBoxPropertyWrapper(CSSPropertyID prop, const LengthBox& (RenderStyle::*getter)() const, void (RenderStyle::*setter)(LengthBox&&), IsLengthPercentage isLengthPercentage = IsLengthPercentage::No)
+ enum class Flags {
+ IsLengthPercentage = 1 << 0,
+ UsesFillKeyword = 1 << 1,
+ };
+ LengthBoxPropertyWrapper(CSSPropertyID prop, const LengthBox& (RenderStyle::*getter)() const, void (RenderStyle::*setter)(LengthBox&&), OptionSet<Flags> flags = { })
: PropertyWrapperGetter<const LengthBox&>(prop, getter)
, m_setter(setter)
- , m_isLengthPercentage(isLengthPercentage)
+ , m_flags(flags)
{
}
bool canInterpolate(const RenderStyle* a, const RenderStyle* b) const override
{
+ if (m_flags.contains(Flags::UsesFillKeyword) && a->borderImage().fill() != b->borderImage().fill())
+ return false;
+
auto canInterpolateBetweenLengths = [&](const Length& a, const Length& b) -> bool {
if (a.type() == b.type() || a.isZero() || b.isZero())
return true;
@@ -754,7 +760,7 @@
// between a <length> and a <percentage>, but exclude animating between a <number> and either
// a <length> or <percentage>. We can use Length::isRelative() to determine whether we are
// dealing with a <number> as opposed to a <length> or <percentage>.
- if (m_isLengthPercentage == IsLengthPercentage::Yes)
+ if (m_flags.contains(Flags::IsLengthPercentage))
return a.isRelative() == b.isRelative();
return false;
@@ -770,8 +776,12 @@
void blend(const CSSPropertyBlendingClient* anim, RenderStyle* dst, const RenderStyle* a, const RenderStyle* b, double progress) const override
{
- if (!canInterpolate(a, b))
+ if (!canInterpolate(a, b)) {
progress = progress < 0.5 ? 0 : 1;
+ if (m_flags.contains(Flags::UsesFillKeyword))
+ dst->setBorderImageSliceFill((progress ? b : a)->borderImage().fill());
+ } else if (m_flags.contains(Flags::UsesFillKeyword))
+ dst->setBorderImageSliceFill(a->borderImage().fill());
(dst->*m_setter)(blendFunc(anim, (a->*PropertyWrapperGetter<const LengthBox&>::m_getter)(), (b->*PropertyWrapperGetter<const LengthBox&>::m_getter)(), progress));
}
@@ -779,7 +789,7 @@
void (RenderStyle::*m_setter)(LengthBox&&);
private:
- IsLengthPercentage m_isLengthPercentage;
+ OptionSet<Flags> m_flags;
};
class PropertyWrapperClipPath : public RefCountedPropertyWrapper<ClipPathOperation> {
@@ -1843,8 +1853,8 @@
new StyleImagePropertyWrapper(CSSPropertyWebkitMaskImage, &RenderStyle::maskImage, &RenderStyle::setMaskImage),
new StyleImagePropertyWrapper(CSSPropertyBorderImageSource, &RenderStyle::borderImageSource, &RenderStyle::setBorderImageSource),
- new LengthBoxPropertyWrapper(CSSPropertyBorderImageSlice, &RenderStyle::borderImageSlices, &RenderStyle::setBorderImageSlices),
- new LengthBoxPropertyWrapper(CSSPropertyBorderImageWidth, &RenderStyle::borderImageWidth, &RenderStyle::setBorderImageWidth, LengthBoxPropertyWrapper::IsLengthPercentage::Yes),
+ new LengthBoxPropertyWrapper(CSSPropertyBorderImageSlice, &RenderStyle::borderImageSlices, &RenderStyle::setBorderImageSlices, { LengthBoxPropertyWrapper::Flags::UsesFillKeyword }),
+ new LengthBoxPropertyWrapper(CSSPropertyBorderImageWidth, &RenderStyle::borderImageWidth, &RenderStyle::setBorderImageWidth, { LengthBoxPropertyWrapper::Flags::IsLengthPercentage }),
new LengthBoxPropertyWrapper(CSSPropertyBorderImageOutset, &RenderStyle::borderImageOutset, &RenderStyle::setBorderImageOutset),
new StyleImagePropertyWrapper(CSSPropertyWebkitMaskBoxImageSource, &RenderStyle::maskBoxImageSource, &RenderStyle::setMaskBoxImageSource),
diff --git a/Source/WebCore/rendering/style/RenderStyle.cpp b/Source/WebCore/rendering/style/RenderStyle.cpp
index 2aa7cea..dff6243 100644
--- a/Source/WebCore/rendering/style/RenderStyle.cpp
+++ b/Source/WebCore/rendering/style/RenderStyle.cpp
@@ -2310,6 +2310,13 @@
m_surroundData.access().border.m_image.setImage(WTFMove(image));
}
+void RenderStyle::setBorderImageSliceFill(bool fill)
+{
+ if (m_surroundData->border.m_image.fill() == fill)
+ return;
+ m_surroundData.access().border.m_image.setFill(fill);
+}
+
void RenderStyle::setBorderImageSlices(LengthBox&& slices)
{
if (m_surroundData->border.m_image.imageSlices() == slices)
diff --git a/Source/WebCore/rendering/style/RenderStyle.h b/Source/WebCore/rendering/style/RenderStyle.h
index 35937de..ad840cf 100644
--- a/Source/WebCore/rendering/style/RenderStyle.h
+++ b/Source/WebCore/rendering/style/RenderStyle.h
@@ -884,6 +884,7 @@
void setBorderImage(const NinePieceImage& b) { SET_VAR(m_surroundData, border.m_image, b); }
void setBorderImageSource(RefPtr<StyleImage>&&);
+ void setBorderImageSliceFill(bool);
void setBorderImageSlices(LengthBox&&);
void setBorderImageWidth(LengthBox&&);
void setBorderImageOutset(LengthBox&&);
