CSS Transitions Module Level 1 CR Test Suite

Transitions (42 tests)

Test Refs Flags Info
+ 2 Transitions
detached-container-001 DOM/JSScript Not Transitioning within detached element
  • Test checks that transitions are NOT run within detached elements
hidden-container-001 DOM/JSScript Not Transitioning within hidden element
  • Test checks that transitions are NOT run within hidden elements
properties-value-001 DOM/JSScript Intermediate Property Values
  • Test checks that value ranges between start and end while transitioning
properties-value-002 DOM/JSScript Intermediate Property Values of missing value types
  • Test checks that expected value types that haven't been specified are transitionable
properties-value-003 DOM/JSScript Intermediate Property Values of unspecified properties
  • Test checks that properties are transitionable that haven't been specified
properties-value-auto-001 DOM/JSScript transitioning property value "auto"
  • Test checks that properties are transitioned from an to auto-value
properties-value-implicit-001 DOM/JSScript font-size-relative properties transition by implicit value change
  • Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed
transitions-animatable-properties-01 Script CSS Transitions: Animatable CSS properties
  • Check that all animatable CSS properties are animatable and then accepted by the 'transition-property' property
events-004 DOM/JSScript transitionend event with non matching lists
  • Test checks that non-matching lists are properly resolved
+ 2.1 The ‘transition-property’ Property
events-001 DOM/JSScript transitionend event for shorthand property
  • Test checks that all transitionend events are triggered for shorthand property
events-005 DOM/JSScript transitionend event with property specificity
  • Test checks that property specificity is properly resolved
pseudo-elements-001 DOM/JSScript Transitioning Pseudo Elements
  • Test checks that transitions are run on pseudo elements
transition-property-001 DOM/JSScript Parsing transition-property
  • Test checks that transition-property values are parsed properly
transition-property-002 DOM/JSScript Parsing invalid transition-property
  • Test checks that unrecognized or non-animatable properties must be kept in the list to preserve the matching of indices.
transition-property-003 Interact transition-property - none
  • The 'transition-duration' property set 'none' means that no property will be transitioned.
transition-property-004 Interact transition-property - all
  • The 'transition-duration' property set 'all' means that all properties are transitioned.
transition-property-005 Interact transition-property - height width(more than one properties specified)
  • The 'transition-duration' property set more than one properties like 'height, width' means only the specified properties will be transitioned.
transition-test = invalid values cause all properites to animate.
  • When an invalid value is specified as one of the transition properties, it causes the the transition-property to change to 'all'. Instead of leaving the invalid property in and animating the valid properites with matching durations.
+ 2.2 The ‘transition-duration’ Property
transition-duration-001 DOM/JSScript Parsing transition-duration
  • Test checks that transition-duration values are parsed properly
transition-duration-002 Interact transition-duration - positive number
  • The 'transition-duration' property set positive number specifies the time that transition from the old value to the new value should take.
transition-duration-003 Interact transition-duration - 0s(initial value)
  • Test checks that the initial value of 'transition-duration' property is '0s' which means the transition is immediate.
transition-duration-004 Interact transition-duration - negative number
  • A negative value for 'transition-duration renders the declaration invalid which means the transition is immediate.
+ 2.3 The ‘transition-timing-function’ Property
transition-timing-function-001 DOM/JSScript Parsing transition-timing-function
  • Test checks that transition-timing-function values are parsed properly
transition-timing-function-002 Interact transition-timing-function - 'ease' equivalent to 'cubic-bezier(0.25, 0.1, 0.25, 1.0)'
  • The 'transition-timing-function' property set 'ease' is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0)
transition-timing-function-003 Interact transition-timing-function - 'ease-in' equivalent to 'cubic-bezier(0.42, 0, 1.0, 1.0)'
  • The 'transition-timing-function' property set 'ease-in' is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0)
transition-timing-function-004 Interact transition-timing-function - 'ease-in-out' equivalent to 'cubic-bezier(0.42, 0, 0.58, 1.0)'
  • The 'transition-timing-function' property set 'ease-in-out' is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
transition-timing-function-005 Interact transition-timing-function - 'ease-out' equivalent to 'cubic-bezier(0, 0, 0.58, 1.0)'
  • The 'transition-timing-function' property set 'ease-out' is equivalent to cubic-bezier(0, 0, 0.58, 1.0)
transition-timing-function-006 Interact transition-timing-function - 'linear' equivalent to 'cubic-bezier(0.0, 0.0, 1.0, 1.0)'
  • The 'transition-timing-function' property set 'linear' is equivalent to cubic-bezier(0.0, 0.0, 1.0, 1.0)
transition-timing-function-007 Interact transition-timing-function - 'step-end' equivalent to 'steps(1, end)'
  • The 'transition-timing-function' property set 'step-end' is equivalent to 'steps(1, end)'
transition-timing-function-008 Interact transition-timing-function - 'step-start' equivalent to 'steps(1, start)'
  • The 'transition-timing-function' property set 'step-start' is equivalent to 'steps(1, start)'
transition-timing-function-009 Interact transition-timing-function - ease(initial value)
  • Test checks that the initial value of 'transition-timing-function' property is 'ease'.
transition-timing-function-010 Interact transition-timing-function - steps(2)
  • Test checks that the first parameter of 'steps()' function specifies the number of intervals.
transition-timing-function-011 Interact transition-timing-function - steps(the second parameter default 'end')
  • Test checks that the second parameter of 'steps()' function is default 'end'.
transition-timing-function-012 Interact transition-timing-function - steps(-2)
  • Test checks that the 'steps()' function with negative number is invalid, the transition-timing-function will use 'ease' as default.
transition-timing-function-013 Interact transition-timing-function - steps(0)
  • Test checks that the 'steps()' function with '0' is invalid, the transition-timing-function will use 'ease' as default.
+ 2.4 The ‘transition-delay’ Property
events-003 DOM/JSScript transitionend event with negative delay
  • Test checks that transitionend event is triggered for duration time being canceled out by negative delay
transition-delay-000 Interact transition-delay - positive number
  • The 'transition-delay' property set positive number to delay the execution of transition
transition-delay-001 DOM/JSScript Parsing transition-delay
  • Test checks that transition-delay values are parsed properly
transition-delay-002 Interact transition-delay - 0s
  • Test checks that the 'transition-delay' property set 0 will not delay the execution of transition
transition-delay-003 Interact transition-delay - negative number
  • Test checks that the 'transition-delay' property set negative number will not delay the execution of transition
+ 2.5 The ‘transition’ Shorthand Property
transition-001 DOM/JSScript Parsing transition shorthand
  • Test checks that transition shorthand values are parsed properly
caret-color-017 Interact caret-color transition
  • Test checks that caret-color can be used in a transition