New issue
Advanced search Search tips

Issue 898852 link

Starred by 1 user

Issue metadata

Status: Available
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: ----
Pri: 3
Type: Task



Sign in to add a comment

Add WPT tests for will-change side effect of animations

Project Member Reported by smcgruer@chromium.org, Oct 25

Issue description

This came up during  issue 764783 . We should create + upstream WPT tests that ensure that the following section from web-animations is obeyed during an animation (and afterwards, if fill mode is forwards/both, etc):

"""
For every property targeted by at least one animation effect that is current or in effect, the user agent must act as if the will-change property ([css-will-change-1]) on the target element includes the property.
"""

As a reminder, will-change specifies:

"""
If any non-initial value of a property would create a stacking context on the element, specifying that property in will-change must create a stacking context on the element.

If any non-initial value of a property would cause the element to generate a containing block for absolutely positioned elements, specifying that property in will-change must cause the element to generate a containing block for absolutely positioned elements.

If any non-initial value of a property would cause the element to generate a containing block for fixed positioned elements, specifying that property in will-change must cause the element to generate a containing block for fixed positioned elements.

If any non-initial value of a property would cause rendering differences on the element (such as using a different anti-aliasing strategy for text), the user agent should use that alternate rendering when the property is specified in will-change, to avoid sudden rendering differences when the property is eventually changed.
"""

I believe this includes (but is not necessarily limited to):

stacking context (https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context):
  * position
  * z-index (if child of flex container)
  * opacity
  * mix-blend-mode
  * transform, filter, perspective, clip-path, mask/mask-image/mask-border
  * isolation
  * -webkit-overflow-scrolling
  * contain

containing block (absolute):
  * position
  * transform
  * perspective
  * filter

containing block (fixed):
  * transform
  * perspective
  * filter

I'm ignoring the 'rendering differences' case for now.
 

Sign in to add a comment