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