Bug 206161 – getComputedStyle(img).height returns string of a rounded int not a float

• Status: RESOLVED
• Resolution: FIXED
• Component: CSS

[cathiechen]

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

[Frédéric Wang (:fredw)]

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

<length>
    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.

<number>
    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.

<percentage>
    The <number> component serialized as per <number> followed by the literal string "%" (U+0025).

[Frédéric Wang (:fredw)]

Created attachment 387638 [details]
testcase

Serialization seems to happen as expected in Gecko/Blink/WebKit with the attached testcase.

[Frédéric Wang (:fredw)]

Created attachment 387639 [details]
testcase

[cathiechen]

Created attachment 387775 [details]
Add_img_test_cases

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.

[cathiechen]

Created attachment 387784 [details]
Add_img_test_cases

[cathiechen]

Created attachment 388035 [details]
Patch

[Radar WebKit Bug Importer]

<rdar://problem/93860607>

[Sammy Gill]

Pull request: https://github.com/WebKit/WebKit/pull/1191

[EWS]

Committed r295701 (251706@main): <https://commits.webkit.org/251706@main>

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

[Sammy Gill]

Re-opening for pull request https://github.com/WebKit/WebKit/pull/1902

[EWS]

Committed 251955@main (5d047d546dd9): <https://commits.webkit.org/251955@main>

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

[Sammy Gill]

Patch has been reverted due to regression reported in 242079. Reopening.

[Sammy Gill]

Pull request: https://github.com/WebKit/WebKit/pull/2138

[EWS]

Committed 252583@main (e2c4f937d459): <https://commits.webkit.org/252583@main>

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