New issue
Advanced search Search tips

Issue 696374 link

Starred by 4 users
Status: Available
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 3
Type: Feature

Blocked on:
issue 848006


Sign in to add a comment

CSS Animation: Composite animations of individual transform properties

Project Member Reported by ericwilligers@chromium.org, Feb 27 2017 
Authors should be able to concurrently animate the translate, rotate, and scale CSS properties of an element, with each animation having its own timing, and these animations should all run on the compositor, not the main thread.

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

Currently, Blink will only use the compositor if exactly one of these properties is set on the element. Also, Blink will currently not use the compositor if the transform property is also set on the element.
Project Member

Comment 1 by bugdroid1@chromium.org, Aug 11 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786

commit 2370c0b2071b46d42c0c9d60ee88b76aa7cbd786
Author: Eric Willigers <ericwilligers@chromium.org>
Date: Fri Aug 11 04:29:18 2017

CSS Animation of translate is responsive

When units or zoom during an animation of the 'translate'
property, the composited animation needs to update,
just as for the animation of 'transform'.

rotate and scale animations don't have distance units,
and are not affected in the same way by unit or zoom changes.

BUG=696374

Change-Id: I031ff17ad1141983d09f7fef94f76840a2daf832
Reviewed-on: https://chromium-review.googlesource.com/611680
Reviewed-by: Darren Shen <shend@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#493665}
[rename] https://crrev.com/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786/third_party/WebKit/LayoutTests/animations/responsive/viewport-unit-transform-responsive-expected.html
[rename] https://crrev.com/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786/third_party/WebKit/LayoutTests/animations/responsive/viewport-unit-transform-responsive.html
[add] https://crrev.com/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786/third_party/WebKit/LayoutTests/animations/responsive/viewport-unit-translate-responsive-expected.html
[add] https://crrev.com/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786/third_party/WebKit/LayoutTests/animations/responsive/viewport-unit-translate-responsive.html
[add] https://crrev.com/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786/third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-translate-animation-expected.html
[add] https://crrev.com/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786/third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-translate-animation.html
[modify] https://crrev.com/2370c0b2071b46d42c0c9d60ee88b76aa7cbd786/third_party/WebKit/Source/core/animation/css/CSSAnimations.cpp
Project Member

Comment 2 by bugdroid1@chromium.org, Aug 16 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b9e0b514bfbb16764684e1236b3bd289e6a73fa5

commit b9e0b514bfbb16764684e1236b3bd289e6a73fa5
Author: ericwilligers <ericwilligers@chromium.org>
Date: Wed Aug 16 05:27:44 2017

CSS individual transform properties: will-change

The individual transform properties translate/scale/rotate
should behave similarly to transform with regards to
compositing and will-change hints.

Each of the properties creates a stacking context and
containing block, per usual for transforms.
https://drafts.csswg.org/css-transforms-2/#individual-transforms

BUG=696374

Change-Id: Ia2b68f11142700f470ffa27f24895d402e90043d
Reviewed-on: https://chromium-review.googlesource.com/614922
Reviewed-by: Darren Shen <shend@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#494700}
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/composited-float-under-composited-inline-individual-expected.html
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/composited-float-under-composited-inline-individual-expected.txt
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/composited-float-under-composited-inline-individual.html
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/containing-block-added-individual-expected.png
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/containing-block-added-individual-expected.txt
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/containing-block-added-individual.html
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/containing-block-removed-individual-expected.png
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/containing-block-removed-individual-expected.txt
[add] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/LayoutTests/paint/invalidation/compositing/containing-block-removed-individual.html
[modify] https://crrev.com/b9e0b514bfbb16764684e1236b3bd289e6a73fa5/third_party/WebKit/Source/core/style/ComputedStyle.cpp
Project Member

Comment 3 by bugdroid1@chromium.org, Aug 17 2017 

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/72818ed6711498ddaf5d2eb2e16158b176bfa31e

commit 72818ed6711498ddaf5d2eb2e16158b176bfa31e
Author: Eric Willigers <ericwilligers@chromium.org>
Date: Thu Aug 17 05:36:17 2017

CSS Individual transform properties can be inline

Just as ComputedStyle's HasTransform takes the indivual
transform properties into account, HasInlineTransform now
also allows for these properties.

The layer-compositing-reasons.html test demonstrates that
they are composited for the same reasons as transform.

BUG=696374

Change-Id: I1a0ccf815015f7c80e21062ea3930e664ec36223
Reviewed-on: https://chromium-review.googlesource.com/612960
Reviewed-by: Majid Valipour <majidvp@chromium.org>
Reviewed-by: Kent Tamura <tkent@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#495084}
[modify] https://crrev.com/72818ed6711498ddaf5d2eb2e16158b176bfa31e/third_party/WebKit/LayoutTests/inspector/layers/layer-compositing-reasons-expected.txt
[modify] https://crrev.com/72818ed6711498ddaf5d2eb2e16158b176bfa31e/third_party/WebKit/LayoutTests/inspector/layers/layer-compositing-reasons.html
[modify] https://crrev.com/72818ed6711498ddaf5d2eb2e16158b176bfa31e/third_party/WebKit/Source/core/dom/Element.cpp

Comment 4 by ericwilligers@chromium.org, Oct 18 2017

Owner: ----
Status: Available (was: Started)

Comment 5 by kbr@chromium.org, Jun 2 2018

Blockedon: 848006
►

Sign in to add a comment