Skip to content
Permalink
Browse files
getComputedStyle(img).height returns string of a rounded int not a float
https://bugs.webkit.org/show_bug.cgi?id=206161
<rdar://93860607>

Patch by Sammy Gill <sgill26@apple.com> on 2022-06-21
Reviewed by Alan Bujtas.

When computing the logical height/width for a replaced element, we may
need to calculate it using (used width) / (intrinsic ratio) or
(used height) / (intrinsic ratio). In either case, these are the
used values according to the spec, which means they may be floats.

Currently, WebKit performs these computations, but it also rounds them
leading to an incorrect value. By removing these calls to round, the
computed value should line up with what is specified in the spec.

As a result of this change, several tests needed to be rebaselined since
the generated content was slightly different. In the test cases, there
were certain elements that computed a slightly different width/height
value, which resulted in different dimensions that were used in the
rendering as well as in the output of the tests. Depending on how the
dimensions of an element changed, this could have in turn caused a
nearby element to get rendered slightly differetly as well. For example,
if an element had a slight increase in its height, this could have
caused a neighboring element to have a slightly different position in
the y dimension. The more of these interactions/differences there are
would mean we would see a greater difference in the expected vs actual
output (e.g. css1/text_properties/vertical_align.html).

However, this change should be seen as a progression when comparing the
tests with the results of other browsers. By loading up the tests in
other browsers, you can see that the dimensions that are calculated
are more in line with the new values generated with this patch.

Referenced spec: https://www.w3.org/TR/CSS21/visudet.html#propdef-height

* Source/WebCore/rendering/RenderReplaced.cpp:
(WebCore::resolveWidthForRatio):
(WebCore::RenderReplaced::computeReplacedLogicalWidth const):
(WebCore::resolveHeightForRatio):
(WebCore::RenderReplaced::computeReplacedLogicalHeight const):
* LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt:
* LayoutTests/fast/block/positioning/replaced-inside-fixed-top-bottom-expected.txt:
* LayoutTests/fast/writing-mode/block-level-images-expected.txt:
* LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio-expected.txt:
* LayoutTests/platform/mac/css1/box_properties/width-expected.txt:
* LayoutTests/platform/mac/css1/formatting_model/replaced_elements-expected.txt:
* LayoutTests/platform/mac/css1/text_properties/vertical_align-expected.txt:
* LayoutTests/platform/mac/fast/repaint/block-layout-inline-children-replaced-expected.txt:
* LayoutTests/platform/mac/fast/replaced/width100percent-image-expected.txt:
* LayoutTests/platform/mac/svg/wicd/test-rightsizing-b-expected.txt:
* LayoutTests/platform/mac/tables/mozilla/bugs/bug14929-expected.txt:
* LayoutTests/platform/mac/tables/mozilla_expected_failures/bugs/bug85016-expected.txt:
* LayoutTests/svg/css/max-width-2-expected.html:
* LayoutTests/platform/glib/css2.1/t090501-c414-flt-03-b-g-expected.txt:
* LayoutTests/platform/glib/fast/block/positioning/replaced-inside-fixed-top-bottom-expected.txt:
* LayoutTests/platform/glib/tables/mozilla_expected_failures/bugs/bug85016-expected.txt:
* LayoutTests/platform/gtk/css1/box_properties/width-expected.txt:
* LayoutTests/platform/gtk/css1/formatting_model/replaced_elements-expected.txt:
* LayoutTests/platform/gtk/css1/text_properties/vertical_align-expected.txt:
* LayoutTests/platform/gtk/css2.1/t090501-c414-flt-03-b-g-expected.png:
* LayoutTests/platform/gtk/fast/repaint/block-layout-inline-children-replaced-expected.png:
* LayoutTests/platform/gtk/fast/repaint/block-layout-inline-children-replaced-expected.txt:
* LayoutTests/platform/gtk/fast/replaced/width100percent-image-expected.txt:
* LayoutTests/platform/gtk/tables/mozilla/bugs/bug14929-expected.txt:
* LayoutTests/platform/ios/css1/text_properties/vertical_align-expected.txt:
* LayoutTests/platform/ios/fast/replaced/width100percent-image-expected.txt:
* LayoutTests/platform/ios/tables/mozilla/bugs/bug14929-expected.txt:
* LayoutTests/platform/ios/tables/mozilla_expected_failures/bugs/bug85016-expected.txt:
* LayoutTests/platform/glib/TestExpectations:
* LayoutTests/platform/gtk/TestExpectations:

Canonical link: https://commits.webkit.org/251706@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@295701 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
sgill26 authored and webkit-commit-queue committed Jun 21, 2022
1 parent 0ea60ac commit e7abdadb1b69209d90e51b46caab32d4cc6bb093
Showing 31 changed files with 519 additions and 513 deletions.
@@ -7,6 +7,6 @@ layer at (50,100) size 700x400
RenderBlock (positioned) {DIV} at (50,100) size 700x400 [border: (1px solid #808080)]
layer at (51,141) size 560x320
RenderBlock (positioned) {DIV} at (1,40) size 561x322 [border: (1px solid #FF0000)]
RenderImage {IMG} at (1,1) size 393x319
RenderImage {IMG} at (1,1) size 394x319
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (0,0) size 0x0
@@ -3,13 +3,13 @@ layer at (0,0) size 800x600
layer at (0,0) size 800x316
RenderBlock {HTML} at (0,0) size 800x316
RenderBody {BODY} at (8,8) size 784x0
RenderBlock (floating) {DIV} at (2,2) size 264x304 [border: (2px solid #000000)]
RenderBlock (floating) {DIV} at (2,2) size 265x304 [border: (2px solid #000000)]
RenderBlock {DIV} at (2,2) size 25x300 [bgcolor=#008000]
RenderImage {IMG} at (27,2) size 154x156 [border: (1px solid #800080) (2px solid #800000) (5px dashed #808080) (2px solid #800000)]
RenderImage {IMG} at (181,42) size 56x50
RenderBlock {DIV} at (237,2) size 25x300 [bgcolor=#008000]
RenderBlock (floating) {DIV} at (270,2) size 264x304 [border: (2px solid #000000)]
RenderImage {IMG} at (181,42) size 57x50
RenderBlock {DIV} at (237,2) size 26x300 [bgcolor=#008000]
RenderBlock (floating) {DIV} at (270,2) size 265x304 [border: (2px solid #000000)]
RenderBlock {DIV} at (2,2) size 25x300 [bgcolor=#008000]
RenderImage {IMG} at (27,146) size 154x156 [border: (5px dashed #808080) (2px solid #800000) (1px solid #800080) (2px solid #800000)]
RenderImage {IMG} at (181,212) size 56x50
RenderBlock {DIV} at (237,2) size 25x300 [bgcolor=#008000]
RenderImage {IMG} at (181,212) size 57x50
RenderBlock {DIV} at (237,2) size 26x300 [bgcolor=#008000]
@@ -1,11 +1,11 @@
CONSOLE MESSAGE: ReferenceError: Can't find variable: checkLayout
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
layer at (0,0) size 800x130
RenderBlock {HTML} at (0,0) size 800x130
layer at (0,0) size 800x129
RenderBlock {HTML} at (0,0) size 800x129
RenderBody {BODY} at (8,8) size 784x0
layer at (8,8) size 203x0
RenderBlock (relative positioned) {DIV} at (0,0) size 204x0
RenderHTMLCanvas {CANVAS} at (0,0) size 61x61 [bgcolor=#008000]
RenderHTMLCanvas {CANVAS} at (60,0) size 62x61 [bgcolor=#008000]
RenderHTMLCanvas {CANVAS} at (0,61) size 122x61 [bgcolor=#008000]
RenderHTMLCanvas {CANVAS} at (0,60) size 122x61 [bgcolor=#008000]
@@ -40,5 +40,5 @@ PASS Loaded images test: <img> with width and height attributes, but conflicting
PASS Loaded images test: <img> with width, height and empty src attributes
PASS Loaded images test: Error image with width and height attributes
PASS Loaded images test: Error image with width, height and alt attributes
FAIL Loaded images test: <img> with width and height attributes, but not equal to the original aspect ratio assert_approx_equals: The original aspect ratio of blue.png expected 1.2547169811320755 +/- 0.001 but got 1.25
PASS Loaded images test: <img> with width and height attributes, but not equal to the original aspect ratio

@@ -697,6 +697,8 @@ imported/w3c/web-platform-tests/css/css-transforms/ttwf-css-3d-polygon-cycle.htm

webkit.org/b/241568 imported/w3c/web-platform-tests/css/css-transforms/transform3d-rotatex-perspective-003.html [ ImageOnlyFailure ]

# Changes to logical height/width computations (https://bugs.webkit.org/show_bug.cgi?id=241601)
webkit.org/b/241601 css2.1/t090501-c414-flt-03-b-g.html [ Failure ]

#////////////////////////////////////////////////////////////////////////////////////////
# End of CSS-related bugs
@@ -7,12 +7,12 @@ layer at (0,0) size 800x238
RenderText {#text} at (0,2) size 396x17
text run at (0,2) width 246: "In the following test, the purple square "
text run at (246,2) width 150: "should be on the left (\x{21E6}"
RenderImage {IMG} at (396,0) size 19x20
RenderText {#text} at (415,2) size 215x17
text run at (415,2) width 215: "), and the teal square on the right ("
RenderImage {IMG} at (630,0) size 19x20
RenderText {#text} at (649,2) size 738x35
text run at (649,2) width 89: "\x{21E8}) of the blue"
RenderImage {IMG} at (396,0) size 20x20
RenderText {#text} at (415,2) size 216x17
text run at (415,2) width 216: "), and the teal square on the right ("
RenderImage {IMG} at (630,0) size 20x20
RenderText {#text} at (649,2) size 739x35
text run at (649,2) width 90: "\x{21E8}) of the blue"
text run at (0,20) width 61: "rectangle."
RenderBlock {DIV} at (0,54) size 784x70
RenderBlock {DIV} at (16,0) size 752x70 [color=#0000FF] [bgcolor=#000080]
@@ -22,4 +22,4 @@ layer at (0,0) size 800x238
text run at (168,8) width 392: "Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle."
text run at (168,26) width 198: "Blue rectangle. Blue rectangle. "
text run at (366,26) width 194: "Blue rectangle. Blue rectangle."
text run at (168,44) width 392: "Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle."
text run at (168,44) width 392: "Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle."
@@ -7,6 +7,6 @@ layer at (50,100) size 700x400
RenderBlock (positioned) {div} at (50,100) size 700x400 [border: (1px solid #808080)]
layer at (51,141) size 560x320
RenderBlock (positioned) {div} at (1,40) size 561x322 [border: (1px solid #FF0000)]
RenderImage {img} at (1,1) size 393x319
RenderImage {img} at (1,1) size 394x319
RenderText {#text} at (0,0) size 0x0
RenderText {#text} at (0,0) size 0x0
@@ -12,7 +12,7 @@ layer at (0,0) size 785x2059
text run at (0,0) width 541: "percentage height images in DIV with no height (red) in a DIV with no height (green)"
RenderBlock {DIV} at (32,735) size 657x657 [border: (3px dotted #008000)]
RenderBlock {DIV} at (35,35) size 587x587 [border: (1px solid #FF0000)]
RenderImage {IMG} at (1,1) size 860x585
RenderImage {IMG} at (1,1) size 861x585
RenderText {#text} at (0,0) size 0x0
RenderBlock {P} at (0,1424) size 721x18
RenderText {#text} at (0,0) size 471x17
@@ -909,6 +909,10 @@ webkit.org/b/236298 imported/w3c/web-platform-tests/css/css-ui/text-overflow-022
# Requires support for xHE-HAAC audio codec
webkit.org/b/239750 media/media-source/media-mp4-xhe-aac.html [ Skip ]

# Changes to logical height/width computations (https://bugs.webkit.org/show_bug.cgi?id=241601)
webkit.org/b/241601 svg/wicd/rightsizing-grid.xhtml [ Failure ]
webkit.org/b/241601 svg/wicd/test-rightsizing-b.xhtml [ Failure ]

#////////////////////////////////////////////////////////////////////////////////////////
# End of Expected failures.
#////////////////////////////////////////////////////////////////////////////////////////
@@ -59,7 +59,7 @@ layer at (0,0) size 785x1342
RenderText {#text} at (0,0) size 287x17
text run at (0,0) width 287: "The square above should be fifty pixels wide."
RenderBlock (anonymous) at (4,104) size 363x181
RenderImage {IMG} at (0,0) size 182x181
RenderImage {IMG} at (0,0) size 182x182
RenderText {#text} at (0,0) size 0x0
RenderBlock {P} at (4,301) size 363x36
RenderText {#text} at (0,0) size 348x35
@@ -1,8 +1,8 @@
layer at (0,0) size 785x2341
layer at (0,0) size 785x2339
RenderView at (0,0) size 785x600
layer at (0,0) size 785x2341
RenderBlock {HTML} at (0,0) size 785x2341
RenderBody {BODY} at (8,8) size 769x2325 [bgcolor=#CCCCCC]
layer at (0,0) size 785x2339
RenderBlock {HTML} at (0,0) size 785x2339
RenderBody {BODY} at (8,8) size 769x2323 [bgcolor=#CCCCCC]
RenderBlock {P} at (0,0) size 769x18
RenderText {#text} at (0,0) size 355x17
text run at (0,0) width 355: "The style declarations which apply to the text below are:"
@@ -38,29 +38,29 @@ layer at (0,0) size 785x2341
RenderText {#text} at (0,0) size 400x17
text run at (0,0) width 400: "The above image should be a 15px square aligned at the center."
RenderImage {IMG} at (192,350) size 385x385
RenderBlock {P} at (0,751) size 769x36
RenderBlock {P} at (0,750) size 769x37
RenderText {#text} at (0,0) size 766x35
text run at (0,0) width 766: "The above image should be a square resized so its width is 50% of the its parent element, and centered horizontally within"
text run at (0,18) width 123: "the parent element: "
text run at (123,18) width 395: "the document body in the first half, and the table in the second."
RenderImage {IMG} at (384,803) size 385x385
RenderBlock {P} at (0,1204) size 769x36
RenderImage {IMG} at (384,802) size 385x385
RenderBlock {P} at (0,1203) size 769x36
RenderText {#text} at (0,0) size 758x35
text run at (0,0) width 758: "The above image should be a square resized so its width is 50% of its parent element, and aligned at the right edge of the"
text run at (0,18) width 100: "parent element: "
text run at (100,18) width 395: "the document body in the first half, and the table in the second."
RenderTable {TABLE} at (0,1256) size 769x1069 [border: (1px outset #808080)]
RenderTableSection {TBODY} at (1,1) size 767x1067
RenderTable {TABLE} at (0,1255) size 769x1068 [border: (1px outset #808080)]
RenderTableSection {TBODY} at (1,1) size 767x1066
RenderTableRow {TR} at (0,0) size 767x26
RenderTableCell {TD} at (0,0) size 767x26 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=0 c=0 rs=1 cs=2]
RenderInline {STRONG} at (0,0) size 161x17
RenderText {#text} at (4,4) size 161x17
text run at (4,4) width 161: "TABLE Testing Section"
RenderTableRow {TR} at (0,26) size 767x1041
RenderTableCell {TD} at (0,533) size 12x27 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1]
RenderText {#text} at (4,3) size 4x19
RenderTableRow {TR} at (0,26) size 767x1040
RenderTableCell {TD} at (0,533) size 12x26 [bgcolor=#C0C0C0] [border: (1px inset #808080)] [r=1 c=0 rs=1 cs=1]
RenderText {#text} at (4,4) size 4x17
text run at (4,4) width 4: " "
RenderTableCell {TD} at (12,26) size 755x1041 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]
RenderTableCell {TD} at (12,26) size 755x1040 [border: (1px inset #808080)] [r=1 c=1 rs=1 cs=1]
RenderBlock {P} at (4,4) size 747x19
RenderImage {IMG} at (0,0) size 15x15
RenderText {#text} at (15,1) size 434x17
@@ -74,13 +74,13 @@ layer at (0,0) size 785x2341
RenderText {#text} at (0,0) size 400x17
text run at (0,0) width 400: "The above image should be a 15px square aligned at the center."
RenderImage {IMG} at (190,169) size 375x374
RenderBlock {P} at (4,559) size 747x36
RenderBlock {P} at (4,558) size 747x37
RenderText {#text} at (0,0) size 722x35
text run at (0,0) width 722: "The above image should be a square resized so its width is 50% of the its parent element, and centered horizontally"
text run at (0,18) width 167: "within the parent element: "
text run at (167,18) width 395: "the document body in the first half, and the table in the second."
RenderImage {IMG} at (377,611) size 374x374
RenderBlock {P} at (4,1001) size 747x36
RenderImage {IMG} at (377,610) size 374x374
RenderBlock {P} at (4,1000) size 747x36
RenderText {#text} at (0,0) size 735x35
text run at (0,0) width 735: "The above image should be a square resized so its width is 50% of its parent element, and aligned at the right edge of"
text run at (0,18) width 123: "the parent element: "

0 comments on commit e7abdad

Please sign in to comment.