Skip to content

Commit ecc7ee3

Browse files
graoutsgraouts
committed
border-image-width computed values should be a calc() value if it contains a percentage
https://bugs.webkit.org/show_bug.cgi?id=224420 Reviewed by Simon Fraser. LayoutTests/imported/w3c: We now pass the final test that was a FAIL result for the border-image-width computed style test. We also pass a fair few border-image-width interpolation tests since we used to fail them as a result of the expected value being expected to be a resolved value rather than a calc() value due the computed style we returned for such values. There are a few PASS results than became FAIL results because we now correctly expect a calc() value, but we return the keyframe value as-is for 0 and 1 progress, a bug we will fix shortly. * web-platform-tests/css/css-backgrounds/animations/border-image-width-interpolation-expected.txt: * web-platform-tests/css/css-backgrounds/parsing/border-image-width-computed-expected.txt: Source/WebCore: When handling calc() values containing a percentage, we must retain the calc() form when creating the computed style for border-image-width. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageQuad): Canonical link: https://commits.webkit.org/236403@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@275834 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent f8bd44c commit ecc7ee3

5 files changed

Lines changed: 79 additions & 41 deletions

File tree

‎LayoutTests/imported/w3c/ChangeLog‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
2021-04-12 Antoine Quint <graouts@webkit.org>
2+
3+
border-image-width computed values should be a calc() value if it contains a percentage
4+
https://bugs.webkit.org/show_bug.cgi?id=224420
5+
6+
Reviewed by Simon Fraser.
7+
8+
We now pass the final test that was a FAIL result for the border-image-width computed style test.
9+
We also pass a fair few border-image-width interpolation tests since we used to fail them as a
10+
result of the expected value being expected to be a resolved value rather than a calc() value
11+
due the computed style we returned for such values. There are a few PASS results than became
12+
FAIL results because we now correctly expect a calc() value, but we return the keyframe value
13+
as-is for 0 and 1 progress, a bug we will fix shortly.
14+
15+
* web-platform-tests/css/css-backgrounds/animations/border-image-width-interpolation-expected.txt:
16+
* web-platform-tests/css/css-backgrounds/parsing/border-image-width-computed-expected.txt:
17+
118
2021-04-12 Youenn Fablet <youenn@apple.com>
219

320
Block loading for port 10080

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/animations/border-image-width-interpolation-expected.txt‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -247,54 +247,54 @@ PASS Web Animations: property <border-image-width> from [10px 20% 30 40px] to [8
247247
PASS Web Animations: property <border-image-width> from [10px 20% 30 40px] to [80px 70% 60 50px] at (1.5) should be [115px 95% 75 55px]
248248
PASS Web Animations: property <border-image-width> from [10px 20% 30 40px] to [80px 70% 60 50px] at (5) should be [360px 270% 180 90px]
249249
PASS Web Animations: property <border-image-width> from [10px 20% 30 40px] to [80px 70% 60 50px] at (10) should be [710px 520% 330 140px]
250-
FAIL CSS Transitions: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] assert_equals: expected "7px " but got "calc ( 13 % - 6px ) "
250+
PASS CSS Transitions: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)]
251251
PASS CSS Transitions: property <border-image-width> from [10%] to [20px] at (0) should be [10%]
252-
FAIL CSS Transitions: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] assert_equals: expected "13px " but got "calc ( 7 % + 6px ) "
253-
FAIL CSS Transitions: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] assert_equals: expected "16px " but got "calc ( 4 % + 12px ) "
254-
PASS CSS Transitions: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)]
255-
FAIL CSS Transitions: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)] assert_equals: expected "25px " but got "calc ( - 5 % + 30px ) "
256-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] assert_equals: expected "7px " but got "calc ( 13 % - 6px ) "
252+
PASS CSS Transitions: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)]
253+
PASS CSS Transitions: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)]
254+
FAIL CSS Transitions: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)] assert_equals: expected "calc ( 0 % + 20px ) " but got "20px "
255+
PASS CSS Transitions: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)]
256+
PASS CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)]
257257
PASS CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (0) should be [10%]
258-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] assert_equals: expected "13px " but got "calc ( 7 % + 6px ) "
259-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] assert_equals: expected "16px " but got "calc ( 4 % + 12px ) "
260-
PASS CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)]
261-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)] assert_equals: expected "25px " but got "calc ( - 5 % + 30px ) "
262-
FAIL CSS Animations: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] assert_equals: expected "7px " but got "calc ( 13 % - 6px ) "
258+
PASS CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)]
259+
PASS CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)]
260+
FAIL CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)] assert_equals: expected "calc ( 0 % + 20px ) " but got "20px "
261+
PASS CSS Transitions with transition: all: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)]
262+
PASS CSS Animations: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)]
263263
PASS CSS Animations: property <border-image-width> from [10%] to [20px] at (0) should be [10%]
264-
FAIL CSS Animations: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] assert_equals: expected "13px " but got "calc ( 7 % + 6px ) "
265-
FAIL CSS Animations: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] assert_equals: expected "16px " but got "calc ( 4 % + 12px ) "
266-
PASS CSS Animations: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)]
267-
FAIL CSS Animations: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)] assert_equals: expected "25px " but got "calc ( - 5 % + 30px ) "
268-
FAIL Web Animations: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)] assert_equals: expected "7px " but got "calc ( 13 % - 6px ) "
264+
PASS CSS Animations: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)]
265+
PASS CSS Animations: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)]
266+
FAIL CSS Animations: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)] assert_equals: expected "calc ( 0 % + 20px ) " but got "20px "
267+
PASS CSS Animations: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)]
268+
PASS Web Animations: property <border-image-width> from [10%] to [20px] at (-0.3) should be [calc(13% + -6px)]
269269
PASS Web Animations: property <border-image-width> from [10%] to [20px] at (0) should be [10%]
270-
FAIL Web Animations: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)] assert_equals: expected "13px " but got "calc ( 7 % + 6px ) "
271-
FAIL Web Animations: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)] assert_equals: expected "16px " but got "calc ( 4 % + 12px ) "
272-
PASS Web Animations: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)]
273-
FAIL Web Animations: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)] assert_equals: expected "25px " but got "calc ( - 5 % + 30px ) "
274-
FAIL CSS Transitions: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)] assert_equals: expected "7px " but got "calc ( - 6 % + 13px ) "
275-
PASS CSS Transitions: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)]
276-
FAIL CSS Transitions: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] assert_equals: expected "13px " but got "calc ( 6 % + 7px ) "
277-
FAIL CSS Transitions: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] assert_equals: expected "16px " but got "calc ( 12 % + 4px ) "
270+
PASS Web Animations: property <border-image-width> from [10%] to [20px] at (0.3) should be [calc(7% + 6px)]
271+
PASS Web Animations: property <border-image-width> from [10%] to [20px] at (0.6) should be [calc(4% + 12px)]
272+
FAIL Web Animations: property <border-image-width> from [10%] to [20px] at (1) should be [calc(0% + 20px)] assert_equals: expected "calc ( 0 % + 20px ) " but got "20px "
273+
PASS Web Animations: property <border-image-width> from [10%] to [20px] at (1.5) should be [calc(-5% + 30px)]
274+
PASS CSS Transitions: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)]
275+
FAIL CSS Transitions: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)] assert_equals: expected "calc ( 0 % + 10px ) " but got "10px "
276+
PASS CSS Transitions: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)]
277+
PASS CSS Transitions: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)]
278278
PASS CSS Transitions: property <border-image-width> from [10px] to [20%] at (1) should be [20%]
279-
FAIL CSS Transitions: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] assert_equals: expected "25px " but got "calc ( 30 % - 5px ) "
280-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)] assert_equals: expected "7px " but got "calc ( - 6 % + 13px ) "
281-
PASS CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)]
282-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] assert_equals: expected "13px " but got "calc ( 6 % + 7px ) "
283-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] assert_equals: expected "16px " but got "calc ( 12 % + 4px ) "
279+
PASS CSS Transitions: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)]
280+
PASS CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)]
281+
FAIL CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)] assert_equals: expected "calc ( 0 % + 10px ) " but got "10px "
282+
PASS CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)]
283+
PASS CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)]
284284
PASS CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (1) should be [20%]
285-
FAIL CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] assert_equals: expected "25px " but got "calc ( 30 % - 5px ) "
286-
FAIL CSS Animations: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)] assert_equals: expected "7px " but got "calc ( - 6 % + 13px ) "
287-
PASS CSS Animations: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)]
288-
FAIL CSS Animations: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] assert_equals: expected "13px " but got "calc ( 6 % + 7px ) "
289-
FAIL CSS Animations: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] assert_equals: expected "16px " but got "calc ( 12 % + 4px ) "
285+
PASS CSS Transitions with transition: all: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)]
286+
PASS CSS Animations: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)]
287+
FAIL CSS Animations: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)] assert_equals: expected "calc ( 0 % + 10px ) " but got "10px "
288+
PASS CSS Animations: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)]
289+
PASS CSS Animations: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)]
290290
PASS CSS Animations: property <border-image-width> from [10px] to [20%] at (1) should be [20%]
291-
FAIL CSS Animations: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] assert_equals: expected "25px " but got "calc ( 30 % - 5px ) "
292-
FAIL Web Animations: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)] assert_equals: expected "7px " but got "calc ( - 6 % + 13px ) "
293-
PASS Web Animations: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)]
294-
FAIL Web Animations: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)] assert_equals: expected "13px " but got "calc ( 6 % + 7px ) "
295-
FAIL Web Animations: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)] assert_equals: expected "16px " but got "calc ( 12 % + 4px ) "
291+
PASS CSS Animations: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)]
292+
PASS Web Animations: property <border-image-width> from [10px] to [20%] at (-0.3) should be [calc(13px + -6%)]
293+
FAIL Web Animations: property <border-image-width> from [10px] to [20%] at (0) should be [calc(0% + 10px)] assert_equals: expected "calc ( 0 % + 10px ) " but got "10px "
294+
PASS Web Animations: property <border-image-width> from [10px] to [20%] at (0.3) should be [calc(7px + 6%)]
295+
PASS Web Animations: property <border-image-width> from [10px] to [20%] at (0.6) should be [calc(4px + 12%)]
296296
PASS Web Animations: property <border-image-width> from [10px] to [20%] at (1) should be [20%]
297-
FAIL Web Animations: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)] assert_equals: expected "25px " but got "calc ( 30 % - 5px ) "
297+
PASS Web Animations: property <border-image-width> from [10px] to [20%] at (1.5) should be [calc(-5px + 30%)]
298298
PASS CSS Transitions: property <border-image-width> from [10px auto auto 20] to [110px auto auto 120] at (-0.3) should be [ 0px auto auto 0]
299299
PASS CSS Transitions: property <border-image-width> from [10px auto auto 20] to [110px auto auto 120] at (0) should be [ 10px auto auto 20]
300300
PASS CSS Transitions: property <border-image-width> from [10px auto auto 20] to [110px auto auto 120] at (0.3) should be [ 40px auto auto 50]

‎LayoutTests/imported/w3c/web-platform-tests/css/css-backgrounds/parsing/border-image-width-computed-expected.txt‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ PASS Property border-image-width value '1'
44
PASS Property border-image-width value 'auto'
55
PASS Property border-image-width value '10px'
66
PASS Property border-image-width value '20%'
7-
FAIL Property border-image-width value 'calc(20% + 10px)' assert_equals: expected "calc(20% + 10px)" but got "30px"
7+
PASS Property border-image-width value 'calc(20% + 10px)'
88
PASS Property border-image-width value 'calc(-0.5em + 10px)'
99
PASS Property border-image-width value 'calc(0.5em + 10px)'
1010
PASS Property border-image-width value '1 auto'

‎Source/WebCore/ChangeLog‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
2021-04-12 Antoine Quint <graouts@webkit.org>
2+
3+
border-image-width computed values should be a calc() value if it contains a percentage
4+
https://bugs.webkit.org/show_bug.cgi?id=224420
5+
6+
Reviewed by Simon Fraser.
7+
8+
When handling calc() values containing a percentage, we must retain the calc() form when creating
9+
the computed style for border-image-width.
10+
11+
* css/CSSToStyleMap.cpp:
12+
(WebCore::CSSToStyleMap::mapNinePieceImageQuad):
13+
114
2021-04-12 Youenn Fablet <youenn@apple.com>
215

316
Add support for RTCEncodedFrame metadata

‎Source/WebCore/css/CSSToStyleMap.cpp‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -596,27 +596,35 @@ LengthBox CSSToStyleMap::mapNinePieceImageQuad(CSSValue& value)
596596
box.top() = Length(slices->top()->floatValue(), LengthType::Relative);
597597
else if (slices->top()->isPercentage())
598598
box.top() = Length(slices->top()->doubleValue(CSSUnitType::CSS_PERCENTAGE), LengthType::Percent);
599+
else if (slices->top()->isCalculatedPercentageWithLength())
600+
box.top() = Length(slices->top()->cssCalcValue()->createCalculationValue(conversionData));
599601
else if (slices->top()->valueID() != CSSValueAuto)
600602
box.top() = slices->top()->computeLength<Length>(conversionData);
601603

602604
if (slices->right()->isNumber())
603605
box.right() = Length(slices->right()->floatValue(), LengthType::Relative);
604606
else if (slices->right()->isPercentage())
605607
box.right() = Length(slices->right()->doubleValue(CSSUnitType::CSS_PERCENTAGE), LengthType::Percent);
608+
else if (slices->right()->isCalculatedPercentageWithLength())
609+
box.right() = Length(slices->right()->cssCalcValue()->createCalculationValue(conversionData));
606610
else if (slices->right()->valueID() != CSSValueAuto)
607611
box.right() = slices->right()->computeLength<Length>(conversionData);
608612

609613
if (slices->bottom()->isNumber())
610614
box.bottom() = Length(slices->bottom()->floatValue(), LengthType::Relative);
611615
else if (slices->bottom()->isPercentage())
612616
box.bottom() = Length(slices->bottom()->doubleValue(CSSUnitType::CSS_PERCENTAGE), LengthType::Percent);
617+
else if (slices->bottom()->isCalculatedPercentageWithLength())
618+
box.bottom() = Length(slices->bottom()->cssCalcValue()->createCalculationValue(conversionData));
613619
else if (slices->bottom()->valueID() != CSSValueAuto)
614620
box.bottom() = slices->bottom()->computeLength<Length>(conversionData);
615621

616622
if (slices->left()->isNumber())
617623
box.left() = Length(slices->left()->floatValue(), LengthType::Relative);
618624
else if (slices->left()->isPercentage())
619625
box.left() = Length(slices->left()->doubleValue(CSSUnitType::CSS_PERCENTAGE), LengthType::Percent);
626+
else if (slices->left()->isCalculatedPercentageWithLength())
627+
box.left() = Length(slices->left()->cssCalcValue()->createCalculationValue(conversionData));
620628
else if (slices->left()->valueID() != CSSValueAuto)
621629
box.left() = slices->left()->computeLength<Length>(conversionData);
622630

0 commit comments

Comments
 (0)