Intent to implement: individaul transform

[Ku(顧思捷)CJ]

Summary:
The translate, rotate, and scale properties allow authors to specify
simple transforms independently, in a way that maps to typical user
interface usage, rather than having to remember the order in transform that
keeps the actions of transform(), rotate() and scale() independent and
acting in screen coordinates.
Both Blink and Edge have implemented this feature.

Bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1207734

Link to standard:
https://drafts.csswg.org/css-transforms-2/#individual-transforms

Platform coverage:
All platforms

Target release:
FF60

Preference behind which this will be implemented:
"layout.css.individual-transform.enabled"

Do other browser engines implement this?
Blink/ Edge

Tests:
WPT test

[Patrick Brosset]

(cc'ing the dev-developer-tools list, please keep responses to dev-platform)

Very happy to see this being implemented.
I would like to point out that this does have some DevTools impact that we
might want to align with the target release for this.

There's a (sort of hidden) feature in DevTools where, if you position your
cursor over a `transform` property name inside the CSS Rules panel of the
inspector, then an overlay appears in the page. This overlay shows you 2
things: where the element selected in the inspector currently is on the
page, and where it would have been if that `transform` property had not
been there. It gives a sense of how CSS transform works.
This MDN page describes that feature:
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Visualize_transforms

If we also want to support the new properties being introduced here, that
will require some work in DevTools, and I'm not sure how the feature would
even work. I think it would be a good opportunity for us to revise the UX
of the feature and possibly come up with an even better transform tool.

Note that none of this is a blocker, people using `transform` will still
benefit from this feature. The new properties will just act as normal
properties in the Rules panel, and hovering over them will just do nothing.

> _______________________________________________
> dev-platform mailing list
> dev-pl...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-platform
>

[Tom Ritter]

There have been a series of attacks[0] that allow SOP bypasses by
applying non-constant-time transforms to cross-domain resources and
using timing attacks to infer the contents.

I'm not sure to what extent we have been tracking our exposure to
these attacks over the years, but it's something I'm hoping to start
understanding. Do we know how these transforms behave in this regard?

-tom

[0] This is a really incomplete list of these but it's a start:
https://bugzilla.mozilla.org/show_bug.cgi?id=655987
https://dl.acm.org/citation.cfm?id=2516712&dl=ACM&coll=DL&CFID=1016908573&CFTOKEN=45471182
https://www.contextis.com/media/downloads/Pixel_Perfect_Timing_Attacks_with_HTML5_Whitepaper.pdf

[Emilio Cobos Álvarez]

On 12/15/2017 08:51 AM, Ku(顧思捷)CJ wrote:
> Summary:
> The translate, rotate, and scale properties allow authors to specify
> simple transforms independently, in a way that maps to typical user
> interface usage, rather than having to remember the order in transform that
> keeps the actions of transform(), rotate() and scale() independent and
> acting in screen coordinates.
> Both Blink and Edge have implemented this feature.
>
> Bug:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1207734
>
> Link to standard:
> https://drafts.csswg.org/css-transforms-2/#individual-transforms
>
> Platform coverage:
> All platforms
>
> Target release:
> FF60
>
> Preference behind which this will be implemented:
> "layout.css.individual-transform.enabled"
>
> Do other browser engines implement this?
> Blink/ Edge

Just curious, has Edge shipped this? Blink still hasn't. Not that it
makes much of a difference, but I guess it's worth noting.

[Ku(顧思捷)CJ]

Behind a preference(about:flags - enable individual transforms)

On Sat, Dec 16, 2017 at 12:10 AM, Emilio Cobos Álvarez <emi...@crisal.io>
wrote: