CSS Transforms Module Level 1 CR Test Suite

The Transform Functions (235 tests)

Test Refs Flags Info
+ 9 The Transform Functions
css-transform-scale-001-manual = transform property with scale function on hover state
  • When the element is hovered over, the transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner.
css-transform-scale-002 = transform property with scale function and move its origin
  • The transform scales the element to twice its size in both the X and Y directions and moves its origin to the top left corner.
+ 9.1 2D Transform Functions
css-scale-nested-001 = scale 0 on a parent with a child
  • Child square element is transformed (scaled to zero) along with the parent element
css-skew-001 = skew function part 1
css-skew-002 = skew function part 2
css-transform-inherit-rotate CSS transforms rotate inheritance on div element
  • Rotation on parent element will not be inherited by child element, unless declared. The test is passed if there is a green square and no red. And it is rotated 45 degree.
css-transform-inherit-scale = CSS transforms scale 2 inheritance on div elements
  • While child div inherits property from its parent, scaling 2 on parent div will course the child to scale 4 and totally cover the red div. The test passes if there is a green square and no red.
rotate-180-degrees-001 transform - rotate 180 deg
rotate-270-degrees-001 transform - rotate 270 deg
rotate-90-degrees-001 transform - rotate 90 deg
scale-optional-second-001 = transform property with scale function and one parameter
  • If the second parameter of scale function is not provided, it takes a value equal to the first. This transform causes the element to appear twice as long in both the X and Y axes.
scale-zero-001 = transform property with scale function and zero values
  • If zero value is passed to scale function, it causes the element to disappear.
skew-test1 = SVG Testing 1 - skew()
  • The lime square in this test has a skew method applied : 30deg on x and 20deg on y. The red polygon should be totally hidden by the lime skewed square. Both start at 0,0
svg-gradienttransform-001 = SVG SVG gradientTransform presentation attribute and translateX with translation-value argument without unit
  • The gradientTransform attribute must support functions with unit less arguments for translation-value. The gradient in the test should be moved 25 pixels in the X direction resulting in a solid green rect.
svg-gradienttransform-combination-001 = SVG SVG gradientTransform presentation attribute with translateX applied twice
  • The gradientTransform attribute must support multiple transform functions the same element. The gradient in the test should be moved 100 pixels in the X direction resulting in a solid green rect.
svg-gradienttransform-combination-003 = SVG SVG gradientTransform presentation attribute and translation-value argument with translateX applied in both directions
  • The gradientTransform attribute must support multiple transform functions in both directions. The gradient in the test should be moved 100 pixels in the X direction resulting in a solid green rect.
svg-matrix-001 = SVG SVG presentation attribute and matrix scaling up horizontally only: 2 0 0 1 0 0
  • The rect in the test should be scaled up horizontally.
svg-matrix-002 = SVG SVG presentation attribute and matrix scaling down horizontally only: 0.5 0 0 1 0 0
  • The rect in the test should be scaled down horizontally.
svg-matrix-003 = SVG SVG presentation attribute and matrix scaling up vertically only: 1 0 0 2 0 0
  • The rect in the test should be scaled up vertically.
svg-matrix-004 = SVG SVG presentation attribute and matrix scaling down vertically only: 1 0 0 0.5 0 0
  • The rect in the test should be scaled down vertically.
svg-matrix-005 = SVG SVG presentation attribute and matrix flipping left and scaling up horizontally: -2 0 0 1 100 0
  • The rect in the test should be flipped left and scaled up horizontally.
svg-matrix-006 = SVG SVG presentation attribute and matrix flipping left and scaling down horizontally: -0.5 0 0 1 100 0
  • The rect in the test should be flipped left and scaled up horizontally.
svg-matrix-007 = SVG SVG presentation attribute and matrix flipping up and scaling up vertically: 1 0 0 -2 0 100
  • The rect in the test should be flipped up and scaled up vertically.
svg-matrix-008 = SVG SVG presentation attribute and matrix flipping up and scaling down vertically: 1 0 0 -0.5 0 100
  • The rect in the test should be flipped up and scaled down vertically.
svg-matrix-009 = SVG SVG presentation attribute and matrix scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 0.2e1 0 0
  • The matrix function must support scientific numbers. The rect in the test should be scaled up horizontally and vertically.
svg-matrix-010 = SVG SVG presentation attribute and matrix flipping up and left and scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 -0.2e1 100 100
  • The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally and vertically.
svg-matrix-011 = SVG SVG presentation attribute and matrix scaling down horizontally and vertically in scientific numbers with negative exponents: 5e-1 0 0 5e-1 0 0
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be scaled down horizontally and vertically.
svg-matrix-012 = SVG SVG presentation attribute and matrix flipping up and left and scaling down horizontally and vertically with scientific numbers with negative exponents: -5e-1 0 0 -5e-1 100 100
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-013 = SVG SVG presentation attribute and matrix scaling up horizontally and down vertically: 2 0 0 0.5 0 0
  • The rect in the test should be scaled up horizontally and down vertically.
svg-matrix-014 = SVG SVG presentation attribute and matrix scaling down horizontally and up vertically: 0.5 0 0 2 0 0
  • The rect in the test should be scaled down horizontally and up vertically.
svg-matrix-015 = SVG SVG presentation attribute and matrix flipping up and left and scaling up horizontally and down vertically: -2 0 0 -0.5 100 100
  • The rect in the test should be flipped up and left and scaled up horizontally and down vertically.
svg-matrix-016 = SVG SVG presentation attribute and matrix flipping up and left and scaling down horizontally and up vertically: -0.5 0 0 -2 100 100
  • The rect in the test should be flipped up and left and scaled down horizontally and up vertically.
svg-matrix-017 = SVG SVG presentation attribute and matrix flipping up and scaling up horizontally and vertically: 2 0 0 -2 0 100
  • The rect in the test should be flipped up scaled up horizontally and vertically.
svg-matrix-018 = SVG SVG presentation attribute and matrix flipping up and scaling down horizontally and vertically: 0.5 0 0 -0.5 0 100
  • The rect in the test should be flipped up scaled down horizontally and vertically.
svg-matrix-019 = SVG SVG presentation attribute and matrix flipping left and scaling down horizontally and vertically: -0.5 0 0 0.5 100 0
  • The rect in the test should be flipped left and scaled down horizontally and vertically.
svg-matrix-020 = SVG SVG presentation attribute and matrix and flipping up and scaling up horizontally and down vertically: 2 0 0 -0.5 0 100
  • The rect in the test should be flipped up and scaled up horizontally and down vertically.
svg-matrix-021 = SVG SVG presentation attribute and matrix and flipping left and scaling up horizontally and down vertically: -2 0 0 0.5 100 0
  • The rect in the test should be flipped left and scaled up horizontally and down vertically.
svg-matrix-022 = SVG SVG presentation attribute and matrix and flipping up and scaling down horizontally and up vertically: 0.5 0 0 -2 0 100
  • The rect in the test should be flipped up and scaled down horizontally and up vertically.
svg-matrix-023 = SVG SVG presentation attribute and matrix and flipping left and scaling down horizontally and up vertically: -0.5 0 0 2 100 0
  • The rect in the test should be flipped left and scaled down horizontally and up vertically.
svg-matrix-024 = SVG SVG presentation attribute and matrix and flipping left and scaling up horizontally and vertically: -2 0 0 2 100 0
  • The rect in the test should be flipped left and scaled up horizontally and vertically.
svg-matrix-025 = SVG SVG presentation attribute and matrix and flipping left: -1 0 0 1 100 0
  • The rect in the test should be flipped left.
svg-matrix-026 = SVG SVG presentation attribute and matrix and flipping up: 1 0 0 0 -1 0 100
  • The rect in the test should be flipped up.
svg-matrix-027 = SVG SVG presentation attribute and matrix and flipping left and up: -1 0 0 0 -1 100 100
  • The rect in the test should be flipped left and up.
svg-matrix-028 = SVG SVG presentation attribute and matrix and flipping up and scaling up horizontally: 2 0 0 -1 0 100
  • The rect in the test should be flipped up and scaled up horizontally.
svg-matrix-029 = SVG SVG presentation attribute and matrix and flipping up and left and scaling up horizontally with scientific numbers: -2 0 0 -1 10e1 10e1
  • The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally.
svg-matrix-030 = SVG SVG presentation attribute and matrix and flipping up and scaling down horizontally: 0.5 0 0 -1 0 100
  • The rect in the test should be flipped up and scaled down horizontally.
svg-matrix-031 = SVG SVG presentation attribute and matrix and flipping up and left and scaling down horizontally: -0.5 0 0 -1 100 100
  • The rect in the test should be flipped up and left and scaled down horizontally.
svg-matrix-032 = SVG SVG presentation attribute and matrix and flipping left and scaling up vertically: -1 0 0 2 100 0
  • The rect in the test should be flipped left scaled up vertically.
svg-matrix-033 = SVG SVG presentation attribute and matrix and flipping up and left and scaling up vertically with scientific numbers with negative exponents: -1 0 0 -2 1000e-1 1000e-1
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left scaled up vertically.
svg-matrix-034 = SVG SVG presentation attribute and matrix and flipping left and scaling down vertically: -1 0 0 0.5 100 0
  • The rect in the test should be flipped left scaled down vertically.
svg-matrix-035 = SVG SVG presentation attribute and matrix and flipping left and up and scaling down vertically: -1 0 0 -0.5 100 100
  • The rect in the test should be flipped left and up scaled down vertically.
svg-matrix-036 = SVG SVG presentation attribute and matrix and skewing right: 1 0 1 1 0 0
  • The rect in the test should skewed right horizontally.
svg-matrix-037 = SVG SVG presentation attribute and matrix and skewing down: 1 1 0 1 100 0
  • The rect in the test should skewed down horizontally.
svg-matrix-038 = SVG SVG presentation attribute and matrix and skewing left: 1 0 -1 100 50
  • The rect in the test should be skewed left horinzontally.
svg-matrix-039 = SVG SVG presentation attribute and matrix and skewing up: 1 -1 0 1 50 100
  • The rect in the test should be skewed up vertically.
svg-matrix-040 = SVG SVG presentation attribute and matrix and skewing up and left with scientific numbers: 1 -0.05e1 -0.05e1 1 100 50
  • The matrix function must support scientific numbers. The rect in the test should be skewed up vertically and left horizontally.
svg-matrix-041 = SVG SVG presentation attribute and matrix and skewing down and right with scientific numbers: 1 0.05e1 0.05e1 1 50 0
  • The matrix function must support scientific numbers. The rect in the test should be skewed down vertically and right horizontally.
svg-matrix-042 = SVG SVG presentation attribute and matrix and skewing down and left: 1 -0.5 0.5 1 50 50
  • The rect in the test should be skewed down vertically and left horizontally.
svg-matrix-043 = SVG SVG presentation attribute and matrix and skewing up and right: 1 0.5 -0.5 1 100 0
  • The rect in the test should be skewed up vertically and right horizontally.
svg-matrix-044 = SVG SVG presentation attribute and matrix and scaling up and skewing down and right: 2 0.5 0.5 2 50 0
  • The rect in the test should be scaled up vertically and horizontally and skewed down vertically and right horizontally.
svg-matrix-045 = SVG SVG presentation attribute and matrix and scaling down and skewing up and left: 0.75 -0.5 -0.5 0.75 190 150
  • The rect in the test should be scaled down vertically and horizontally and skewed up vertically and left horizontally.
svg-matrix-046 = SVG SVG presentation attribute and matrix and flipping left, scaling up, and skewing down and right with scientific numbers with negative exponents: -2 5e-1 5e-1 2 250 0
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped left, scaled up, and skewed down vertically and right horizontally.
svg-matrix-047 = SVG SVG presentation attribute and matrix and flipping up, scaling down, and skewing up and left with scientific numbers with negative exponents: 0.5 -5e-1 0 -5e-1 250 100
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped down, scaled down, and skewed up vertically and left horizontally.
svg-matrix-048 = SVG SVG presentation attribute and matrix and flipping up and left, scaling up horizontally and down vertically, and skewing right and down: -2 0.25 0.25 -0.5 200 200
  • The rect in the test should be flipped up and left, scaled up horizontally and down vertically, and skewed right and down.
svg-matrix-049 = SVG SVG presentation attribute and matrix function arguments separated by commas and no spaces
  • The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-050 = SVG SVG presentation attribute and matrix function arguments separated by commas with spaces before the comma
  • The matrix function must support arguments separated by commas with spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-051 = SVG SVG presentation attribute and matrix function arguments separated by commas with spaces after the comma
  • The matrix function must support arguments separated by commas with spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-052 = SVG SVG presentation attribute and matrix function arguments separated by commas with spaces before and after the comma
  • The matrix function must support arguments separated by commas with spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-053 = SVG SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before the comma
  • The matrix function must support arguments separated by commas with multiple spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-054 = SVG SVG presentation attribute and matrix function arguments separated by commas with multiple spaces after the comma
  • The matrix function must support arguments separated by commas with multiple spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-055 = SVG SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before and after the comma
  • The matrix function must support arguments separated by commas with multiple spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-056 = SVG SVG presentation attribute and matrix function arguments separated by multiple spaces
  • The matrix function must support arguments separated by multiple spaces. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-057 = SVG SVG presentation attribute and matrix function arguments separated by a mix of spaces and commas
  • The matrix function must support arguments separated by a mix of spaces and commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-058 = SVG SVG presentation attribute and matrix function with invalid 'a' value
  • The matrix function does not support percentage values. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-059 = SVG SVG presentation attribute and matrix function with invalid 'b' value
  • The matrix function does not support degree units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-060 = SVG SVG presentation attribute and matrix function with invalid 'c' value
  • The matrix function does not support gradian units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-061 = SVG SVG presentation attribute and matrix function with invalid 'd' value
  • The matrix function does not support percentage units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-062 = SVG SVG presentation attribute and matrix function with invalid 'e' value
  • The matrix function does not support px units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-063 = SVG SVG presentation attribute and matrix function with invalid 'f' value
  • The matrix function does not support pt units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-064 = SVG SVG presentation attribute and matrix function with invalid 'a' value with another transform function
  • The matrix function does not support percentage values. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-065 = SVG SVG presentation attribute and matrix function with invalid 'b' value with another transform function
  • The matrix function does not support radian units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-066 = SVG SVG presentation attribute and matrix function with invalid 'c' value with another transform function
  • The matrix function does not support turn units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-067 = SVG SVG presentation attribute and matrix function with invalid 'd' value with another transform function
  • The matrix function does not support percentage units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-068 = SVG SVG presentation attribute and matrix function with invalid 'e' value with another transform function
  • The matrix function does not support pc units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-069 = SVG SVG presentation attribute and matrix function with invalid 'f' value with another transform function
  • The matrix function does not support mm units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-patterntransform-001 = SVG SVG patternTransform presentation attribute and translateX with translation-value argument without unit
  • The patternTransform attribute must support functions with unit less arguments for translation-value. The pattern in the test should be moved 25 pixels in the X direction resulting in a solid green rect.
svg-patterntransform-combination-001 = SVG SVG patternTransform presentation attribute and translation-value argument with translateX applied twice
  • The patternTransform attribute must support multiple transform functions the same element. The pattern in the test should be moved 50 pixels in the X direction resulting in a solid green rect.
svg-rotate-angle-45-001 = SVG SVG presentation attribute and angle argument without unit on rotate
  • The rotate transform function must support unit less arguments for angle. The green rect in the test should be rotated by 45 degrees clockwise to completely cover the red path.
svg-rotate-angle-45-011 = SVG SVG presentation attribute and more than full circle rotate with unit less angle
  • The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.
svg-rotate-angle-45-022 = SVG SVG presentation attribute and rotate with scientific numbers with negative exponents for arguments in degree
  • The rotate transform function must support scientific numbers with negative exponents for angle arguments in degree. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.
svg-rotate-angle-90-001 = SVG SVG presentation attribute and angle argument without unit on rotate
  • The rotate transform function must support unit less arguments for angle. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-006 = SVG SVG presentation attribute and rotate with negative, unit less turn
  • The rotate transform function must support negative unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-011 = SVG SVG presentation attribute and more than full circle rotate with unit less angle
  • The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-016 = SVG SVG presentation attribute and rotate with scientific numbers on unit less angles
  • The rotate transform function must support scientific numbers for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-021 = SVG SVG presentation attribute and rotate with scientific numbers with negative exponents for unit less arguments
  • The rotate transform function must support scientific numbers with negative exponents for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-scale-001 = SVG SVG presentation attribute and scale 0.5 with only one parameter specified
  • If the second parameter of the scale function is not provided, it is takes a value equal to the first. The red rect in this test should be scaled down 0.5 vertically and horizontally to be completely hidden by the green rect.
svg-scale-002 = SVG SVG presentation attribute and scale 1.5 with only one parameter specified
  • If the second parameter is not provided, it is takes a value equal to the first. The green rect in this test should be scaled up 1.5 vertically and horizontally to completely cover the red rect.
svg-scale-003 = SVG SVG presentation attribute and scale 2 with only one parameter specified
  • If the second parameter is not provided, it is takes a value equal to the first. The green rect in this test should be scaled up 2 vertically and horizontally to completely cover the red rect.
svg-scale-004 = SVG SVG presentation attribute and scale 0.5 with parameters separated by commas + no whitespace
  • Parameters in the scale function can be separated by commas and no whitespace. The red rect in this test should be scaled down 0.5 to completely cover the green rect.
svg-scale-006 = SVG SVG presentation attribute and scale horizontally 0.5 and vertically 1.5
  • The green rect in the test should be scaled down horizontally and up vertically to form a square and completely cover the red rect.
svg-scale-007 = SVG SVG presentation attribute and scale horizontally 1.5 and vertically 0.5
  • The green rect in the test should be scaled up horizontally and down vertically to form a square completely cover the red rect.
svg-scale-008 = SVG SVG presentation attribute and scale 0.5 on the g element
  • The group containing the red rect in this test should be scaled down 0.5 to be completely hidden behind the green rect.
svg-scale-009 = SVG SVG presentation attribute and scale 0.5 on the g element and scale 0.5 on the rect element
  • The group containing the red rect in this test should be scaled down 0.5 and the red rect should be scaled down again 0.5 to be completely hidden behind the green rect.
svg-scale-010 = SVG SVG presentation attribute and scale -0.5 with only one parameter specified
  • Scaling by a negative value should flip the element and if the second parameter of the scale function is not provided, it is takes a value equal to the first. The green rect in this test should be flipped downward and rightward into view and scaled down 0.5 horizontally and vertically to completely cover the red background.
svg-scale-011 = SVG SVG presentation attribute and scale -2 with only one parameter specified
  • Scaling by a negative value should flip the element and if the second parameter of the scale function is not provided, it is takes a value equal to the first. The green rect in this test flipped rightward and downard into view and scaled up 2 to completely cover the red background.
svg-scale-012 = SVG SVG presentation attribute and scale -0.5 with parameters separated by commas + no whitespace
  • Scaling by a negative value should flip the element and parameters to the scale function can be separated by commas with no whitespace. The green rect in this test should be flipped downward and rightward into view right scaled down 0.5 to to completely cover the red background.
svg-scale-013 = SVG SVG presentation attribute and scale horizontally -0.5 and vertically -1.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped downward and rightward into view and scaled down horizontally and up vertically to completely cover the red background.
svg-scale-014 = SVG SVG presentation attribute and scale horizontally -1.5 and vertically -0.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped downward and rightward into view and scaled up horizontally and down vertically to completely cover the red background.
svg-scale-015 = SVG SVG presentation attribute and scale horizontally -0.5 and vertically 1.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped rightward into view and scaled down horizontally and up vertically to completely cover the red background.
svg-scale-016 = SVG SVG presentation attribute and scale horizontally 1.5 and vertically -0.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped downward into view and scaled up horizontally and down vertically to completely cover the red background.
svg-scale-017 = SVG SVG presentation attribute and scale -0.5 on the g element
  • Scaling by a negative value should flip the element. The group containing the green rect in this test should be flipped downard and rightward into view and scaled down horizontally and vertically to completely cover the red background.
svg-skewx-001 = SVG SVG presentation attribute and angle argument without unit on skewX
  • The skewX transform function must support unit less arguments for angle. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-006 = SVG SVG presentation attribute and skewX with negative, unit less turn
  • The skewX transform function must support negative, unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-011 = SVG SVG presentation attribute and more than full circle skewX with unit less angle
  • The skewX transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-016 = SVG SVG presentation attribute and skewX with scientific numbers on unit less angles
  • The skewX transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-021 = SVG SVG presentation attribute and skewX with scientific numbers with negative exponents for unit less arguments
  • The skewX transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewxy-001 = SVG SVG presentation attribute with skewX and skewY
  • The green rect in this test should be skewed horizontally 45 degrees and vertically 45 degrees to completely cover the red path.
svg-skewy-001 = SVG SVG presentation attribute and angle argument without unit on skewY
  • The skewY transform function must support unit less arguments for angle. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-006 = SVG SVG presentation attribute and skewY with negative, unit less turn
  • The skewY transform function must support negative, unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-011 = SVG SVG presentation attribute and more than full circle skewY with unit less angle
  • The skewY transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-016 = SVG SVG presentation attribute and skewY with scientific numbers on unit less angles
  • The skewY transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-021 = SVG SVG presentation attribute and skewY with scientific numbers with negative exponents for unit less arguments
  • The skewY transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-transform-group-001 = SVG SVG presentation attribute and translate on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated, therefore the child element should be translated to completely cover the red rect.
svg-transform-group-002 = SVG SVG presentation attribute and translateX on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated horizontally, therefore the child element should be translated horizontally to completely cover the red rect.
svg-transform-group-003 = SVG SVG presentation attribute and translateY on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be translated vertically, therefore the child element should be translated vertically to completely cover the red rect.
svg-transform-group-004 = SVG SVG presentation attribute and scale on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled, therefore the child element should be scaled to completely cover the red rect.
svg-transform-group-005 = SVG SVG presentation attribute and scaleX on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled horizontally, therefore the child element should be scaled horizontally to completely cover the red rect.
svg-transform-group-006 = SVG SVG presentation attribute and scaleY on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be scaled vertically, therefore the child element should be scaled vertically to completely cover the red rect.
svg-transform-group-007 = SVG SVG presentation attribute and rotate on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be rotated, therefore the child element should be rotated. The green rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-transform-group-008 = SVG SVG presentation attribute and skewX on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be skewed horizontally, therefore the child element should be skewed horizontally to completely cover the red rect.
svg-transform-group-009 = SVG SVG presentation attribute and skewY on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be skewed vertically, therefore the child element should be skewed vertically to completely cover the red rect.
svg-transform-group-010 = SVG SVG presentation attribute and matrix on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should have the transform matrix applied, therefore the child element should be scaled and translated to completely cover the red rect.
svg-transform-group-011 = SVG SVG presentation attribute and rotate with three arguments on group
  • Transforms on a parent element should be pre-multiplied to a child element. The group of elements should be rotated and translated, therefore the child element should be rotated and translated. The green rect in this test should be rotated by 90 degrees clockwise after the transform origin is translated by 20 pixels in both the vertical and horizontal directions to completely cover the red rect.
svg-transform-nested-001 = SVG SVG presentation attribute and translate on group, translate on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated. Additionally, the child rect should be translated.
svg-transform-nested-002 = SVG SVG presentation attribute, translateX on group, translateX on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated horizontally. Additionally, the child rect should be translated horizontally.
svg-transform-nested-003 = SVG SVG presentation attribute, translateY on group, translateY on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated vertically. Additionally, the child rect should be translated vertically.
svg-transform-nested-004 = SVG SVG presentation attribute, scale on group, scale on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled. Additionally, the child rect should be scaled.
svg-transform-nested-005 = SVG SVG presentation attribute, scaleX on group, scaleX on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be scaled horizontally.
svg-transform-nested-006 = SVG SVG presentation attribute, scaleY on group, scaleY on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled vertically. Additionally, the child rect should be scaled vertically.
svg-transform-nested-007 = SVG SVG presentation attribute, rotate on group, rotate on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be rotated. Additionally, the child rect should be rotated.
svg-transform-nested-008 = SVG SVG presentation attribute, skewX on group, skewX on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed horizontally. Additionally, the child rect should be skewed horizontally.
svg-transform-nested-009 = SVG SVG presentation attribute, skewY on group, skewY on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed vertically. Additionally, the child rect should be skewed vertically.
svg-transform-nested-010 = SVG SVG presentation attribute, matrix on group, matrix on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled and translated. Additionally, the child rect should be scaled and translated.
svg-transform-nested-011 = SVG SVG presentation attribute, translate on group, scale on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated. Additionally, the child rect should be scaled.
svg-transform-nested-012 = SVG SVG presentation attribute, translateX on group, scaleY on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated horizontally. Additionally, the child rect should be scaled vertically.
svg-transform-nested-013 = SVG SVG presentation attribute, translateY on group, skewX on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be translated vertically. Additionally, the child rect should be skewed horizontally.
svg-transform-nested-014 = SVG SVG presentation attribute, scale on group, skewY on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled. Additionally, the child rect should be skewed vertically.
svg-transform-nested-015 = SVG SVG presentation attribute, scaleX on group, rotate on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled horizontally. Additionally, the child rect should be rotated.
svg-transform-nested-016 = SVG SVG presentation attribute, scaleY on group, translateX on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled vertically. Additionally, the child rect should be translated horizontally.
svg-transform-nested-017 = SVG SVG presentation attribute, rotate on group, translateY on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be rotated. Additionally, the child rect should be translated vertically.
svg-transform-nested-018 = SVG SVG presentation attribute, skewX on group, scaleX on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed horizontally. Additionally, the child rect should be scaled horizontally.
svg-transform-nested-019 = SVG SVG presentation attribute, skewY on group, translate on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be skewed vertically. Additionally, the child rect should be translated.
svg-transform-nested-020 = SVG SVG presentation attribute, matrix on group, scaleX on child
  • Transforms on a parent element should be pre-multiplied to transforms on a child element. The group of elements should be scaled and translated. Additionally, the child rect should be scaled horizontally.
svg-transform-nested-021 = SVG SVG presentation attribute, translate on group, scaleY on child1, rotate on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated. Additionally, the first rect should be scaled vertically and the second rect should be rotated.
svg-transform-nested-022 = SVG SVG presentation attribute, translateX on group, scaleX on child1, matrix on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated horizontally. Additionally, the first rect should be scaled horizontally and the second rect should have the transform matrix applied.
svg-transform-nested-023 = SVG SVG presentation attribute, translateY on group, translate on child1, scale on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be translated vertically. Additionally, the first rect should be translated and the second rect should be scaled.
svg-transform-nested-024 = SVG SVG presentation attribute, scale on group, translateX on child1, scaleX on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled. Additionally, the first rect should be translated horizontally and the second rect should be scaled horizontally.
svg-transform-nested-025 = SVG SVG presentation attribute, scaleX on group, translateY on child1, scale on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled horizontally. Additionally, the first rect should be translated vertically and the second rect should be scaled.
svg-transform-nested-026 = SVG SVG presentation attribute, scaleY on group, translate on child1, rotate on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be scaled vertically. Additionally, the first rect should be translated and the second rect should be rotated.
svg-transform-nested-027 = SVG SVG presentation attribute, rotate on group, translateX on child1, scaleY on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should be rotated. Additionally, the first rect should be translated horizontally and the second rect should be scaled vertically.
svg-transform-nested-028 = SVG SVG presentation attribute, matrix on group, scaleY on child1, translateY on child2
  • Transforms on parent elements should be pre-multiplied to transforms on child elements. The group of elements should have the transform matrix applied. Additionally, the first rect should be translated vertically and the second rect should be scaled vertically.
svg-translate-001 = SVG SVG presentation attribute and translate with translation-value arguments without unit
  • The translate transform function must support unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-009 = SVG SVG presentation attribute and translate with translation-value and unit less arguments in scientific notation
  • The translate transform function must support unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-017 = SVG SVG presentation attribute and translate with translation-value unit less arguments in scientific notation with negative exponents
  • The translate transform function must support unit less arguments in scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-025 = SVG SVG presentation attribute and translate with negative translation-value arguments without unit
  • The translate transform function must support negative unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-033 = SVG SVG presentation attribute and translate with translation-value and negative unit less arguments in scientific notation
  • The translate transform function must support negative unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-041 = SVG SVG presentation attribute and translate with translation-value unit less negative arguments in scientific notation with negative exponents
  • The translate transform function must support unit less arguments in negative scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-049 = SVG SVG presentation attribute and translate with one translation-value argument
  • The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction
svg-translate-050 = SVG SVG presentation attribute and translate with one negative translation-value argument
  • The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction
svg-translate-051 = SVG SVG presentation attribute and translate with comma delimited arguments with no spaces
  • The translate transform function arguments can be separated by an optional comma with no spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-052 = SVG SVG presentation attribute and translate with comma delimited arguments with a space in between
  • The translate transform function arguments can be separated by an optional comma with a space in between. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-053 = SVG SVG presentation attribute and translate with arguments separated by multiple spaces
  • The translate transform function arguments can multiple spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-054 = SVG SVG presentation attribute and translate with comma delimited arguments with multiple spaces before the comma
  • The translate transform function arguments can be separated by an optional comma with multiple spaces before the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-055 = SVG SVG presentation attribute and translate with comma delimited arguments with multiple spaces before and after the comma
  • The translate transform function arguments can be separated by an optional comma with multiple spaces before and after the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-multiple-001 = SVG SVG presentation attribute and translation-value arguments with translate applied twice
  • The translate transform function can be called multiple times on the same element. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction
svg-translate-multiple-002 = SVG SVG presentation attribute and translation-value arguments with translate applied twice in both directions
  • The translate transform function can be applied multiple times and in both directions. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction
transform-2d-getcomputedstyle-001 DOM/JSScript transform translate
  • CSS 2D transforms correctly report their matrix via getComputedStyle()
transform-matrix-001 = matrix()/translateX()
  • This tests that translateX() has the same effect as an equivalent matrix().
transform-matrix-002 = matrix()/translateY()
  • This tests that translateY() has the same effect as an equivalent matrix().
transform-matrix-003 = matrix()/translateX(%)
  • This tests that translateX() with a percentage argument has the same effect as an equivalent matrix().
transform-matrix-004 = matrix()/translateY(%)
  • This tests that translateY() with a percentage argument has the same effect as an equivalent matrix().
transform-matrix-005 = ≠ matrix()/skewX()
  • This tests that skewX() has the same effect as an equivalent matrix().
transform-matrix-006 = ≠ matrix()/skewY()
  • This tests that skewY() has the same effect as an equivalent matrix().
transform-matrix-007 = matrix()/scale()
  • This tests that scale() has the same effect as an equivalent matrix().
transform-matrix-008 = ≠ matrix() with non-numeric args
  • This tests that providing length or percentage values as arguments to matrix() is a syntax error.
transform-rotate-001 = ≠ rotate(45deg) rotate(360deg)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-002 = ≠ rotate(45deg) rotate(400grad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-003 = ≠ rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-004 = ≠ rotate(-45deg) rotate(100grad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-005 = ≠ rotate(-135deg) rotate(3.1415926535897932384626433rad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-006 = ≠ rotate(45deg) rotate(1turn)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-007 = ≠ Rotated Simple Box
  • This tests that rotating a simple rectangle by 90 degrees produces another rectangle of the appropriate dimensions.
transform-scale-001 = scale(0.5, 0.5)
  • This tests that scale(0.5, 0.5) scales down a box by a factor of one-half.
transform-scale-002 = scale(0.5)
  • This tests that scale(0.5) scales down a box by a factor of one-half.
transform-scale-percent-001 = scale(50%, 50%)
  • This tests that scale(50%, 75%) is equivalent to scale(0.5, 0.75), because scale() is defined to accept both numbers and percentages.
transform-scalex-001 = scaleX(0.5)
  • This tests that scaleX(0.5) scales down a box's width by a factor of one-half.
transform-scaley-001 = scaleY(0.5)
  • This tests that scaleY(0.5) scales down a box's width by a factor of one-half.
transform-stresstest-001 = Inversion Stress Test
  • This simply applies and then inverts a large number of 2D transform functions, and expects the result to be no transform at all. One extra translateX(100px) is added at the end to ensure that the lack of transform isn't just because the UA parsed it incorrectly, or doesn't support transforms at all.
transform-translate-001 = translate(50px, 50px)
  • This tests that translate(50px, 50px) is the same as relative positioning by 50px toward the bottom right.
transform-translate-002 = translate(50px, 50px) rotate(360deg)
  • This tests that translate(50px, 50px) rotate(360deg) is the same as relative positioning by 50px toward the bottom right.
transform-translate-003 = translate(25px, 25px) translate(25px, 25px)
  • This tests that translate(25px, 25px) translate(25px, 25px) is the same as relative positioning by 50px toward the bottom right.
transform-translate-004 = translate() plus relative positioning
  • This tests that translate(25px, 25px) plus relative positioning 25px to the bottom right is the same as relative positioning by 50px toward the bottom right.
transform-translate-005 = Several Translations Combined
  • This tests that a sequence of positive and negative translations is the same as relative positioning by 50px toward the bottom right.
transform-translatex-001 = translatex(50px)
  • This tests that translatex(50px) is the same as relative positioning by 50px toward the right.
transform-translatex-002 = translatex(50px) rotate(360deg)
  • This tests that translatex(50px) rotate(360deg) is the same as relative positioning by 50px toward the right.
transform-translatex-003 = translatex(25px) translatex(25px)
  • This tests that translatex(25px) translatex(25px) is the same as relative positioning by 50px toward the right.
transform-translatex-004 = translatex() plus relative positioning
  • This tests that translatex(25px) plus relative positioning 25px to the right is the same as relative positioning by 50px toward the right.
transform-translatex-005 = Several X-Translations Combined
  • This tests that a sequence of positive and negative translations is the same as relative positioning by 50px toward the right.
transform-translatex-006 = transform property with translateX function
  • This tests that translateX(50px) translates a box by 50 pixels in the X direction.
transform-translatey-001 = translatey(50px)
  • This tests that translatey(50px) is the same as relative positioning by 50px toward the bottom.
transform-translatey-002 = translatey(50px) rotate(360deg)
  • This tests that translatey(50px) rotate(360deg) is the same as relative positioning by 50px toward the bottom.
transform-translatey-003 = translatey(25px) translatey(25px)
  • This tests that translatey(25px) translatey(25px) is the same as relative positioning by 50px toward the bottom.
transform-translatey-004 = translatey() plus relative positioning
  • This tests that translatey(25px) plus relative positioning 25px to the bottom is the same as relative positioning by 50px toward the bottom.
transform-translatey-005 = Several Y-Translations Combined
  • This tests that a sequence of positive and negative translations is the same as relative positioning by 50px toward the bottom.
transform_translate DOM/JSScript transform translate
  • Check if transform supports translate(100px, 100px)
transform_translate_invalid DOM/JSScript transform translate with invalid translation value
  • Check if transform sets translate(null, null), transform property returns initial value.
transform_translate_max DOM/JSScript transform translate with maximum translation value
  • Check if transform sets translate(INFINITE, INFINITE), transform property returns initial value.
transform_translate_min DOM/JSScript transform translate with minimum translation value
  • Check if transform sets translate(-INFINITE, -INFINITE), transform property returns initial value.
transform_translate_neg DOM/JSScript transform translate with negative translation value
  • Check if transform supports translate(-1px, -1px)
transform_translate_second_omited DOM/JSScript transform translate with second translation value omited
  • Check if transform supports translate(100px)
transform_translate_zero DOM/JSScript transform translate
  • Check if transform supports translate(0, 0)
transforms-rotate-degree-45 = transform property with rotate function and one parameter
  • If the rotate and scale with parameter not provided, greenSquare will not cover redSquare.
transforms-rotate-degree-90 = transform property with rotate function and one parameter
  • If the rotate with parameter not provided, greenRectangle will not cover redRectangle.
transforms-rotate-translate-scale = transform property with scale function and rotate function with one parameter
  • If the rotate and scale with parameter not provided, greenSquare will not cover redSquare.
transforms-skewx = transform property with skew function for X axis.
  • If the skew for X axis not provided, greenSquare will not cover redSquare.
transforms-skewy = transform property with skew function for Y axis.
  • If the skew for Y axis not provided, greenSquare will not cover redSquare.
translate-optional-second-001 = transform property with translate function and one parameter
  • If the second parameter is not provided, it has zero as a value. This transform moves the element by 100 pixels in X direction.
ttwf-reftest-rotate = transform rotate
  • The transform should rotate 180 degrees
svg-matrix-001 = SVG SVG presentation attribute and matrix scaling up horizontally only: 2 0 0 1 0 0
  • The rect in the test should be scaled up horizontally.
svg-matrix-002 = SVG SVG presentation attribute and matrix scaling down horizontally only: 0.5 0 0 1 0 0
  • The rect in the test should be scaled down horizontally.
svg-matrix-003 = SVG SVG presentation attribute and matrix scaling up vertically only: 1 0 0 2 0 0
  • The rect in the test should be scaled up vertically.
svg-matrix-004 = SVG SVG presentation attribute and matrix scaling down vertically only: 1 0 0 0.5 0 0
  • The rect in the test should be scaled down vertically.
svg-matrix-005 = SVG SVG presentation attribute and matrix flipping left and scaling up horizontally: -2 0 0 1 100 0
  • The rect in the test should be flipped left and scaled up horizontally.
svg-matrix-006 = SVG SVG presentation attribute and matrix flipping left and scaling down horizontally: -0.5 0 0 1 100 0
  • The rect in the test should be flipped left and scaled up horizontally.
svg-matrix-007 = SVG SVG presentation attribute and matrix flipping up and scaling up vertically: 1 0 0 -2 0 100
  • The rect in the test should be flipped up and scaled up vertically.
svg-matrix-008 = SVG SVG presentation attribute and matrix flipping up and scaling down vertically: 1 0 0 -0.5 0 100
  • The rect in the test should be flipped up and scaled down vertically.
svg-matrix-009 = SVG SVG presentation attribute and matrix scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 0.2e1 0 0
  • The matrix function must support scientific numbers. The rect in the test should be scaled up horizontally and vertically.
svg-matrix-010 = SVG SVG presentation attribute and matrix flipping up and left and scaling up horizontally and vertically with scientific numbers: -0.2e1 0 0 -0.2e1 100 100
  • The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally and vertically.
svg-matrix-011 = SVG SVG presentation attribute and matrix scaling down horizontally and vertically in scientific numbers with negative exponents: 5e-1 0 0 5e-1 0 0
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be scaled down horizontally and vertically.
svg-matrix-012 = SVG SVG presentation attribute and matrix flipping up and left and scaling down horizontally and vertically with scientific numbers with negative exponents: -5e-1 0 0 -5e-1 100 100
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-013 = SVG SVG presentation attribute and matrix scaling up horizontally and down vertically: 2 0 0 0.5 0 0
  • The rect in the test should be scaled up horizontally and down vertically.
svg-matrix-014 = SVG SVG presentation attribute and matrix scaling down horizontally and up vertically: 0.5 0 0 2 0 0
  • The rect in the test should be scaled down horizontally and up vertically.
svg-matrix-015 = SVG SVG presentation attribute and matrix flipping up and left and scaling up horizontally and down vertically: -2 0 0 -0.5 100 100
  • The rect in the test should be flipped up and left and scaled up horizontally and down vertically.
svg-matrix-016 = SVG SVG presentation attribute and matrix flipping up and left and scaling down horizontally and up vertically: -0.5 0 0 -2 100 100
  • The rect in the test should be flipped up and left and scaled down horizontally and up vertically.
svg-matrix-017 = SVG SVG presentation attribute and matrix flipping up and scaling up horizontally and vertically: 2 0 0 -2 0 100
  • The rect in the test should be flipped up scaled up horizontally and vertically.
svg-matrix-018 = SVG SVG presentation attribute and matrix flipping up and scaling down horizontally and vertically: 0.5 0 0 -0.5 0 100
  • The rect in the test should be flipped up scaled down horizontally and vertically.
svg-matrix-019 = SVG SVG presentation attribute and matrix flipping left and scaling down horizontally and vertically: -0.5 0 0 0.5 100 0
  • The rect in the test should be flipped left and scaled down horizontally and vertically.
svg-matrix-020 = SVG SVG presentation attribute and matrix and flipping up and scaling up horizontally and down vertically: 2 0 0 -0.5 0 100
  • The rect in the test should be flipped up and scaled up horizontally and down vertically.
svg-matrix-021 = SVG SVG presentation attribute and matrix and flipping left and scaling up horizontally and down vertically: -2 0 0 0.5 100 0
  • The rect in the test should be flipped left and scaled up horizontally and down vertically.
svg-matrix-022 = SVG SVG presentation attribute and matrix and flipping up and scaling down horizontally and up vertically: 0.5 0 0 -2 0 100
  • The rect in the test should be flipped up and scaled down horizontally and up vertically.
svg-matrix-023 = SVG SVG presentation attribute and matrix and flipping left and scaling down horizontally and up vertically: -0.5 0 0 2 100 0
  • The rect in the test should be flipped left and scaled down horizontally and up vertically.
svg-matrix-024 = SVG SVG presentation attribute and matrix and flipping left and scaling up horizontally and vertically: -2 0 0 2 100 0
  • The rect in the test should be flipped left and scaled up horizontally and vertically.
svg-matrix-025 = SVG SVG presentation attribute and matrix and flipping left: -1 0 0 1 100 0
  • The rect in the test should be flipped left.
svg-matrix-026 = SVG SVG presentation attribute and matrix and flipping up: 1 0 0 0 -1 0 100
  • The rect in the test should be flipped up.
svg-matrix-027 = SVG SVG presentation attribute and matrix and flipping left and up: -1 0 0 0 -1 100 100
  • The rect in the test should be flipped left and up.
svg-matrix-028 = SVG SVG presentation attribute and matrix and flipping up and scaling up horizontally: 2 0 0 -1 0 100
  • The rect in the test should be flipped up and scaled up horizontally.
svg-matrix-029 = SVG SVG presentation attribute and matrix and flipping up and left and scaling up horizontally with scientific numbers: -2 0 0 -1 10e1 10e1
  • The matrix function must support scientific numbers. The rect in the test should be flipped up and left and scaled up horizontally.
svg-matrix-030 = SVG SVG presentation attribute and matrix and flipping up and scaling down horizontally: 0.5 0 0 -1 0 100
  • The rect in the test should be flipped up and scaled down horizontally.
svg-matrix-031 = SVG SVG presentation attribute and matrix and flipping up and left and scaling down horizontally: -0.5 0 0 -1 100 100
  • The rect in the test should be flipped up and left and scaled down horizontally.
svg-matrix-032 = SVG SVG presentation attribute and matrix and flipping left and scaling up vertically: -1 0 0 2 100 0
  • The rect in the test should be flipped left scaled up vertically.
svg-matrix-033 = SVG SVG presentation attribute and matrix and flipping up and left and scaling up vertically with scientific numbers with negative exponents: -1 0 0 -2 1000e-1 1000e-1
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped up and left scaled up vertically.
svg-matrix-034 = SVG SVG presentation attribute and matrix and flipping left and scaling down vertically: -1 0 0 0.5 100 0
  • The rect in the test should be flipped left scaled down vertically.
svg-matrix-035 = SVG SVG presentation attribute and matrix and flipping left and up and scaling down vertically: -1 0 0 -0.5 100 100
  • The rect in the test should be flipped left and up scaled down vertically.
svg-matrix-036 = SVG SVG presentation attribute and matrix and skewing right: 1 0 1 1 0 0
  • The rect in the test should skewed right horizontally.
svg-matrix-037 = SVG SVG presentation attribute and matrix and skewing down: 1 1 0 1 100 0
  • The rect in the test should skewed down horizontally.
svg-matrix-038 = SVG SVG presentation attribute and matrix and skewing left: 1 0 -1 100 50
  • The rect in the test should be skewed left horinzontally.
svg-matrix-039 = SVG SVG presentation attribute and matrix and skewing up: 1 -1 0 1 50 100
  • The rect in the test should be skewed up vertically.
svg-matrix-040 = SVG SVG presentation attribute and matrix and skewing up and left with scientific numbers: 1 -0.05e1 -0.05e1 1 100 50
  • The matrix function must support scientific numbers. The rect in the test should be skewed up vertically and left horizontally.
svg-matrix-041 = SVG SVG presentation attribute and matrix and skewing down and right with scientific numbers: 1 0.05e1 0.05e1 1 50 0
  • The matrix function must support scientific numbers. The rect in the test should be skewed down vertically and right horizontally.
svg-matrix-042 = SVG SVG presentation attribute and matrix and skewing down and left: 1 -0.5 0.5 1 50 50
  • The rect in the test should be skewed down vertically and left horizontally.
svg-matrix-043 = SVG SVG presentation attribute and matrix and skewing up and right: 1 0.5 -0.5 1 100 0
  • The rect in the test should be skewed up vertically and right horizontally.
svg-matrix-044 = SVG SVG presentation attribute and matrix and scaling up and skewing down and right: 2 0.5 0.5 2 50 0
  • The rect in the test should be scaled up vertically and horizontally and skewed down vertically and right horizontally.
svg-matrix-045 = SVG SVG presentation attribute and matrix and scaling down and skewing up and left: 0.75 -0.5 -0.5 0.75 190 150
  • The rect in the test should be scaled down vertically and horizontally and skewed up vertically and left horizontally.
svg-matrix-046 = SVG SVG presentation attribute and matrix and flipping left, scaling up, and skewing down and right with scientific numbers with negative exponents: -2 5e-1 5e-1 2 250 0
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped left, scaled up, and skewed down vertically and right horizontally.
svg-matrix-047 = SVG SVG presentation attribute and matrix and flipping up, scaling down, and skewing up and left with scientific numbers with negative exponents: 0.5 -5e-1 0 -5e-1 250 100
  • The matrix function must support scientific numbers with negative exponents. The rect in the test should be flipped down, scaled down, and skewed up vertically and left horizontally.
svg-matrix-048 = SVG SVG presentation attribute and matrix and flipping up and left, scaling up horizontally and down vertically, and skewing right and down: -2 0.25 0.25 -0.5 200 200
  • The rect in the test should be flipped up and left, scaled up horizontally and down vertically, and skewed right and down.
svg-matrix-049 = SVG SVG presentation attribute and matrix function arguments separated by commas and no spaces
  • The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-050 = SVG SVG presentation attribute and matrix function arguments separated by commas with spaces before the comma
  • The matrix function must support arguments separated by commas with spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-051 = SVG SVG presentation attribute and matrix function arguments separated by commas with spaces after the comma
  • The matrix function must support arguments separated by commas with spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-052 = SVG SVG presentation attribute and matrix function arguments separated by commas with spaces before and after the comma
  • The matrix function must support arguments separated by commas with spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-053 = SVG SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before the comma
  • The matrix function must support arguments separated by commas with multiple spaces before the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-054 = SVG SVG presentation attribute and matrix function arguments separated by commas with multiple spaces after the comma
  • The matrix function must support arguments separated by commas with multiple spaces after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-055 = SVG SVG presentation attribute and matrix function arguments separated by commas with multiple spaces before and after the comma
  • The matrix function must support arguments separated by commas with multiple spaces before and after the commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-056 = SVG SVG presentation attribute and matrix function arguments separated by multiple spaces
  • The matrix function must support arguments separated by multiple spaces. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-057 = SVG SVG presentation attribute and matrix function arguments separated by a mix of spaces and commas
  • The matrix function must support arguments separated by a mix of spaces and commas. The rect in the test should be flipped up and left and scaled down horizontally and vertically.
svg-matrix-058 = SVG SVG presentation attribute and matrix function with invalid 'a' value
  • The matrix function does not support percentage values. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-059 = SVG SVG presentation attribute and matrix function with invalid 'b' value
  • The matrix function does not support degree units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-060 = SVG SVG presentation attribute and matrix function with invalid 'c' value
  • The matrix function does not support gradian units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-061 = SVG SVG presentation attribute and matrix function with invalid 'd' value
  • The matrix function does not support percentage units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-062 = SVG SVG presentation attribute and matrix function with invalid 'e' value
  • The matrix function does not support px units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-063 = SVG SVG presentation attribute and matrix function with invalid 'f' value
  • The matrix function does not support pt units. If one argument is invalid, no transform should take place so the rect in this test should remain the same.
svg-matrix-064 = SVG SVG presentation attribute and matrix function with invalid 'a' value with another transform function
  • The matrix function does not support percentage values. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-065 = SVG SVG presentation attribute and matrix function with invalid 'b' value with another transform function
  • The matrix function does not support radian units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-066 = SVG SVG presentation attribute and matrix function with invalid 'c' value with another transform function
  • The matrix function does not support turn units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-067 = SVG SVG presentation attribute and matrix function with invalid 'd' value with another transform function
  • The matrix function does not support percentage units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-068 = SVG SVG presentation attribute and matrix function with invalid 'e' value with another transform function
  • The matrix function does not support pc units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
svg-matrix-069 = SVG SVG presentation attribute and matrix function with invalid 'f' value with another transform function
  • The matrix function does not support mm units. If one argument is invalid in one function, none of the transforms in the function list should happen. The rect in this test should remain the same.
transform-matrix-001 = matrix()/translateX()
  • This tests that translateX() has the same effect as an equivalent matrix().
transform-matrix-002 = matrix()/translateY()
  • This tests that translateY() has the same effect as an equivalent matrix().
transform-matrix-003 = matrix()/translateX(%)
  • This tests that translateX() with a percentage argument has the same effect as an equivalent matrix().
transform-matrix-004 = matrix()/translateY(%)
  • This tests that translateY() with a percentage argument has the same effect as an equivalent matrix().
transform-matrix-005 = ≠ matrix()/skewX()
  • This tests that skewX() has the same effect as an equivalent matrix().
transform-matrix-006 = ≠ matrix()/skewY()
  • This tests that skewY() has the same effect as an equivalent matrix().
transform-matrix-007 = matrix()/scale()
  • This tests that scale() has the same effect as an equivalent matrix().
transform-matrix-008 = ≠ matrix() with non-numeric args
  • This tests that providing length or percentage values as arguments to matrix() is a syntax error.
rotate_45deg = rotateY with perspective produces a trapezoid
  • Rotate 45 degree in y axis
svg-rotate-angle-45-001 = SVG SVG presentation attribute and angle argument without unit on rotate
  • The rotate transform function must support unit less arguments for angle. The green rect in the test should be rotated by 45 degrees clockwise to completely cover the red path.
svg-rotate-angle-45-011 = SVG SVG presentation attribute and more than full circle rotate with unit less angle
  • The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.
svg-rotate-angle-45-022 = SVG SVG presentation attribute and rotate with scientific numbers with negative exponents for arguments in degree
  • The rotate transform function must support scientific numbers with negative exponents for angle arguments in degree. The green rect in this test should be rotated by 45 degrees clockwise to completely cover the red path.
svg-rotate-angle-90-001 = SVG SVG presentation attribute and angle argument without unit on rotate
  • The rotate transform function must support unit less arguments for angle. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-006 = SVG SVG presentation attribute and rotate with negative, unit less turn
  • The rotate transform function must support negative unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-011 = SVG SVG presentation attribute and more than full circle rotate with unit less angle
  • The rotate transform function must support 'modulo whole circle' for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-016 = SVG SVG presentation attribute and rotate with scientific numbers on unit less angles
  • The rotate transform function must support scientific numbers for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
svg-rotate-angle-90-021 = SVG SVG presentation attribute and rotate with scientific numbers with negative exponents for unit less arguments
  • The rotate transform function must support scientific numbers with negative exponents for unit less angle arguments. The rect in this test should be rotated by 90 degrees clockwise to completely cover the red rect.
transform-rotate-001 = ≠ rotate(45deg) rotate(360deg)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-002 = ≠ rotate(45deg) rotate(400grad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-003 = ≠ rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-004 = ≠ rotate(-45deg) rotate(100grad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-005 = ≠ rotate(-135deg) rotate(3.1415926535897932384626433rad)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-006 = ≠ rotate(45deg) rotate(1turn)
  • This is part of a series of tests that check that various combinations of rotate() with different units are equivalent to rotate(45deg).
transform-rotate-007 = ≠ Rotated Simple Box
  • This tests that rotating a simple rectangle by 90 degrees produces another rectangle of the appropriate dimensions.
css3-transform-scale = transform property with scale function
  • box width and height will be twice larger if transform scale(2) applied
css3-transform-scale-002 = transform property with scale function
  • box width and height will be twice larger if transform scale(2) applied
svg-scale-001 = SVG SVG presentation attribute and scale 0.5 with only one parameter specified
  • If the second parameter of the scale function is not provided, it is takes a value equal to the first. The red rect in this test should be scaled down 0.5 vertically and horizontally to be completely hidden by the green rect.
svg-scale-002 = SVG SVG presentation attribute and scale 1.5 with only one parameter specified
  • If the second parameter is not provided, it is takes a value equal to the first. The green rect in this test should be scaled up 1.5 vertically and horizontally to completely cover the red rect.
svg-scale-003 = SVG SVG presentation attribute and scale 2 with only one parameter specified
  • If the second parameter is not provided, it is takes a value equal to the first. The green rect in this test should be scaled up 2 vertically and horizontally to completely cover the red rect.
svg-scale-004 = SVG SVG presentation attribute and scale 0.5 with parameters separated by commas + no whitespace
  • Parameters in the scale function can be separated by commas and no whitespace. The red rect in this test should be scaled down 0.5 to completely cover the green rect.
svg-scale-006 = SVG SVG presentation attribute and scale horizontally 0.5 and vertically 1.5
  • The green rect in the test should be scaled down horizontally and up vertically to form a square and completely cover the red rect.
svg-scale-007 = SVG SVG presentation attribute and scale horizontally 1.5 and vertically 0.5
  • The green rect in the test should be scaled up horizontally and down vertically to form a square completely cover the red rect.
svg-scale-008 = SVG SVG presentation attribute and scale 0.5 on the g element
  • The group containing the red rect in this test should be scaled down 0.5 to be completely hidden behind the green rect.
svg-scale-009 = SVG SVG presentation attribute and scale 0.5 on the g element and scale 0.5 on the rect element
  • The group containing the red rect in this test should be scaled down 0.5 and the red rect should be scaled down again 0.5 to be completely hidden behind the green rect.
svg-scale-010 = SVG SVG presentation attribute and scale -0.5 with only one parameter specified
  • Scaling by a negative value should flip the element and if the second parameter of the scale function is not provided, it is takes a value equal to the first. The green rect in this test should be flipped downward and rightward into view and scaled down 0.5 horizontally and vertically to completely cover the red background.
svg-scale-011 = SVG SVG presentation attribute and scale -2 with only one parameter specified
  • Scaling by a negative value should flip the element and if the second parameter of the scale function is not provided, it is takes a value equal to the first. The green rect in this test flipped rightward and downard into view and scaled up 2 to completely cover the red background.
svg-scale-012 = SVG SVG presentation attribute and scale -0.5 with parameters separated by commas + no whitespace
  • Scaling by a negative value should flip the element and parameters to the scale function can be separated by commas with no whitespace. The green rect in this test should be flipped downward and rightward into view right scaled down 0.5 to to completely cover the red background.
svg-scale-013 = SVG SVG presentation attribute and scale horizontally -0.5 and vertically -1.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped downward and rightward into view and scaled down horizontally and up vertically to completely cover the red background.
svg-scale-014 = SVG SVG presentation attribute and scale horizontally -1.5 and vertically -0.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped downward and rightward into view and scaled up horizontally and down vertically to completely cover the red background.
svg-scale-015 = SVG SVG presentation attribute and scale horizontally -0.5 and vertically 1.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped rightward into view and scaled down horizontally and up vertically to completely cover the red background.
svg-scale-016 = SVG SVG presentation attribute and scale horizontally 1.5 and vertically -0.5
  • Scaling by a negative value should flip the element. The green rect in this test should be flipped downward into view and scaled up horizontally and down vertically to completely cover the red background.
svg-scale-017 = SVG SVG presentation attribute and scale -0.5 on the g element
  • Scaling by a negative value should flip the element. The group containing the green rect in this test should be flipped downard and rightward into view and scaled down horizontally and vertically to completely cover the red background.
transform-scale-001 = scale(0.5, 0.5)
  • This tests that scale(0.5, 0.5) scales down a box by a factor of one-half.
transform-scale-002 = scale(0.5)
  • This tests that scale(0.5) scales down a box by a factor of one-half.
transform-scale-percent-001 = scale(50%, 50%)
  • This tests that scale(50%, 75%) is equivalent to scale(0.5, 0.75), because scale() is defined to accept both numbers and percentages.
scalex = test scale x
  • scale x 2
transform-scalex-001 = scaleX(0.5)
  • This tests that scaleX(0.5) scales down a box's width by a factor of one-half.
scaley = test scale y
  • scale y 2
transform-scaley-001 = scaleY(0.5)
  • This tests that scaleY(0.5) scales down a box's width by a factor of one-half.
svg-skewx-001 = SVG SVG presentation attribute and angle argument without unit on skewX
  • The skewX transform function must support unit less arguments for angle. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-006 = SVG SVG presentation attribute and skewX with negative, unit less turn
  • The skewX transform function must support negative, unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-011 = SVG SVG presentation attribute and more than full circle skewX with unit less angle
  • The skewX transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-016 = SVG SVG presentation attribute and skewX with scientific numbers on unit less angles
  • The skewX transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewx-021 = SVG SVG presentation attribute and skewX with scientific numbers with negative exponents for unit less arguments
  • The skewX transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be skewed horizontally 45 degrees to completely cover the red path.
svg-skewxy-001 = SVG SVG presentation attribute with skewX and skewY
  • The green rect in this test should be skewed horizontally 45 degrees and vertically 45 degrees to completely cover the red path.
svg-skewy-001 = SVG SVG presentation attribute and angle argument without unit on skewY
  • The skewY transform function must support unit less arguments for angle. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-006 = SVG SVG presentation attribute and skewY with negative, unit less turn
  • The skewY transform function must support negative, unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-011 = SVG SVG presentation attribute and more than full circle skewY with unit less angle
  • The skewY transform function must support 'modulo whole circle' for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-016 = SVG SVG presentation attribute and skewY with scientific numbers on unit less angles
  • The skewY transform function must support scientific numbers for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
svg-skewy-021 = SVG SVG presentation attribute and skewY with scientific numbers with negative exponents for unit less arguments
  • The skewY transform function must support scientific numbers with negative exponents for unit less angle arguments. The green rect in this test should be skewed vertically 45 degrees to completely cover the red path.
css-transform-animate-translate-implied-y = Animating between translates where one has an implied `y` value
  • This tests that translate(x) is animated as if it were translate(x, 0px)
svg-translate-001 = SVG SVG presentation attribute and translate with translation-value arguments without unit
  • The translate transform function must support unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-009 = SVG SVG presentation attribute and translate with translation-value and unit less arguments in scientific notation
  • The translate transform function must support unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-017 = SVG SVG presentation attribute and translate with translation-value unit less arguments in scientific notation with negative exponents
  • The translate transform function must support unit less arguments in scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-025 = SVG SVG presentation attribute and translate with negative translation-value arguments without unit
  • The translate transform function must support negative unit less arguments for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-033 = SVG SVG presentation attribute and translate with translation-value and negative unit less arguments in scientific notation
  • The translate transform function must support negative unit less arguments in scientific numbers for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-041 = SVG SVG presentation attribute and translate with translation-value unit less negative arguments in scientific notation with negative exponents
  • The translate transform function must support unit less arguments in negative scientific numbers with negative exponents for translation-value. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-049 = SVG SVG presentation attribute and translate with one translation-value argument
  • The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction
svg-translate-050 = SVG SVG presentation attribute and translate with one negative translation-value argument
  • The translate transform function takes tx as the first translation-value parameter and ty is the optional second translation-value parameter. If ty is not provided, ty has zero as a value. The rect in the test should be moved 50 pixels in the X direction
svg-translate-051 = SVG SVG presentation attribute and translate with comma delimited arguments with no spaces
  • The translate transform function arguments can be separated by an optional comma with no spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-052 = SVG SVG presentation attribute and translate with comma delimited arguments with a space in between
  • The translate transform function arguments can be separated by an optional comma with a space in between. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-053 = SVG SVG presentation attribute and translate with arguments separated by multiple spaces
  • The translate transform function arguments can multiple spaces. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-054 = SVG SVG presentation attribute and translate with comma delimited arguments with multiple spaces before the comma
  • The translate transform function arguments can be separated by an optional comma with multiple spaces before the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-055 = SVG SVG presentation attribute and translate with comma delimited arguments with multiple spaces before and after the comma
  • The translate transform function arguments can be separated by an optional comma with multiple spaces before and after the comma. The rect in the test should be moved 50 pixels in the X direction and 50 pixels in the Y direction
svg-translate-multiple-001 = SVG SVG presentation attribute and translation-value arguments with translate applied twice
  • The translate transform function can be called multiple times on the same element. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction
svg-translate-multiple-002 = SVG SVG presentation attribute and translation-value arguments with translate applied twice in both directions
  • The translate transform function can be applied multiple times and in both directions. The rect in the test should be moved 50 pixels in the X direction and 75 pixels in the Y direction
transform-translate-001 = translate(50px, 50px)
  • This tests that translate(50px, 50px) is the same as relative positioning by 50px toward the bottom right.
transform-translate-002 = translate(50px, 50px) rotate(360deg)
  • This tests that translate(50px, 50px) rotate(360deg) is the same as relative positioning by 50px toward the bottom right.
transform-translate-003 = translate(25px, 25px) translate(25px, 25px)
  • This tests that translate(25px, 25px) translate(25px, 25px) is the same as relative positioning by 50px toward the bottom right.
transform-translate-004 = translate() plus relative positioning
  • This tests that translate(25px, 25px) plus relative positioning 25px to the bottom right is the same as relative positioning by 50px toward the bottom right.
transform-translate-005 = Several Translations Combined
  • This tests that a sequence of positive and negative translations is the same as relative positioning by 50px toward the bottom right.
translate = test translate
  • translate x, y
transform-translatex-001 = translatex(50px)
  • This tests that translatex(50px) is the same as relative positioning by 50px toward the right.
transform-translatex-002 = translatex(50px) rotate(360deg)
  • This tests that translatex(50px) rotate(360deg) is the same as relative positioning by 50px toward the right.
transform-translatex-003 = translatex(25px) translatex(25px)
  • This tests that translatex(25px) translatex(25px) is the same as relative positioning by 50px toward the right.
transform-translatex-004 = translatex() plus relative positioning
  • This tests that translatex(25px) plus relative positioning 25px to the right is the same as relative positioning by 50px toward the right.
transform-translatex-005 = Several X-Translations Combined
  • This tests that a sequence of positive and negative translations is the same as relative positioning by 50px toward the right.
transform-translatey-001 = translatey(50px)
  • This tests that translatey(50px) is the same as relative positioning by 50px toward the bottom.
transform-translatey-002 = translatey(50px) rotate(360deg)
  • This tests that translatey(50px) rotate(360deg) is the same as relative positioning by 50px toward the bottom.
transform-translatey-003 = translatey(25px) translatey(25px)
  • This tests that translatey(25px) translatey(25px) is the same as relative positioning by 50px toward the bottom.
transform-translatey-004 = translatey() plus relative positioning
  • This tests that translatey(25px) plus relative positioning 25px to the bottom is the same as relative positioning by 50px toward the bottom.
transform-translatey-005 = Several Y-Translations Combined
  • This tests that a sequence of positive and negative translations is the same as relative positioning by 50px toward the bottom.
+ 9.2 Transform function primitives and derivatives