Skip to content

Commit acc57ff

Browse files
svillarsvillar
committed
[css-flex] Images as flex items should use the overridingLogicalWidth when defined to compute the logical height
https://bugs.webkit.org/show_bug.cgi?id=219195 Reviewed by Manuel Rego Casasnovas. LayoutTests/imported/w3c: Replaced 15 FAIL by PASS expectations. * web-platform-tests/css/css-flexbox/image-as-flexitem-size-001-expected.txt: * web-platform-tests/css/css-flexbox/image-as-flexitem-size-002v-expected.txt: * web-platform-tests/css/css-flexbox/image-as-flexitem-size-005-expected.txt: * web-platform-tests/css/css-flexbox/image-as-flexitem-size-006v-expected.txt: * web-platform-tests/css/css-flexbox/image-as-flexitem-size-007-expected.txt: Source/WebCore: This is the same fix than the one we did in r270073 but for the other axis. RenderReplaced should use the overridingLogicalWidth whenever defined instead of the specified logical width to compute the logical height using an intrinsic aspect ratio. The overriding width is set by flex containers that need to stretch/shrink their items. The current code was not considering this case and thus, the intrinsic (non-stretched) logical height was used to compute the logical width, meaning that the stretching set by the flexbox container was ignored. This patch allows WebKit to pass 15 subtests in already existing aspect ratio flexbox tests from WPT. * rendering/RenderReplaced.cpp: (WebCore::RenderReplaced::computeReplacedLogicalHeight const): Use the overriding logical width if defined in presence of a valid aspect ratio. Canonical link: https://commits.webkit.org/231825@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@270116 268f45cc-cd09-0410-ab3c-d52691b4dbfc
1 parent 38789f7 commit acc57ff

8 files changed

Lines changed: 53 additions & 49 deletions

File tree

‎LayoutTests/imported/w3c/ChangeLog‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,18 @@
1+
2020-11-20 Sergio Villar Senin <svillar@igalia.com>
2+
3+
[css-flex] Images as flex items should use the overridingLogicalWidth when defined to compute the logical height
4+
https://bugs.webkit.org/show_bug.cgi?id=219195
5+
6+
Reviewed by Manuel Rego Casasnovas.
7+
8+
Replaced 15 FAIL by PASS expectations.
9+
10+
* web-platform-tests/css/css-flexbox/image-as-flexitem-size-001-expected.txt:
11+
* web-platform-tests/css/css-flexbox/image-as-flexitem-size-002v-expected.txt:
12+
* web-platform-tests/css/css-flexbox/image-as-flexitem-size-005-expected.txt:
13+
* web-platform-tests/css/css-flexbox/image-as-flexitem-size-006v-expected.txt:
14+
* web-platform-tests/css/css-flexbox/image-as-flexitem-size-007-expected.txt:
15+
116
2020-11-20 Chris Lord <clord@igalia.com>
217

318
Enable font functions on OffscreenCanvas for main-thread

‎LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-001-expected.txt‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
PASS .flexbox > img 1
99
PASS .flexbox > img 2
1010
PASS .flexbox > img 3
11-
FAIL .flexbox > img 4 assert_equals:
12-
<img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30">
13-
height expected 30 but got 16
11+
PASS .flexbox > img 4
1412
PASS .flexbox > img 5
1513
PASS .flexbox > img 6
1614
PASS .flexbox > img 7

‎LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-002v-expected.txt‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@
88
PASS .flexbox > img 1
99
PASS .flexbox > img 2
1010
PASS .flexbox > img 3
11-
FAIL .flexbox > img 4 assert_equals:
12-
<img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="30">
13-
width expected 30 but got 16
11+
PASS .flexbox > img 4
1412
PASS .flexbox > img 5
1513
PASS .flexbox > img 6
1614
PASS .flexbox > img 7

‎LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-005-expected.txt‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,14 @@
55

66

77

8-
FAIL .flexbox > img 1 assert_equals:
9-
<img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
10-
height expected 40 but got 16
8+
PASS .flexbox > img 1
119
PASS .flexbox > img 2
1210
PASS .flexbox > img 3
13-
FAIL .flexbox > img 4 assert_equals:
14-
<img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40">
15-
height expected 40 but got 16
16-
FAIL .flexbox > img 5 assert_equals:
17-
<img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
18-
height expected 40 but got 34
19-
FAIL .flexbox > img 6 assert_equals:
20-
<img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
21-
height expected 40 but got 34
22-
FAIL .flexbox > img 7 assert_equals:
23-
<img src="support/solidblue.png" style="min-width: 30px;
24-
min-height: 34px" data-expected-width="40" data-expected-height="40">
25-
height expected 40 but got 34
26-
FAIL .flexbox > img 8 assert_equals:
27-
<img src="support/solidblue.png" style="min-width: 34px;
28-
min-height: 30px" data-expected-width="40" data-expected-height="40">
29-
height expected 40 but got 34
11+
PASS .flexbox > img 4
12+
PASS .flexbox > img 5
13+
PASS .flexbox > img 6
14+
PASS .flexbox > img 7
15+
PASS .flexbox > img 8
3016
PASS .flexbox > img 9
3117
PASS .flexbox > img 10
3218
PASS .flexbox > img 11

‎LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-006v-expected.txt‎

Lines changed: 6 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,14 @@
55

66

77

8-
FAIL .flexbox > img 1 assert_equals:
9-
<img src="support/solidblue.png" data-expected-width="40" data-expected-height="40">
10-
width expected 40 but got 16
8+
PASS .flexbox > img 1
119
PASS .flexbox > img 2
1210
PASS .flexbox > img 3
13-
FAIL .flexbox > img 4 assert_equals:
14-
<img src="support/solidblue.png" style="flex: 1 1 30px" data-expected-width="40" data-expected-height="40">
15-
width expected 40 but got 16
16-
FAIL .flexbox > img 5 assert_equals:
17-
<img src="support/solidblue.png" style="min-width: 34px" data-expected-width="40" data-expected-height="40">
18-
width expected 40 but got 34
19-
FAIL .flexbox > img 6 assert_equals:
20-
<img src="support/solidblue.png" style="min-height: 34px" data-expected-width="40" data-expected-height="40">
21-
width expected 40 but got 34
22-
FAIL .flexbox > img 7 assert_equals:
23-
<img src="support/solidblue.png" style="min-width: 30px;
24-
min-height: 34px" data-expected-width="40" data-expected-height="40">
25-
width expected 40 but got 34
26-
FAIL .flexbox > img 8 assert_equals:
27-
<img src="support/solidblue.png" style="min-width: 34px;
28-
min-height: 30px" data-expected-width="40" data-expected-height="40">
29-
width expected 40 but got 34
11+
PASS .flexbox > img 4
12+
PASS .flexbox > img 5
13+
PASS .flexbox > img 6
14+
PASS .flexbox > img 7
15+
PASS .flexbox > img 8
3016
PASS .flexbox > img 9
3117
PASS .flexbox > img 10
3218
PASS .flexbox > img 11

‎LayoutTests/imported/w3c/web-platform-tests/css/css-flexbox/image-as-flexitem-size-007-expected.txt‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,7 @@ PASS .flexbox > img 2
1010
FAIL .flexbox > img 3 assert_equals:
1111
<img src="support/solidblue.png" style="height: 30px" data-expected-width="32" data-expected-height="30">
1212
width expected 32 but got 30
13-
FAIL .flexbox > img 4 assert_equals:
14-
<img src="support/solidblue.png" style="flex: 0 0 30px" data-expected-width="30" data-expected-height="28">
15-
height expected 28 but got 20
13+
PASS .flexbox > img 4
1614
PASS .flexbox > img 5
1715
PASS .flexbox > img 6
1816
PASS .flexbox > img 7

‎Source/WebCore/ChangeLog‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
2020-11-20 Sergio Villar Senin <svillar@igalia.com>
2+
3+
[css-flex] Images as flex items should use the overridingLogicalWidth when defined to compute the logical height
4+
https://bugs.webkit.org/show_bug.cgi?id=219195
5+
6+
Reviewed by Manuel Rego Casasnovas.
7+
8+
This is the same fix than the one we did in r270073 but for the other axis. RenderReplaced should use the overridingLogicalWidth
9+
whenever defined instead of the specified logical width to compute the logical height using an intrinsic aspect ratio.
10+
The overriding width is set by flex containers that need to stretch/shrink their items. The current code was not considering
11+
this case and thus, the intrinsic (non-stretched) logical height was used to compute the logical width,
12+
meaning that the stretching set by the flexbox container was ignored.
13+
14+
This patch allows WebKit to pass 15 subtests in already existing aspect ratio flexbox tests from WPT.
15+
16+
* rendering/RenderReplaced.cpp:
17+
(WebCore::RenderReplaced::computeReplacedLogicalHeight const): Use the overriding logical width if defined in presence of a valid aspect ratio.
18+
119
2020-11-20 Don Olmstead <don.olmstead@sony.com>
220

321
Use final in generated callback code

‎Source/WebCore/rendering/RenderReplaced.cpp‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -581,6 +581,11 @@ LayoutUnit RenderReplaced::computeReplacedLogicalHeight(Optional<LayoutUnit> est
581581

582582
bool widthIsAuto = style().logicalWidth().isAuto();
583583
bool hasIntrinsicHeight = constrainedSize.height() > 0;
584+
bool hasIntrinsicWidth = constrainedSize.width() > 0;
585+
586+
// See computeReplacedLogicalHeight() for a similar check for heights.
587+
if (intrinsicRatio && isFlexItem() && hasOverridingLogicalWidth() && hasIntrinsicHeight && hasIntrinsicWidth)
588+
return computeReplacedLogicalHeightRespectingMinMaxHeight(roundToInt(round(overridingContentLogicalWidth() / intrinsicRatio)));
584589

585590
// If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic height, then that intrinsic height is the used value of 'height'.
586591
if (widthIsAuto && hasIntrinsicHeight)

0 commit comments

Comments
 (0)