tree: c0677b9e26eae4ad7e63f2d2c4838161fb5c3937 [path history] [tgz]
  1. animations/
  2. parsing/
  3. support/
  4. AnimationEffect-getComputedTiming.tentative-expected.txt
  5. AnimationEffect-getComputedTiming.tentative.html
  6. before-load-001-expected.txt
  7. before-load-001.html
  8. changing-while-transition-001-expected.txt
  9. changing-while-transition-001.html
  10. changing-while-transition-002-expected.txt
  11. changing-while-transition-002.html
  12. changing-while-transition-003-expected.txt
  13. changing-while-transition-003.html
  14. CSSTransition-canceling.tentative-expected.txt
  15. CSSTransition-canceling.tentative.html
  16. CSSTransition-currentTime.tentative-expected.txt
  17. CSSTransition-currentTime.tentative.html
  18. CSSTransition-effect.tentative-expected.txt
  19. CSSTransition-effect.tentative.html
  20. CSSTransition-finished.tentative-expected.txt
  21. CSSTransition-finished.tentative.html
  22. CSSTransition-ready.tentative-expected.txt
  23. CSSTransition-ready.tentative.html
  24. CSSTransition-startTime.tentative-expected.txt
  25. CSSTransition-startTime.tentative.html
  26. CSSTransition-transitionProperty.tentative-expected.txt
  27. CSSTransition-transitionProperty.tentative.html
  28. currentcolor-animation-001-expected.txt
  29. currentcolor-animation-001.html
  30. disconnected-element-001-expected.txt
  31. disconnected-element-001.html
  32. Document-getAnimations.tentative-expected.txt
  33. Document-getAnimations.tentative.html
  34. Element-getAnimations.tentative-expected.txt
  35. Element-getAnimations.tentative.html
  36. event-dispatch.tentative-expected.txt
  37. event-dispatch.tentative.html
  38. events-001-expected.txt
  39. events-001.html
  40. events-002-expected.txt
  41. events-002.html
  42. events-003-expected.txt
  43. events-003.html
  44. events-004-expected.txt
  45. events-004.html
  46. events-005-expected.txt
  47. events-005.html
  48. events-006-expected.txt
  49. events-006.html
  50. events-007-expected.txt
  51. events-007.html
  52. historical-expected.txt
  53. historical.html
  54. idlharness-expected.txt
  55. idlharness.html
  56. inherit-height-transition-expected.txt
  57. inherit-height-transition.html
  58. inheritance-expected.txt
  59. inheritance.html
  60. KeyframeEffect-getKeyframes.tentative-expected.txt
  61. KeyframeEffect-getKeyframes.tentative.html
  62. KeyframeEffect-setKeyframes.tentative-expected.txt
  63. KeyframeEffect-setKeyframes.tentative.html
  64. KeyframeEffect-target.tentative-expected.txt
  65. KeyframeEffect-target.tentative.html
  66. META.yml
  67. no-transition-from-ua-to-blocking-stylesheet-expected.html
  68. no-transition-from-ua-to-blocking-stylesheet.html
  69. non-rendered-element-001-expected.txt
  70. non-rendered-element-001.html
  71. non-rendered-element-002-expected.txt
  72. non-rendered-element-002.html
  73. non-rendered-element-004.tentative-expected.txt
  74. non-rendered-element-004.tentative.html
  75. properties-value-001-expected.txt
  76. properties-value-001.html
  77. properties-value-002-expected.txt
  78. properties-value-002.html
  79. properties-value-003-expected.txt
  80. properties-value-003.html
  81. properties-value-implicit-001-expected.txt
  82. properties-value-implicit-001.html
  83. properties-value-inherit-001-expected.txt
  84. properties-value-inherit-001.html
  85. properties-value-inherit-002-expected.txt
  86. properties-value-inherit-002.html
  87. properties-value-inherit-003-expected.txt
  88. properties-value-inherit-003.html
  89. pseudo-elements-001-expected.txt
  90. pseudo-elements-001.html
  91. pseudo-elements-002-expected.txt
  92. pseudo-elements-002.html
  93. README.md
  94. root-color-transition-expected.html
  95. root-color-transition.html
  96. starting-of-transitions-001-expected.txt
  97. starting-of-transitions-001.html
  98. transition-001-expected.txt
  99. transition-001.html
  100. transition-background-position-with-edge-offset-expected.txt
  101. transition-background-position-with-edge-offset.html
  102. transition-base-response-001-expected.txt
  103. transition-base-response-001.html
  104. transition-base-response-002-expected.txt
  105. transition-base-response-002.html
  106. transition-base-response-003-expected.txt
  107. transition-base-response-003.html
  108. transition-delay-001-expected.txt
  109. transition-delay-001.html
  110. transition-duration-001-expected.txt
  111. transition-duration-001.html
  112. transition-property-001-expected.txt
  113. transition-property-001.html
  114. transition-property-002-expected.txt
  115. transition-property-002.html
  116. transition-reparented-expected.txt
  117. transition-reparented.html
  118. transition-test-expected.html
  119. transition-test.html
  120. transitioncancel-001-expected.txt
  121. transitioncancel-001.html
  122. transitioncancel-002-expected.txt
  123. transitioncancel-002.html
  124. transitionevent-interface-expected.txt
  125. transitionevent-interface.html
  126. w3c-import.log
  127. zero-duration-multiple-transition-expected.txt
  128. zero-duration-multiple-transition.html
LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/README.md

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:

{
  // 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)

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