[css-view-transitions-1] What is the transform relative to for ::view-transition-group #8599
Description
This came up when we were discussing #8278. The UA sets a transform on ::view-transition-group to position where the underlying DOM element is. The spec text for it is here.
This transform is relative to the top-left corner of the snapshot root. This works because ::view-transition-groups's containing block is ::view-transition and ::view-transition covers the complete snapshot root based on the resolution we had at #8278.
In terms of why top-left and what that means for LTR content:
- I was initially confusing this question with the one on [css-view-transitions-1] UA CSS should add transform-origin to view-transition-group #8370 which was about whether the transform is relative to the pseudo-element's top left corner or center. That would affect a rotation for example. Since the default value for
transform-originis center of the box, it implicitly has to be relative to that. - The other question is whether
translateX(10px)moves the element to the left by 10px or to the right, and whether it is dependent onwriting-mode. It looks liketransformis independent ofwriting-mode.translateX(10px)will always move to to the right. Here is an example:<!DOCTYPE html> <html> <head> <style> html { writing-mode: vertical-rl; } .foo { width: 100px; height: 200px; background: blue; transform: translate(50px); } </style> </head> <body> <div class="foo"></div> </body> </html>