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
WebKit · Jun 21, 2022 · e7abdadb1b69209d90e51b46caab32d4cc6bb093 · e7abdad
1 parent 0ea60ac
commit e7abdadb1b69209d90e51b46caab32d4cc6bb093
Showing 31 changed files with 519 additions and 513 deletions.
diff --git a/LayoutTests/fast/block/positioning/replaced-inside-fixed-top-bottom-expected.txt b/LayoutTests/fast/block/positioning/replaced-inside-fixed-top-bottom-expected.txt
@@ -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
diff --git a/LayoutTests/fast/writing-mode/block-level-images-expected.txt b/LayoutTests/fast/writing-mode/block-level-images-expected.txt
@@ -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]
diff --git a/...b-platform-tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio-expected.txt b/...b-platform-tests/css/css-sizing/replaced-fractional-height-from-aspect-ratio-expected.txt
@@ -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]
diff --git a/...eplaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt b/...eplaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio-expected.txt
@@ -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
 
diff --git a/LayoutTests/platform/glib/TestExpectations b/LayoutTests/platform/glib/TestExpectations
@@ -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

diff --git a/LayoutTests/platform/glib/css2.1/t090501-c414-flt-03-b-g-expected.txt b/LayoutTests/platform/glib/css2.1/t090501-c414-flt-03-b-g-expected.txt
@@ -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."
diff --git a/...tTests/platform/glib/fast/block/positioning/replaced-inside-fixed-top-bottom-expected.txt b/...tTests/platform/glib/fast/block/positioning/replaced-inside-fixed-top-bottom-expected.txt
@@ -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
diff --git a/LayoutTests/platform/glib/tables/mozilla_expected_failures/bugs/bug85016-expected.txt b/LayoutTests/platform/glib/tables/mozilla_expected_failures/bugs/bug85016-expected.txt
@@ -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

diff --git a/LayoutTests/platform/gtk/TestExpectations b/LayoutTests/platform/gtk/TestExpectations
@@ -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.
 #////////////////////////////////////////////////////////////////////////////////////////

diff --git a/LayoutTests/platform/gtk/css1/box_properties/width-expected.txt b/LayoutTests/platform/gtk/css1/box_properties/width-expected.txt
@@ -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

diff --git a/LayoutTests/platform/gtk/css1/formatting_model/replaced_elements-expected.txt b/LayoutTests/platform/gtk/css1/formatting_model/replaced_elements-expected.txt
@@ -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: "