Wrong dimensions returned by getBoundingClientRect() on "object" element after adding child elements via javascript

[filipe-norte-red]

When calling "getBoundingClientRect()" on an "object" element after adding a child element (e.g. "div"), the width and height returned are wrong, but are correct before adding the child element.

The attached test.zip reproduces this issue where we can see the dimensions in the console output.

[Log] Before: (test.html, line 14)
[Log] DOMRect {x: 8, y: 163, width: 640, height: 480, top: 163, …} (test.html, line 15)
[Log] After: (test.html, line 19)
[Log] DOMRect {x: 8, y: 163, width: 1904, height: 0, top: 163, …} (test.html, line 20)

If we change the test to add the child element to a "div" element instead of "object" element, the function returns correct values. To test this, change line 11 from

var videoBC = document.getElementById('videoBc');

to

var videoBC = document.getElementById('videoBc2');

Modifying the test to include width and height dimensions for the added child element gives the same result. However, including the style attribute, seems to affect the height returned:

var videoBC = document.getElementById('videoBc');
var elem = document.createElement("div");
elem.setAttribute("width", 200);
elem.setAttribute("height", 100);
elem.setAttribute("style", "width: 200px; height: 100px;");

[Log] Before: (test.html, line 17)
[Log] DOMRect {x: 8, y: 163, width: 640, height: 480, top: 163, …} (test.html, line 18)
[Log] After: (test.html, line 22)
[Log] DOMRect {x: 8, y: 163, width: 1904, height: 100, top: 163, …} (test.html, line 23)

While results are still not correct, it does suggest the child style dimensions affect the end result, even if smaller than the parent container.

Note: This was tested only on 2.38 so far.

[pgorszkowski-igalia]

The same results are on latest main. The same results I have also with Chrome.

I am investigating the problem.

[pgorszkowski-igalia]

By default "object" element has CSS property display set to inline. If you change it to block the results will be as you expect. @filipe-norte-red: Please let me know does it work for you.

[filipe-norte-red]

Thanks, @pgorszkowski-igalia , for the quick support on this issue.

The attached sample test is a trimmed down version of a test from a certification test suite (which also does not set a display value for the object element). We cannot change the test ourselves, but may be able to reach out to the test implementers with some references to specs so tests can be fixed.

From some research, some non-spec reference (https://www.w3schools.com/html/html_blocks.asp) lists "object" as an "inline element" and "div" as a "block element" and another non-spec reference (http://web.simmons.edu/~grovesd/comm328/modules/layout/block-inline) indicates that width and height are ignored for inline elements, which justifies the behavior and your findings.

However, I could not cross-reference this with concrete spec that I could use. Do you know where specifically in the spec this can be found?

Thanks

[pgorszkowski-igalia]

@filipe-norte-red : I was trying to find it too, but could not find direct information about it, only that default display is inline: https://www.w3.org/TR/css-display-3/#the-display-properties

[pgorszkowski-igalia]

@filipe-norte-red : what "certification test suite" do you use? http://itv.mit-xperts.com/hbbtvtest/? or some other for hbbtv?

[filipe-norte-red]

@pgorszkowski-igalia , it is a different test suite from HbbTV. It is accessible via their SVN repo (https://www.hbbtv.org/resource-library/#testing-information-and-support).

[filipe-norte-red]

@pgorszkowski-igalia , we are able to move forward with a fix outside webkit based on your findings. I'm therefore closing this ticket. Thanks for the help!