Re: [CSSOM] Interaction of getBoundingClientRect/getClientRects with transforms

On 8/31/10 11:56 AM, Brad Kemper wrote:
>
> On Aug 31, 2010, at 8:52 AM, Brad Kemper wrote:
>
>>
>> On Aug 31, 2010, at 8:44 AM, Simon Fraser wrote:
>>
>>>> For what it's worth, Gecko's behavior here is to determine a separate transform-origin for each box that's generated and then apply the transform to each box separately.  This means that something like:
>>>>
>>>> <span style="-moz-transform: rotate(45deg);">x<br>x</span>
>>>>
>>>> gets rendered with the two boxes offset from each other vertically by the line height and not offset horizontally and each rotated by 45 degrees clockwise.
>>>
>>> That's probably what we'd want to do in WebKit. It's a bit odd, especially with rotations, but I think it makes more sense than transforming  all the boxes together (even though that would be easier for us to implement).
>>
>> It seems unexpected to me. I expect it to act more like position:relative. Can you explain why it makes more sense, and what use case would benefit by doing the child inlines separately?
>
> Or, child lineboxes, I guess. I'm a little confused.

Fwiw, in Gecko the behavior is odder than you would think due to the 
fact that what Gecko transforms is boxes, and the behavior of inline 
boxes can get pretty weird.  For example:

<!DOCTYPE HTML>
<html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <style>
       .r {
         -moz-transform: rotate(45deg);
         -moz-transform-origin: bottom left;
         -webkit-transform: rotate(45deg);
         -webkit-transform-origin: bottom left;
         -o-transform: rotate(45deg);
         -o-transform-origin: bottom left;
         background: yellow;
       }
     </style>
   </head>
   <body>
     <span class="r">Some עִבְרִית text</span>
   </body>
</html>

will render with three boxes, each rotated separately, because we create 
separate boxes for different-direction parts of the inline.

Note that you really do need the multiple boxes; this tescase shows why:

<!DOCTYPE HTML>
<html>
   <head>
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   </head>
   <body>
     <span style="background: yellow">
       <span style="background: orange">Some עִבְרִית</span> 2
     </span>
   </body>
</html>

(in this case, the box for "2" comes between the two different-direction 
boxes for the inner inline; this is pretty interoperably implemented in 
Gecko/Webkit/Presto as far as I can tell; I'm pretty sure Trident 
handles it right too).

For what it's worth, I just tested and Opera does the same thing as 
Gecko, both in terms of creating separate boxes in the bidi cases above 
and in terms of what it does with transforms on multi-box inlines.

-Boris

Received on Tuesday, 31 August 2010 16:12:55 UTC