Bug 206161 - getComputedStyle(img).height returns string of a rounded int not a float
Summary: getComputedStyle(img).height returns string of a rounded int not a float
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Sammy Gill
Keywords: InRadar
Depends on:
Blocks: 201641
  Show dependency treegraph
Reported: 2020-01-12 21:04 PST by cathiechen
Modified: 2022-06-24 23:18 PDT (History)
12 users (show)

See Also:

testcase (719 bytes, text/html)
2020-01-14 02:26 PST, Frédéric Wang (:fredw)
no flags Details
testcase (722 bytes, text/html)
2020-01-14 02:28 PST, Frédéric Wang (:fredw)
no flags Details
Add_img_test_cases (1.88 KB, text/html)
2020-01-15 04:07 PST, cathiechen
no flags Details
Add_img_test_cases (1.92 KB, text/html)
2020-01-15 05:55 PST, cathiechen
no flags Details
Patch (6.13 KB, patch)
2020-01-17 07:03 PST, cathiechen
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description cathiechen 2020-01-12 21:04:34 PST
According to the spec getComputedStyle(img).height should return the "Used Value" if img isn't display:none.
The "Used Value" of height is (used width) / (intrinsic ratio). So it can be a float, while WebKit always returns rouned int. (https://www.w3.org/TR/CSS21/visudet.html#propdef-height)

The related test: LayoutTests/imported/w3c/web-platform-tests/html/rendering/replaced-elements/attributes-for-embedded-content-and-images/img-aspect-ratio.html
Comment 1 Frédéric Wang (:fredw) 2020-01-14 02:25:45 PST
These are the relevant spec definitions:

getComputedStyle(): https://drafts.csswg.org/cssom/#extensions-to-the-window-interface

CSS declaration block: https://drafts.csswg.org/cssom/#css-declaration-block

CSS declaration: https://drafts.csswg.org/cssom/#css-declaration

Serialize a CSS declaration: https://drafts.csswg.org/cssom/#serialize-a-css-declaration

Serialize a CSS value: https://drafts.csswg.org/cssom/#serialize-a-css-value

Serialize a CSS component value: https://drafts.csswg.org/cssom/#serialize-a-css-component-value

    The <number> component serialized as per <number> followed by the unit in its canonical form as defined in its respective specification.
    ISSUE 12: Probably should distinguish between specified and computed / resolved values.

    A base-ten number using digits 0-9 (U+0030 to U+0039) in the shortest form possible, using "." to separate decimals (if any), rounding the value if necessary to not produce more than 6 decimals, preceded by "-" (U+002D) if it is negative.
    Note: scientific notation is not used.

    The <number> component serialized as per <number> followed by the literal string "%" (U+0025).
Comment 2 Frédéric Wang (:fredw) 2020-01-14 02:26:58 PST
Created attachment 387638 [details]

Serialization seems to happen as expected in Gecko/Blink/WebKit with the attached testcase.
Comment 3 Frédéric Wang (:fredw) 2020-01-14 02:28:37 PST
Created attachment 387639 [details]
Comment 4 cathiechen 2020-01-15 04:07:58 PST
Created attachment 387775 [details]

Hi Fred,

This issue seems only related to RenderReplaced, i.e, use intrinsic aspect-ratio to compute width / height. In RenderReplaced::computeReplacedLogicalWidth and RenderReplaced::computeReplacedLogicalHeight, roundToInt is called.

PS: Append <img> test to your case.
Comment 5 cathiechen 2020-01-15 05:55:25 PST
Created attachment 387784 [details]
Comment 6 cathiechen 2020-01-17 07:03:15 PST
Created attachment 388035 [details]
Comment 7 Radar WebKit Bug Importer 2022-05-24 15:00:17 PDT
Comment 8 Sammy Gill 2022-05-31 14:16:52 PDT
Pull request: https://github.com/WebKit/WebKit/pull/1191
Comment 9 EWS 2022-06-21 16:29:20 PDT
Committed r295701 (251706@main): <https://commits.webkit.org/251706@main>

Reviewed commits have been landed. Closing PR #1191 and removing active labels.