# CSSWG Compatible Tests #
## Hints ##
* en/disable vendor-prefixing in `./support/helper.js` see `addVendorPrefixes`
* remove extra `<length>` values to reduce test cases (and thus execution duration) in `./support.properties.js`, see `values.length`
## General Properties Test Concept ##
Using `support/property.js` test suites compile a list of animatable properties. `getPropertyTests()` (and the like) will expand the specification's `width: length, percentage` to `width: 1em, 1ex, 1px, … 1%` in order to test all possible value types. The propertyTests returned by `support/property.js` have the following general structure:
```javascript
{
// name of the test
"name": "background-color color(rgba)",
// property that is being tested
"property": "background-color",
// styles to set on the parent container (usually #container)
"parentStyle": {},
// initial styles to set on the transition element (usually #transition)
// may contain additional properties such as position: absolute; as required
"from": {
"background-color": "rgba(100,100,100,1)"
},
// styles to transition to
"to": {
"background-color": "rgba(10,10,10,0.4)"
},
// flags classifying property types,
// currently only {discrete:true} for visbility
"flags": {}
}
```
For each compiled test case the test runner identifies computed initial and target values. If they match, no transition will take place, because the property couldn't be parsed. If after starting the transition the computed style matches the target value, the browser applied that value immediately and no transition will take place. During the transition the computed style may match neither initial nor target value (unless it's a discrete transition), or there was no transition.
Besides value-assertions, the suites compare received TransitionEnd events. While the values are only matched against computed initial and target values, expected TransitionEnd events are declared explicitly. This can (and will) lead to some test failures that are arguably not a failure (mainly because the specification didn't cover the specific case). Transitioning `color` *may* (or not, depending on browser) also run a transition for `background-color`, as the latter's default value is `currentColor`. This suite considers those implicit transitions a failure. If it truly is a failure or not, should be decided in the specification (and tests updated accordingly).
Browsers supporting requestAnimationFrame can run a test in 100ms. Browsers that don't need a wider time frame to allow the not very dead-on-target setTimeout() to be triggered between TransitionStart and TransitionEnd. Low-end CPU devices also benefit from slower transitions. Since a 300 hundred tests, each lasting 500ms would require 2.5 minutes to run, tests are run concurrently, as they cannot affect each other. For low-end devices (e.g. iPad) too many parallel tests lead to global failure, because a single `requestAnimationFrame()` would have to iterate too many nodes, which is why the suite shards into slices of 50 parallel tests. Tests are run in an off-viewport container, to prevent you from having seizures.
To make individual tests a bit more readable, a lot of the test-functionality has been moved to external JavaScript files. All assertions reside within the test file itsel, though. Although they are mostly exact duplicates of other tests, it should help understanding what a test does (while abstracting away *how* it does it.)
### Debugging ###
1. reduce to the tests you want to take a closer look at - see `filterPropertyTests()` in `support/properties.js`
2. disable final cleanup by commenting out `done` and `teardown` callbacks
3. possibly increase the `duration` and disable the `#offscreen` (by simply naming it `#off-screen`)
## Tips to avoid test flakes ##
### Making style update deterministic ####
Timing characteristics vary widely across testing environments, and we need to
be careful about making assumptions about the state of the testing environment
to avoid race conditions.
Here is an example of a test with a race condition.
```css
# target {
color: green;
transition: color 300ms;
transition-delay: -150ms;
}
```
```javascript
test(() => {
target.style.color = 'pink';
assert_equals(getComputedStyle(target).color, ...);
}, ...);
```
The value of color will differ depending on whether the color "change" was
captured as part of the initial style update. We cannot assume style and
layout are clean at the start of a test.
One way to fix this with the benefit of testing that a transition started is
as follows:
```javascript
test(() => {
assert_equals(document.getAnimations().length, 0,
'Initially no running animations');
target.style.color = 'pink';
assert_equals(document.getAnimations().length, 1,
'Color change triggers a CSS transition');
assert_equals(getComputedStyle(target).color, ...);
}, ...);
````
### Reftests and paint holding ###
To avoid the flash of white when a navigating between pages, browsers may
elect to freeze the contents until ready to render the page. All animations,
CSS transitions included, have a ready promise that is resolved when the
user agent has completed any set up and is ready to rendering the animation.
Rather than simply creating the transition and calling takeScreenshot, a safer
approach is as follows:
```javascript
window.onload = async () => {
... test setup including starting any transitions ...
const promises = document.getAnimations().map(anim => anim.ready);
await Promise.all(promises);
requestAnimationFrame(takeScreenshot);
};
```
### Reftests and avoiding animation drift ###
The animation API is largely asynchronous and an extra animation frame can
easily cause misalignment of a reftest with its reference image. One
approach to address the issue is to use a long duration animation with a
negative transition delay to set the position. If using this approach, we can
further reduce the potential for animation drift by using a step easing function
or freeze at the midpoint by using cubic-bezier(0, 1, 1, 0) combined with a
negative transition delay with a magnitude equal to half the duration. Unless
critical for the test to be performed on running transitions, a safe alternative
is to pause the transitions.
```javascript
document.getAnimations().forEach(anim => anim.pause());
```
## Tips to reduce test runtime ##
When testing for transitionend, it is not necessary to let the animation run its
course. It may be tempting just to use a short duration animation, but safer is
to accelerate the animation via the web-animations API. This gives us precise
control over the test conditions.
```javascript
function fastForward(anim, progress) {
anim.currentTime = anim.effect.getTiming().duration * progress;
}
```
If simply wanting to jump to the end of the transition, then calling
anim.finish() does the trick. This fast forwarding trick is also really
useful for sampling a transition curve (testing whether a transition is
discrete or continuous for example).
## Unspecified Behavior ##
the following suites test behavior that is not covered in CSS3 Transitions (as of today):
* `properties-value-002.html` - verify value types transitionable but not specified for properties
* `properties-value-003.html` - verify transitionable properties thus far not specified at all
* `properties-value-implicit-001.html` - verify behavior for `em` based `<length>` properties when `font-size` is changed
* `events-006.html` - expect `TransitionEnd` event to be triggered and `event.pseudoElement` to be set properly
* `before-load-001.html` - expect transitions to be performed before document is fully loaded
* `hidden-container-001.html` - expect transitions to NOT be performed if they happen within hidden elements
* `detached-container-001.html` - expect transitions to NOT be performed if they happen outside of the document
## Yet To Be Tested ##
These are topics I have identifed in need of testing, but haven gotten around to testing them.
* Anything involving `<svg>`
* well, maybe some day...
* proper execution of timing-functions - are the right property values set at a given time?
* how exactly do I pinpoint a specific time to verify a property's value at time `t`?
* need to implement cubic-bezier to actually calculate a property's value at time `t`?
* `selector:hover:before {}`
* I have no clue how to trigger that from script
Name Last modified Size Description
![[PARENTDIR]](/icons/back.gif)
Parent Directory -
![[DIR]](/icons/folder.gif)
animations/ 2024-02-06 06:01 -
crashtests/ 2024-03-28 06:00 -
parsing/ 2024-09-17 06:02 -
reference/ 2022-11-12 16:49 -
render-blocking/ 2022-11-12 16:49 -
support/ 2024-11-14 06:02 -
![[TXT]](/icons/text.gif)
AnimationEffect-getComputedTiming.tentative.html 2022-12-23 06:01 10K AnimationEffect.getComputedTiming() for CSS transitions
CSSTransition-canceling.tentative.html 2022-11-12 16:47 8.4K Canceling a CSS transition
CSSTransition-currentTime.tentative.html 2022-11-12 16:48 4.5K CSSTransition.currentTime
CSSTransition-effect.tentative.html 2024-04-19 06:03 7.2K CSSTransition.effect
CSSTransition-finished.tentative.html 2022-11-12 16:49 1.0K CSSTransition.finished
CSSTransition-not-canceling.tentative.html 2024-07-12 06:02 1.6K Not canceling a CSS transition
CSSTransition-ready.tentative.html 2022-11-12 16:49 2.4K CSSTransition.ready
CSSTransition-startTime.tentative.html 2022-11-12 16:49 3.6K CSSTransition.startTime
CSSTransition-transitionProperty.tentative.html 2022-11-12 16:49 812 CSSTransition.transitionProperty
Document-getAnimations.tentative.html 2022-11-12 16:50 6.0K Document.getAnimations() for CSS transitions
Element-getAnimations.tentative.html 2022-11-12 16:48 4.0K Element.getAnimations() for CSS transitions
KeyframeEffect-getKeyframes-width-and-height-transition.tentative.html 2022-11-12 16:48 1.3K AnimationEffect.getKeyframes() for CSS transitions of the width and height properties
KeyframeEffect-getKeyframes.tentative.html 2024-09-17 06:02 4.9K KeyframeEffect.getKeyframes() for CSS transitions
KeyframeEffect-setKeyframes.tentative.html 2022-11-12 16:47 6.2K KeyframeEffect.setKeyframes() for CSS transitions
KeyframeEffect-target.tentative.html 2022-11-12 16:47 2.8K CSSTransition.effect.target
![[ ]](/icons/unknown.gif)
META.yml 2022-11-12 16:48 80
WEB_FEATURES.yml 2024-08-10 06:02 129
after-change-style-inherited-try-fallback.html 2025-01-29 06:02 1.9K CSS Transitions Test: trigger transitions on inherited after-change styles for anchored element using fallback
after-change-style-inherited.html 2025-01-28 06:02 6.2K CSS Transitions Test: trigger transitions on inherited after-change styles
allow-discrete-auto-inset.html 2024-12-11 06:01 714 CSS Transitions Test: discrete transition for auto inset
before-load-001.html 2022-11-12 16:48 1.4K CSS Transitions Test: Transitioning before load event
changing-while-transition-001.html 2022-11-12 16:49 1.7K CSS Transitions Test: behavior when transition-duration changes while transitioning
changing-while-transition-002.html 2022-11-12 16:49 1.8K CSS Transitions Test: behavior when transition-timing-function changes while transitioning
changing-while-transition-003.html 2022-11-12 16:49 1.7K CSS Transitions Test: behavior when transition-delay changes while transitioning
changing-while-transition-004.html 2022-11-12 16:49 1.7K CSS Transitions Test: behavior when transition changes to default while transitioning
currentcolor-animation-001.html 2022-11-12 16:48 1.7K CSS Transitions of currentcolor
custom-property-and-allow-discrete.html 2024-09-17 06:02 2.1K CSS Transitions Test: transition of a custom property with "transition-behavior: allows-discrete"
disconnected-element-001.html 2022-11-12 16:48 5.5K CSS Transitions Test: Transitions do not run for a disconnected element
display-none-no-animations.html 2023-03-30 06:01 703
dynamic-root-element.html 2023-03-10 06:01 1.2K
event-dispatch.tentative.html 2024-11-16 06:02 16K CSS transition event dispatch
events-001.html 2022-11-12 16:47 5.7K CSS Transitions Test: transitionend event for shorthand property
events-002.html 2022-11-12 16:47 1.8K CSS Transitions Test: transitionend event for implied property value
events-003.html 2022-11-12 16:48 1.3K CSS Transitions Test: transitionend event with negative delay
events-004.html 2022-11-12 16:49 2.1K CSS Transitions Test: transitionend event with non matching lists
events-005.html 2022-11-12 16:49 2.1K CSS Transitions Test: transitionend event with property specificity
events-006.html 2022-11-12 16:49 1.9K CSS Transitions Test: transitionend event for pseudo elements
events-007.html 2022-11-12 16:49 2.0K CSS Transitions Test: no transitionend event after display:none
historical.html 2022-11-12 16:49 579 Historical CSS Transition features must be removed
idlharness-2.html 2023-07-13 06:01 763 css-transitions-2 IDL tests
idlharness.html 2022-11-12 16:50 709 css-transitions IDL tests
inert-while-transitioning-to-display-none.html 2023-03-30 06:01 891
infinite-duration-crash.html 2023-05-09 06:01 523
inherit-background-color-transition-ref.html 2022-11-12 16:48 145
inherit-background-color-transition.html 2022-11-12 16:48 1.3K Verifies that 'background-color' from a transition inherits explicitly down if requested
inherit-height-transition.html 2022-11-12 16:47 807
inheritance.html 2022-11-12 16:47 872 Inheritance of CSS Transitions properties
non-rendered-element-001.html 2022-11-12 16:47 3.4K CSS Transitions Test: Transitions do not run for an element that is not being rendered
non-rendered-element-002.html 2022-11-12 16:48 1.5K CSS Transitions Test: Transitions do not run for a pseudo-element that is not being rendered
non-rendered-element-004.tentative.html 2022-11-12 16:49 1.4K CSS Transitions Test: Transitions do not run for a ::marker-element that is not being rendered
properties-value-001.html 2024-11-06 06:02 6.4K CSS Transitions Test: Intermediate Property Values
properties-value-002.html 2024-11-06 06:02 6.5K CSS Transitions Test: Intermediate Property Values of missing value types
properties-value-003.html 2024-11-06 06:02 6.7K CSS Transitions Test: Intermediate Property Values of unspecified properties
properties-value-implicit-001.html 2024-11-06 06:02 7.0K CSS Transitions Test: font-size-relative properties transition by implicit value change
properties-value-inherit-001.html 2024-11-06 06:02 7.3K CSS Transitions Test: transitioning inherited property values
properties-value-inherit-002.html 2024-11-06 06:02 7.4K CSS Transitions Test: transitioning inherited property values
properties-value-inherit-003.html 2024-11-06 06:02 7.2K CSS Transitions Test: transitioning implicitly inherited property values
pseudo-element-transform-ref.html 2024-07-12 06:02 437 Reference for transition on pseudo-element
pseudo-element-transform.html 2024-07-12 06:02 1.4K Transition on pseudo-element
pseudo-elements-001.html 2024-11-06 06:02 7.0K CSS Transitions Test: Transitioning Pseudo Elements
pseudo-elements-002.html 2022-11-12 16:49 1.0K CSS Transitions Test: Transition pseudo element with ancestor display change
retargetted-transition-with-box-sizing.html 2024-11-06 06:02 1.3K
root-color-transition-ref.html 2022-11-12 16:48 76
root-color-transition.html 2022-11-12 16:48 1.1K Verifies that 'color' stays the color it's transitioned to on :root
shadow-root-insertion.html 2024-05-03 06:02 1.2K CSS Transitions: behavior when a shadow root is inserted while transitioning
starting-of-transitions-001.html 2022-11-12 16:47 1.4K CSS Transitions Test: behavior when transition-property changes while transitioning
starting-style-adjustment.html 2024-04-11 06:02 800 CSS Transitions Test: Style adjustments for @starting-style
starting-style-cascade.html 2024-06-15 06:04 4.2K CSS Transitions Test: Cascading @starting-style
starting-style-name-defining-rules.html 2023-06-29 06:01 1.6K CSS Transitions Test: Name defining @-rules in @starting-style
starting-style-rule-basic.html 2023-06-29 06:01 2.3K CSS Transitions Test: Basic tests for @starting-style
starting-style-rule-none.html 2024-02-16 06:01 1.1K CSS Transitions Test: No transition if @starting-style display value is none
starting-style-rule-pseudo-elements.html 2023-06-29 06:01 2.4K CSS Transitions Test: @starting-style for pseudo elements
starting-style-size-container.html 2024-07-12 06:02 2.7K CSS Transitions Test: @starting-style inside size @container
transition-001.html 2023-03-07 06:01 3.6K CSS Transitions Test: Parsing transition shorthand
transition-after-animation-001.html 2022-11-12 16:49 1.2K Starting transition after animation has ended
transition-background-position-with-edge-offset.html 2022-11-12 16:49 1.6K CSS Transitions Test: transition-property - background-position
transition-base-response-001.html 2022-11-12 16:49 1.8K Test that non-transitioned style is responsive to transitioning properties
transition-base-response-002.html 2023-03-03 06:00 808 Test that rem units are responsive to transitioning font-size on root
transition-base-response-003.html 2022-11-12 16:50 832 Tests that identical elements in the base style responds to font-size transition
transition-behavior-events.html 2025-02-04 06:02 1.6K CSS transition event dispatch depending on transition-behavior
transition-behavior.html 2024-12-11 06:01 4.3K
transition-delay-000-manual.html 2022-11-12 16:48 1.2K CSS Transition Test: transition-delay - positive number
transition-delay-001.html 2022-11-12 16:48 2.9K CSS Transitions Test: Parsing transition-delay
transition-delay-002-manual.html 2022-11-12 16:47 1.5K CSS Transition Test: transition-delay - 0s
transition-delay-003-manual.html 2022-11-12 16:47 1.5K CSS Transition Test: transition-delay - negative number
transition-duration-001.html 2022-11-12 16:47 3.0K CSS Transitions Test: Parsing transition-duration
transition-duration-002-manual.html 2022-11-12 16:48 1.3K CSS Transitions Test: transition-duration - positive number
transition-duration-003-manual.html 2022-11-12 16:49 1.6K CSS Transitions Test: transition-duration - 0s(initial value)
transition-duration-004-manual.html 2022-11-12 16:49 1.4K CSS Transitions Test: transition-duration - negative number
transition-duration-shorthand.html 2022-11-12 16:49 1.5K transition-duration when looking at shorthand properties should be correct
transition-events-with-document-change.html 2023-11-21 06:01 1.5K CSS Transitions: transition events for an element changing document
transition-important.html 2023-03-07 06:01 776 CSS Transitions Test: !important property
transition-property-001.html 2022-11-12 16:49 1.7K CSS Transitions Test: Parsing transition-property
transition-property-002.html 2022-11-12 16:49 2.1K CSS Transitions Test: Parsing invalid transition-property
transition-property-003-manual.html 2022-11-12 16:50 1.3K CSS Transitions Test: transition-property - none
transition-property-004-manual.html 2022-11-12 16:48 1.0K CSS Transitions Test: transition-property - all
transition-property-005-manual.html 2022-11-12 16:48 1.2K CSS Transitions Test: transition-property - height width(more than one properties specified)
transition-property-006-manual.html 2022-11-12 16:47 1.2K CSS Transitions Test: transition-property - background-position
transition-property-007-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - border-bottom-color
transition-property-008-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - border-bottom-width
transition-property-009-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - border-left-color
transition-property-010-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - border-left-width
transition-property-011-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - border-right-color
transition-property-012-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - border-right-width
transition-property-013-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - border-top-color
transition-property-014-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - border-top-width
transition-property-015-manual.html 2022-11-12 16:50 1.1K CSS Transitions Test: transition-property - border-spacing
transition-property-016-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - bottom
transition-property-017-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - clip
transition-property-018-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - color
transition-property-019-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - font-size
transition-property-020-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - font-weight
transition-property-021-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - left
transition-property-022-manual.html 2022-11-12 16:49 1.3K CSS Transitions Test: transition-property - letter-spacing
transition-property-023-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - line-height
transition-property-024-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - margin-bottom
transition-property-025-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - margin-left
transition-property-026-manual.html 2022-11-12 16:49 1.2K CSS Transitions Test: transition-property - margin-right
transition-property-027-manual.html 2022-11-12 16:50 1.1K CSS Transitions Test: transition-property - max-height
transition-property-028-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - max-width
transition-property-029-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - min-height
transition-property-030-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - min-width
transition-property-031-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - opacity
transition-property-032-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - outline-color
transition-property-033-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - outline-width
transition-property-034-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - padding-bottom
transition-property-035-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - padding-left
transition-property-036-manual.html 2022-11-12 16:49 1.2K CSS Transitions Test: transition-property - padding-right
transition-property-037-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - padding-top
transition-property-038-manual.html 2022-11-12 16:49 1.1K CSS Transitions Test: transition-property - right
transition-property-039-manual.html 2022-11-12 16:50 1.0K CSS Transitions Test: transition-property - text-indent
transition-property-040-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - text-shadow
transition-property-041-manual.html 2022-11-12 16:48 1.1K CSS Transitions Test: transition-property - top
transition-property-042-manual.html 2022-11-12 16:47 1.2K CSS Transitions Test: transition-property - vertical-align
transition-property-043-manual.html 2022-11-12 16:47 1.1K CSS Transitions Test: transition-property - visibility
transition-property-044-manual.html 2022-11-12 16:47 1.2K CSS Transitions Test: transition-property - word-spacing
transition-property-045-manual.html 2022-11-12 16:48 1.2K CSS Transitions Test: transition-property - z-index
transition-reparented.html 2022-11-12 16:49 1.3K CSS Transition should cancel when an element is reparented
transition-test.html 2022-11-12 16:49 1.5K CSS Transition Test: invalid values cause all properites to animate.
transition-timing-function-002-manual.html 2022-11-12 16:49 1.5K CSS Transitions Test: transition-timing-function - 'ease' equivalent to 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'
transition-timing-function-003-manual.html 2022-11-12 16:49 1.4K CSS Transitions Test: transition-timing-function - 'ease-in' equivalent to 'cubic-bezier(0.42, 0, 1.0, 1.0)'
transition-timing-function-004-manual.html 2022-11-12 16:49 1.4K CSS Transitions Test: transition-timing-function - 'ease-in-out' equivalent to 'cubic-bezier(0.42, 0, 0.58, 1.0)'
transition-timing-function-005-manual.html 2022-11-12 16:50 1.4K CSS Transitions Test: transition-timing-function - 'ease-out' equivalent to 'cubic-bezier(0, 0, 0.58, 1.0)'
transition-timing-function-006-manual.html 2022-11-12 16:48 1.4K CSS Transitions Test: transition-timing-function - 'linear' equivalent to 'cubic-bezier(0.0, 0.0, 1.0, 1.0)'
transition-timing-function-010-manual.html 2022-11-12 16:48 1.0K CSS Transitions Test: transition-timing-function - steps(2)
transitioncancel-001.html 2022-11-12 16:47 2.3K CSS Transitions Test: display:none causes transitioncancel
transitioncancel-002.html 2022-11-12 16:47 1.6K CSS Transitions Test: Removing transitioning property from transition-property triggers transitioncancel
transitionevent-interface.html 2022-11-12 16:47 7.6K CSS Transitions Test: TransitionEvent interface
transitions-retarget.html 2024-07-16 06:02 1.3K Retargeted CSS transition
zero-duration-multiple-transition.html 2023-03-10 06:01 951