[cssom-view][css-break] getBoundingClientRect and getClientRects on fragmentation

Hi,

Based on a discussion about the effect of fragmentation on clipping paths, I wrote a simple test.

http://jsfiddle.net/6LkvZ/

The point of the test is to check the behavior of fragmentation on the bounding client rect[1] of the fragmented element. When you run the test, there will be two numbers on the bottom of the preview window. Together these numbers represent the width and height of the bounding client rect of the element with the yellow background.

These are the results in different browsers:

Firefox: width: 333.600 height: 139.666
Chrome: width: 87.187 height: 220
Safari: width: 87 height: 220
Internet Explorer: width: 456.799 height: 140

Note: The dimensions depend on the used font. That is why you see some differences between Firefox and Internet Explorer.

In general it seems save to assume that Internet Explorer and Firefox create a containing rect of all fragments on the screen.
Safari and Chrome return a dimension as if the element was not fragmented.

I couldn’t find a hint in CSS Fragmentation or CSSOM View if the bounding client rect should be the result after the fragmentation and getting the smallest rect where all fragments fit into. Or, if the rect should be the value before fragmentation happens.

Note: I just checked with multi-column layout. CSS Regions can have fragments of different width. I didn’t check the result on this yet.

Greetings,
Dirk

[1] http://dev.w3.org/csswg/cssom-view/#dom-element-getclientrects

Received on Monday, 30 December 2013 16:37:39 UTC