# 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 immedately 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`)


## 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-DOMContentLoaded-001.html` - expect transitions to be performed before DOM is ready
* `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

Icon  Name                                      Last modified      Size  Description
[PARENTDIR] Parent Directory - [DIR] reference/ 2015-12-07 15:37 - [DIR] support/ 2016-02-11 00:03 - [   ] OWNERS 2017-02-25 00:05 23 [TXT] before-DOMContentLoaded-001.html 2015-12-07 15:37 7.0K CSS Transitions Test: Transitioning before DOMContentLoaded event [TXT] before-load-001.html 2015-12-07 15:37 7.3K CSS Transitions Test: Transitioning before load event [TXT] changing-while-transition.html 2015-12-07 15:37 6.3K CSS Transitions Test: behavior when transition parameters change while transitioning [TXT] currentcolor-animation-001.html 2016-10-13 12:49 1.5K CSS Variables Allowed Syntax [TXT] detached-container-001.html 2015-12-07 15:37 6.0K CSS Transitions Test: Not Transitioning within detached element [TXT] events-001.html 2015-12-07 15:37 9.2K CSS Transitions Test: transitionend event for shorthand property [TXT] events-002.html 2015-12-07 15:37 5.5K CSS Transitions Test: transitionend event for implied property value [TXT] events-003.html 2015-12-07 15:37 6.3K CSS Transitions Test: transitionend event with negative delay [TXT] events-004.html 2015-12-07 15:37 6.2K CSS Transitions Test: transitionend event with non matching lists [TXT] events-005.html 2015-12-07 15:37 6.2K CSS Transitions Test: transitionend event with property specificity [TXT] events-006.html 2015-12-07 15:37 5.7K CSS Transitions Test: transitionend event for pseudo elements [TXT] events-007.html 2015-07-24 00:03 2.3K CSS Transitions Test: no transitionend event after display:none [TXT] hidden-container-001.html 2015-12-07 15:37 5.8K CSS Transitions Test: Not Transitioning within hidden element [TXT] properties-value-001.html 2015-12-07 15:37 34K CSS Transitions Test: Intermediate Property Values [TXT] properties-value-002.html 2015-12-07 15:37 7.5K CSS Transitions Test: Intermediate Property Values of missing value types [TXT] properties-value-003.html 2015-12-07 15:37 18K CSS Transitions Test: Intermediate Property Values of unspecified properties [TXT] properties-value-auto-001.html 2015-12-07 15:37 8.8K CSS Transitions Test: transitioning property value "auto" [TXT] properties-value-implicit-001.html 2015-12-07 15:37 10K CSS Transitions Test: font-size-relative properties transition by implicit value change [TXT] properties-value-inherit-001.html 2015-12-07 15:37 35K CSS Transitions Test: transitioning inherited property values [TXT] properties-value-inherit-002.html 2015-12-07 15:37 35K CSS Transitions Test: transitioning inherited property values [TXT] properties-value-inherit-003.html 2015-12-07 15:37 10K CSS Transitions Test: transitioning implicitly inherited property values [TXT] pseudo-elements-001.html 2015-12-07 15:37 7.3K CSS Transitions Test: Transitioning Pseudo Elements [TXT] transition-001.html 2015-12-07 15:37 4.1K CSS Transitions Test: Parsing transition shorthand [TXT] transition-delay-000.html 2014-06-11 12:24 1.3K CSS Transition Test: transition-delay - positive number [TXT] transition-delay-001.html 2015-12-07 15:37 3.8K CSS Transitions Test: Parsing transition-delay [TXT] transition-delay-002.html 2014-06-11 12:24 1.5K CSS Transition Test: transition-delay - 0s [TXT] transition-delay-003.html 2014-06-11 12:24 1.6K CSS Transition Test: transition-delay - negative number [TXT] transition-duration-001.html 2015-12-07 15:37 3.9K CSS Transitions Test: Parsing transition-duration [TXT] transition-duration-002.html 2014-06-11 12:24 1.3K CSS Transitions Test: transition-duration - positive number [TXT] transition-duration-003.html 2014-06-11 12:24 1.6K CSS Transitions Test: transition-duration - 0s(initial value) [TXT] transition-duration-004.html 2014-06-11 12:24 1.4K CSS Transitions Test: transition-duration - negative number [TXT] transition-property-001.html 2015-12-07 15:37 2.0K CSS Transitions Test: Parsing transition-property [TXT] transition-property-002.html 2015-12-07 15:37 2.4K CSS Transitions Test: Parsing invalid transition-property [TXT] transition-property-003.html 2014-06-11 12:24 1.4K CSS Transitions Test: transition-property - none [TXT] transition-property-004.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - all [TXT] transition-property-005.html 2014-06-11 12:24 1.3K CSS Transitions Test: transition-property - height width(more than one properties specified) [TXT] transition-property-006.html 2014-06-11 12:24 1.2K CSS Transitions Test: transition-property - background-position [TXT] transition-property-007.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-bottom-color [TXT] transition-property-008.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-bottom-width [TXT] transition-property-009.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-left-color [TXT] transition-property-010.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-left-width [TXT] transition-property-011.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-right-color [TXT] transition-property-012.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-right-width [TXT] transition-property-013.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-top-color [TXT] transition-property-014.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-top-width [TXT] transition-property-015.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - border-spacing [TXT] transition-property-016.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - bottom [TXT] transition-property-017.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - clip [TXT] transition-property-018.html 2014-06-11 12:24 1.0K CSS Transitions Test: transition-property - color [TXT] transition-property-019.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - font-size [TXT] transition-property-020.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - font-weight [TXT] transition-property-021.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - left [TXT] transition-property-022.html 2016-08-25 00:04 1.1K CSS Transitions Test: transition-property - letter-spacing [TXT] transition-property-023.html 2014-06-11 12:24 1.0K CSS Transitions Test: transition-property - line-height [TXT] transition-property-024.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - margin-bottom [TXT] transition-property-025.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - margin-left [TXT] transition-property-026.html 2014-06-11 12:24 1.2K CSS Transitions Test: transition-property - margin-right [TXT] transition-property-027.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - max-height [TXT] transition-property-028.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - max-width [TXT] transition-property-029.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - min-height [TXT] transition-property-030.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - min-width [TXT] transition-property-031.html 2014-06-11 12:24 1.0K CSS Transitions Test: transition-property - opacity [TXT] transition-property-032.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - outline-color [TXT] transition-property-033.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - outline-width [TXT] transition-property-034.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - padding-bottom [TXT] transition-property-035.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - padding-left [TXT] transition-property-036.html 2014-06-11 12:24 1.2K CSS Transitions Test: transition-property - padding-right [TXT] transition-property-037.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - padding-top [TXT] transition-property-038.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - right [TXT] transition-property-039.html 2014-06-11 12:24 1.0K CSS Transitions Test: transition-property - text-indent [TXT] transition-property-040.html 2014-06-11 12:24 1.0K CSS Transitions Test: transition-property - text-shadow [TXT] transition-property-041.html 2014-06-11 12:24 1.0K CSS Transitions Test: transition-property - top [TXT] transition-property-042.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - vertical-align [TXT] transition-property-043.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-property - visibility [TXT] transition-property-044.html 2016-08-25 00:04 1.1K CSS Transitions Test: transition-property - word-spacing [TXT] transition-property-045.html 2016-08-25 00:04 1.2K CSS Transitions Test: transition-property - z-index [TXT] transition-test.html 2015-12-07 15:37 1.5K CSS Transition Test: invalid values cause all properites to animate. [TXT] transition-timing-function-001.html 2017-01-08 00:05 4.9K CSS Transitions Test: Parsing transition-timing-function [TXT] transition-timing-function-002.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - 'ease' equivalent to 'cubic-bezier(0.25, 0.1, 0.25, 1.0)' [TXT] transition-timing-function-003.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - 'ease-in' equivalent to 'cubic-bezier(0.42, 0, 1.0, 1.0)' [TXT] transition-timing-function-004.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - 'ease-in-out' equivalent to 'cubic-bezier(0.42, 0, 0.58, 1.0)' [TXT] transition-timing-function-005.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - 'ease-out' equivalent to 'cubic-bezier(0, 0, 0.58, 1.0)' [TXT] transition-timing-function-006.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - 'linear' equivalent to 'cubic-bezier(0.0, 0.0, 1.0, 1.0)' [TXT] transition-timing-function-007.html 2014-06-11 12:24 1.4K CSS Transitions Test: transition-timing-function - 'step-end' equivalent to 'steps(1, end)' [TXT] transition-timing-function-008.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - 'step-start' equivalent to 'steps(1, start)' [TXT] transition-timing-function-009.html 2014-06-11 12:24 1.4K CSS Transitions Test: transition-timing-function - ease(initial value) [TXT] transition-timing-function-010.html 2014-06-11 12:24 1.1K CSS Transitions Test: transition-timing-function - steps(2) [TXT] transition-timing-function-011.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - steps(the second parameter default 'end') [TXT] transition-timing-function-012.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - steps(-2) [TXT] transition-timing-function-013.html 2014-06-11 12:24 1.5K CSS Transitions Test: transition-timing-function - steps(0) [TXT] transitions-animatable-properties-01.html 2016-11-01 00:05 10K CSS Transitions: Animatable CSS properties
Apache/2.4.10 (Debian) Server at test.csswg.org Port 80