Bug 274790 - [CSS 2.1 Conformance] [testcase] <object> or <img> specified with attribute specification width and height percentages or with css width and height percentages and with intrinsic ratio
Summary: [CSS 2.1 Conformance] [testcase] <object> or <img> specified with attribute s...
Status: CONFIRMED
Alias: None
Product: konqueror
Classification: Applications
Component: khtml (show other bugs)
Version: 4.7.4
Platform: Ubuntu Linux
: NOR normal
Target Milestone: ---
Assignee: Konqueror Developers
URL: http://www.gtalbot.org/BrowserBugsSec...
Keywords: reproducible, testcase
Depends on:
Blocks:
 
Reported: 2011-06-02 23:03 UTC by Gérard Talbot (no longer involved)
Modified: 2014-06-04 15:53 UTC (History)
1 user (show)

See Also:
Latest Commit:
Version Fixed In:

Attachments
Add an attachment

Note You need to log in before you can comment on or make changes to this bug.
Description Gérard Talbot (no longer involved) 2011-06-02 23:03:24 UTC 
Version:           4.6.3 (using KDE 4.6.3) 
OS:                Linux

Relevant URLs
-------------

http://www.w3.org/QA/2004/02/object/test-case-003

http://www.w3.org/QA/2004/02/object/test-case.css

Reference
---------
HTML 4.01, section 13.7.1
13.7 Visual presentation of images, objects, and applets
13.7.1 Width and height
http://www.w3.org/TR/html4/struct/objects.html#h-13.7.1

"
When the object is an image, it is scaled. User agents should do their best to scale an object or image to match the width and height specified by the author. Note that lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image, object, or applet.
"

-------


CSS 2.1, section 10.2, 
Content width: the 'width' property
http://www.w3.org/TR/CSS21/visudet.html#propdef-width

"
The percentage is calculated with respect to the width of the generated box's containing block.
"

and here the width of the containing block can be computed since the containing block's width does NOT depend on such element's width.


-------


CSS 2.1, section 10.5
Content height: the 'height' property
http://www.w3.org/TR/CSS21/visudet.html#propdef-height

"
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.
"

This is the case here. The height of the containing block (which is <body>) is not specified explicitly, so it can not be computed.

So, rules in section 10.6.2 will and should apply to establish the used height:

Section 10 Calculating heights and margins
2. inline, replaced elements
10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height

"
if 'height' has a computed value of 'auto', and the element has an intrinsic ratio then the used value of 'height' is:

    (used width) / (intrinsic ratio)
"

Relevant chunk of code involved
-------------------------------

<object data="/Icons/w3c_home.png" type="image/png" height="50%" width="50%">

Here, w3c_home.png is (intrinsic dimensions) 72px wide and 48px tall: therefore it has an intrinsic ratio of 3 for width to 2 for height (or 0.66667).

Calculations should therefore be executed in the following manner.

1- Establish available width from containing block.
Here <body> has margin: 10px (in other browsers, it is 8px) and padding: 1em (resolved as 16px).  So, on a 1024x768 scr. res. and assuming the Konqueror application is maximized, this gives 1024 - 10 - 16 - 16 - 10 == 972px . DOMtreeviewer reports correctly such value.

2- Compute the used width of <object>:
50% of 972px == 486px
This is again what DOMtreeviewer correctly reports.
Then substract 6px for border-left (3px) and border-right (3px). The embedded image should therefore be 480px wide.

3- Compute height of <object>: used width multiplied by intrinsic ratio
486px multiplied by 0.66667 == 324px
We do this because the intrinsic ratio of the image is 0.66667
Then substract 6px for border-top (3px) and border-bottom (3px). The embedded image should therefore be 318px tall (more or less 1px or 2px).

Reproducible: Didn't try

Steps to Reproduce:
Testcase
--------
http://www.w3.org/QA/2004/02/object/test-case-003


Actual Results:  
DOMtreeviewer reports that the computed height value of the W3C image is 48px while its computed width value is 486px. (Konqueror is in a 1024px by 768px scr. resolution and is maximized)

Expected Results:  
DOMtreeviewer should be reporting a computed height value of the W3C image of is 323px or 324px when its computed width value is 486px.

Firefox 4.0.1, Opera 11.11, Chrome 11.0.696.71 pass this test. (I will check IE8 and IE9 later)

Konqueror 4.6.3
KDE 4.6.3
Linux (i686) release 2.6.38-9-generic-pae
Qt 4.7.2
here.

regards, Gérard
Comment 1 Maksim Orlovich 2011-06-02 23:29:47 UTC 
Quick question: is this supposed to be the same or different than when using the <img> element?
Comment 2 Gérard Talbot (no longer involved) 2011-06-03 00:22:12 UTC 
Quick answer: Yes.

Additional information:
1- The testcase from W3C uses a XHTML 1.0 strict doctype and Konqueror does not handle CSS as expected in such case

2- In XHTML, body and root element have separate background and this may affect calculations. Safari 5.0.5 and Chrome 11.0.696.71 do not reach expected calculations and this may be because of the XHTML doctype.

3- <object> is an inline-block replaced element; <img> is an inline replaced element. They both should apply, follow the same rules in CSS 2.1 with regards to used width, used height, intrinsic ratio.

4- I know I can create 2 minimized testcases in HTML 4.01 strict which will avoid elegantly all of the above and also the differences in body margins.

5- Maksim, visit this webpage
http://www.gtalbot.org/
, then resize viewport (horizontally and vertically) and then examine the code. 

<h1><img id="CatOnRoofLooking" src="GRAPHICS/PNG/CatOnRoofLooking.png"
  width="100%" alt=""><!-- 976w x 588h --></h1>

The CatOnRoofLooking.png will always fill up the body's available width and the CatOnRoofLooking.png's used height will be rendered according to the image intrinsic ratio (976px width by 588px height giving a 588/976 == 0.602 intrinsic ratio). So, the image will never get distorted or stretched horizontally or vertically: the face of the cat will always look normal-looking for a cat and will not be distorted, not be stretched in an ugly manner.

6- IE8 and IE9 pass the test.

regards, Gérard
Comment 3 Gérard Talbot (no longer involved) 2011-06-03 01:15:16 UTC 
I have now an excellent testcase right here:

http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/object-width-height-percent-intrinsic-ratio.html

That test incorporates the <img src="[path/filename.ext]" width="x%" height="y%" ...> code situations where x and y are integers in the [1..99] range.

Firefox 4.01 and Opera 11.11 pass this test. 

Chrome 11.0.696.71 and Konqueror 4.6.3 fail this test but they fail it for different implementation reasons/causes.

I will check IE8, IE9 and Safari 5.0.5 in a few min.

regards, Gérard
Comment 4 Gérard Talbot (no longer involved) 2011-06-03 02:47:32 UTC 
> Quick question: is this supposed to be the same or different than when using
> the <img> element?

Yes, it is supposed to be the same when using the <img> element. 

The HTML4 attribute specification height="1%" can not be resolved since the height of the vertical space currently available from the body box is not specified explicitly (i.e., it depends on content height) and cannot be determined in advance, therefore it should be undefined; then, while computed CSS height value is 'auto', it should then be eventually resolved by rules in section 10.6.2.

Same thing with inline style="height: 1%;": according to CSS 2.1, section 10.5, it should be computed as 'auto' and then resolved in section 10.6.2.

---------

I have added more code scenarios into the 

http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/object-width-height-percent-intrinsic-ratio.html

meta-testcase. Now with inline style (eg style="width: 10%; height: 1%;" for <img> and <object>). 

IE8, IE9, Firefox 4.0.1, Opera 11.11 pass this meta-test (3 sections of 10 tests each).

Chrome 11.0.696.71 fails 12 tests out of 30 and passes 18 tests out of 30.

Konqueror 4.6.3 fails 12 tests out of 30 and passes 18 tests out of 30.

regards, Gérard
Comment 5 Gérard Talbot (no longer involved) 2011-06-03 04:28:09 UTC 
I went over all of the testcases in section 10.6.2 of the CSS 2.1 test suite (RC6)
http://test.csswg.org/suites/css2.1/20110323/html4/chapter-10.html#s10.6.2
and only the SVG test
http://test.csswg.org/suites/css2.1/20110323/html4/replaced-intrinsic-004.htm
is failed by Konqueror 4.6.3. The others are all passed (c43-rpl-bbx-002 and c43-rpl-ibx-000 have validation issues). So, the coverage of section 10.6.2 of the spec is not correct, not flawless.

I will submit a few testcases to correct this.

regards, Gérard
Comment 6 Gérard Talbot (no longer involved) 2011-06-03 05:48:28 UTC 
> Quick question: is this supposed to be the same or different than when using
> the <img> element?

Section 10.6.2 covers mostly replaced elements: it covers
a) inline replaced elements (typically, an <img>), 
b) block-level replaced elements in normal flow: (typically, an <object> or an <iframe> styled to be displayed as a block box),
c) 'inline-block' replaced elements in normal flow (typically, an <object>) and 
d) floating replaced elements (a floated <img>).

So, the meta-testcase could easily get 30 more sub-tests.

Gérard
Comment 9 Gérard Talbot (no longer involved) 2012-01-14 08:12:14 UTC 
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/floating-replaced-height-008.htm

http://test.csswg.org/suites/css2.1/nightly-unstable/html4/inline-block-replaced-height-008.htm

http://test.csswg.org/suites/css2.1/nightly-unstable/html4/inline-replaced-height-008.htm

Konqueror 4.7.4 fails 6 tests out of those 15 tests.

CONFIRMING

Firefox 9.0.1, Opera 11.60 and Chrome 16.0.912.75 pass all those 15 tests.