CSS Transforms Module Level 1 CR Test Suite

The transform-origin Property (110 tests)

Test Refs Flags Info
+ 5 The transform-origin Property
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.
svg-origin-length-001 = SVG SVG presentation attribute transform-origin with length values - default value
  • The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box.
svg-origin-length-002 = SVG SVG presentation attribute transform-origin with length values - 0 0
  • The transform-origin should be 0 0 by default, so the current value shouldn't make a difference.
svg-origin-length-003 = SVG SVG presentation attribute transform-origin with length values - 100px 0
  • The transform-origin should translate the origin by (100,0) temporarily.
svg-origin-length-004 = SVG SVG presentation attribute transform-origin with length values - 0 100px
  • The transform-origin should translate the origin by (0,100px) temporarily.
svg-origin-length-005 = SVG SVG presentation attribute transform-origin with length values - 50px 50px
  • The transform-origin should translate the origin by (50px,50px) temporarily.
svg-origin-length-006 = SVG SVG presentation attribute transform-origin with length values - 100px 0
  • The transform-origin should translate the origin by (100,0) temporarily and must support unit less values for presentation attributes.
svg-origin-length-007 = SVG SVG presentation attribute transform-origin with length values - 0 100
  • The transform-origin should translate the origin by (0,100px) temporarily and must support unit less values for presentation attributes.
svg-origin-length-008 = SVG SVG presentation attribute transform-origin with length values - 50 50
  • The transform-origin should translate the origin by (50px,50px) temporarily and must support unit less values for presentation attributes.
svg-origin-length-cm-001 = SVG SVG presentation attribute transform-origin with length values in cm - default value
  • The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box.
svg-origin-length-cm-002 = SVG SVG presentation attribute transform-origin with length values in cm - 0 0
  • The transform-origin should be 0 0 by default, so the current value shouldn't make a difference.
svg-origin-length-cm-003 = SVG SVG presentation attribute transform-origin with length values - 2cm 0
  • The transform-origin should translate the origin by (2cm,0) temporarily.
svg-origin-length-cm-004 = SVG SVG presentation attribute transform-origin with length values - 0 2cm
  • The transform-origin should translate the origin by (0,2cm) temporarily.
svg-origin-length-cm-005 = SVG SVG presentation attribute transform-origin with length values - 1cm 1cm
  • The transform-origin should translate the origin by (1cm,1cm) temporarily.
svg-origin-length-in-001 = SVG SVG presentation attribute transform-origin with length values in inch - default value
  • The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box.
svg-origin-length-in-002 = SVG SVG presentation attribute transform-origin with length values in inch - 0 0
  • The transform-origin should be 0 0 by default, so the current value shouldn't make a difference.
svg-origin-length-in-003 = SVG SVG presentation attribute transform-origin with length values - 1.5in 0
  • The transform-origin should translate the origin by (1.5in,0) temporarily.
svg-origin-length-in-004 = SVG SVG presentation attribute transform-origin with length values - 0 1.5in
  • The transform-origin should translate the origin by (0,1.5in) temporarily.
svg-origin-length-in-005 = SVG SVG presentation attribute transform-origin with length values - 0.75in 0.75in
  • The transform-origin should translate the origin by (0.75in, 0.75in) temporarily.
svg-origin-length-pt-001 = SVG SVG presentation attribute transform-origin with length values in pt - default value
  • The transform-origin should be 0 0 by default for SVG elements without associated CSS Layout Box.
svg-origin-length-pt-002 = SVG SVG presentation attribute transform-origin with length values in pt - 0 0
  • The transform-origin should be 0 0 by default, so the current value shouldn't make a difference.
svg-origin-length-pt-003 = SVG SVG presentation attribute transform-origin with length values - 80pt 0
  • The transform-origin should translate the origin by (80pt,0) temporarily.
svg-origin-length-pt-004 = SVG SVG presentation attribute transform-origin with length values - 0 80pt
  • The transform-origin should translate the origin by (0,80pt) temporarily.
svg-origin-length-pt-005 = SVG SVG presentation attribute transform-origin with length values - 40pt 40pt
  • The transform-origin should translate the origin by (40pt,40pt) temporarily.
svg-origin-relative-length-001 = SVG SVG presentation attribute transform-origin, first value absolute value and missing second argument
  • If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75
svg-origin-relative-length-002 = SVG SVG presentation attribute transform-origin, first value 'center' value and missing second argument
  • If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75
svg-origin-relative-length-003 = SVG SVG presentation attribute transform-origin, first value '50%' value and missing second argument
  • If only one value is specified, the second value is assumed to be 'center'. The rect should be rotated around its center point at 75,75
svg-origin-relative-length-004 = SVG SVG presentation attribute transform-origin, '50% 50%'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-005 = SVG SVG presentation attribute transform-origin, '50% center'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-006 = SVG SVG presentation attribute transform-origin, 'center 50%'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-007 = SVG SVG presentation attribute transform-origin, 'center center'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-008 = SVG SVG presentation attribute transform-origin, '75 center'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-009 = SVG SVG presentation attribute transform-origin, '75 50%'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-010 = SVG SVG presentation attribute transform-origin, 'center 75'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-011 = SVG SVG presentation attribute transform-origin, '50% 75'
  • The rect should be rotated around its center point at 75,75
svg-origin-relative-length-012 = SVG SVG presentation attribute transform-origin, '0'
  • The initial point of origin gets translated to 0,75. Since the second argument is missing, it is set to 'center'.
svg-origin-relative-length-013 = SVG SVG presentation attribute transform-origin, '150'
  • The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'.
svg-origin-relative-length-014 = SVG SVG presentation attribute transform-origin, '100%'
  • The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'.
svg-origin-relative-length-015 = SVG SVG presentation attribute transform-origin, 'right'
  • The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'.
svg-origin-relative-length-016 = SVG SVG presentation attribute transform-origin, 'left'
  • The initial point of origin gets translated to 75,75. Since the second argument is missing, it is set to 'center'.
svg-origin-relative-length-017 = SVG SVG presentation attribute transform-origin, '25%'
  • If the second argument is missing, it is assumed to be center. The initial point of origin gets translated to 37.5,75.
svg-origin-relative-length-018 = SVG SVG presentation attribute transform-origin, 'top'
  • The initial point of origin gets translated to 75,0. A single argument 'top' gets interpreted as 'center top'.
svg-origin-relative-length-019 = SVG SVG presentation attribute transform-origin, 'bottom'
  • The initial point of origin gets translated to 75,150. A single argument 'bottom' gets interpreted as 'center bottom'.
svg-origin-relative-length-020 = SVG SVG presentation attribute transform-origin, '0% 0%'
  • The initial point of origin gets translated to 75,75 since '0% 0%' is relative to the bounding box of the object.
svg-origin-relative-length-021 = SVG SVG presentation attribute transform-origin, 'top right'
  • The initial point of origin gets translated to 225,75 since 'top right' is relative to the bounding box of the object.
svg-origin-relative-length-022 = SVG SVG presentation attribute transform-origin, 'top left'
  • The initial point of origin gets translated to 75,75 since 'top left' is relative to the bounding box of the object.
svg-origin-relative-length-023 = SVG SVG presentation attribute transform-origin, 'top center'
  • The initial point of origin gets translated to 150,75 since 'top center' is relative to the bounding box of the object.
svg-origin-relative-length-024 = SVG SVG presentation attribute transform-origin, 'bottom left'
  • The initial point of origin gets translated to 75,225 since 'bottom left' is relative to the bounding box of the object.
svg-origin-relative-length-025 = SVG SVG presentation attribute transform-origin, 'bottom center'
  • The initial point of origin gets translated to 150,225 since 'bottom center' is relative to the bounding box of the object.
svg-origin-relative-length-026 = SVG SVG presentation attribute transform-origin, 'bottom right'
  • The initial point of origin gets translated to 225,225 since 'bottom right' is relative to the bounding box of the object.
svg-origin-relative-length-027 = SVG SVG presentation attribute transform-origin, 'right top'
  • The initial point of origin gets translated to 225,75 since 'right top' is relative to the bounding box of the object.
svg-origin-relative-length-028 = SVG SVG presentation attribute transform-origin, 'right center'
  • The initial point of origin gets translated to 225,150 since 'right center' is relative to the bounding box of the object.
svg-origin-relative-length-029 = SVG SVG presentation attribute transform-origin, 'right bottom'
  • The initial point of origin gets translated to 225,225 since 'right bottom' is relative to the bounding box of the object.
svg-origin-relative-length-030 = SVG SVG presentation attribute transform-origin, 'right 75'
  • The initial point of origin gets translated to 225,75 since 'right 75' is relative to the bounding box of the object.
svg-origin-relative-length-031 = SVG SVG presentation attribute transform-origin, 'right 0%'
  • The initial point of origin gets translated to 225,75 since 'right 0%' is relative to the bounding box of the object.
svg-origin-relative-length-032 = SVG SVG presentation attribute transform-origin, 'right 100%'
  • The initial point of origin gets translated to 225,225 since 'right 100%' is relative to the bounding box of the object.
svg-origin-relative-length-033 = SVG SVG presentation attribute transform-origin, 'left top'
  • The initial point of origin gets translated to 75,75 since 'left top' is relative to the bounding box of the object.
svg-origin-relative-length-034 = SVG SVG presentation attribute transform-origin, 'left center'
  • The initial point of origin gets translated to 75,150 since 'left center' is relative to the bounding box of the object.
svg-origin-relative-length-035 = SVG SVG presentation attribute transform-origin, 'left bottom'
  • The initial point of origin gets translated to 75,225 since 'left bottom' is relative to the bounding box of the object.
svg-origin-relative-length-036 = SVG SVG presentation attribute transform-origin, 'left 75'
  • The initial point of origin gets translated to 75,75 since 'left 75' is relative to the bounding box of the object.
svg-origin-relative-length-037 = SVG SVG presentation attribute transform-origin, 'left 0%'
  • The initial point of origin gets translated to 75,75 since 'left 0%' is relative to the bounding box of the object.
svg-origin-relative-length-038 = SVG SVG presentation attribute transform-origin, 'left 100%'
  • The initial point of origin gets translated to 75,225 since 'left 100%' is relative to the bounding box of the object.
svg-origin-relative-length-039 = SVG SVG presentation attribute transform-origin, 'center top'
  • The initial point of origin gets translated to 150,75 since 'center top' is relative to the bounding box of the object.
svg-origin-relative-length-040 = SVG SVG presentation attribute transform-origin, 'center bottom'
  • The initial point of origin gets translated to 150,225 since 'center bottom' is relative to the bounding box of the object.
svg-origin-relative-length-041 = SVG SVG presentation attribute transform-origin, 'center left'
  • The initial point of origin gets translated to 75,150 since 'center left' is relative to the bounding box of the object.
svg-origin-relative-length-042 = SVG SVG presentation attribute transform-origin, 'center right'
  • The initial point of origin gets translated to 225,150 since 'center right' is relative to the bounding box of the object.
svg-origin-relative-length-043 = SVG SVG presentation attribute transform-origin, 'center 100%'
  • The initial point of origin gets translated to 150,225 since 'center 100%' is relative to the bounding box of the object.
svg-origin-relative-length-044 = SVG SVG presentation attribute transform-origin, '0 center'
  • The initial point of origin gets translated to 0,150 since '0 center' is relative to the bounding box of the object.
svg-origin-relative-length-045 = SVG SVG presentation attribute transform-origin, 'center 0%'
  • The initial point of origin gets translated to 150,75 since 'center 0%' is relative to the bounding box of the object.
svg-origin-relative-length-046 = SVG SVG presentation attribute transform-origin, 'center 0'
  • The initial point of origin gets translated to 150,0 since 'center 0' is relative to the bounding box of the object.
svg-origin-relative-length-invalid-001 = SVG SVG presentation attribute transform-origin, invalid arguments 'top 100%'
  • Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0
svg-origin-relative-length-invalid-002 = SVG SVG presentation attribute transform-origin, invalid arguments 'bottom 100%'
  • Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0
svg-origin-relative-length-invalid-003 = SVG SVG presentation attribute transform-origin, invalid arguments 'top 150'
  • Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0
svg-origin-relative-length-invalid-004 = SVG SVG presentation attribute transform-origin, invalid arguments 'bottom 150'
  • Spec does not allow first value to be vertical if at least one of the first two passed values are not keywords. Fallback to 0,0
svg-origin-relative-length-invalid-005 = SVG SVG presentation attribute transform-origin, invalid arguments 'top top'
  • Spec does not allow two vertical values. Fallback to 0,0
svg-origin-relative-length-invalid-006 = SVG SVG presentation attribute transform-origin, invalid arguments 'bottom bottom'
  • Spec does not allow two vertical values. Fallback to 0,0
svg-origin-relative-length-invalid-007 = SVG SVG presentation attribute transform-origin, invalid arguments 'top bottom'
  • Spec does not allow two vertical values. Fallback to 0,0
svg-origin-relative-length-invalid-008 = SVG SVG presentation attribute transform-origin, invalid arguments 'bottom top'
  • Spec does not allow two vertical values. Fallback to 0,0
svg-origin-relative-length-invalid-009 = SVG SVG presentation attribute transform-origin, invalid arguments 'left left'
  • Spec does not allow two horizontal values. Fallback to 0,0
svg-origin-relative-length-invalid-010 = SVG SVG presentation attribute transform-origin, invalid arguments 'left right'
  • Spec does not allow two horizontal values. Fallback to 0,0
svg-origin-relative-length-invalid-011 = SVG SVG presentation attribute transform-origin, invalid arguments 'right right'
  • Spec does not allow two horizontal values. Fallback to 0,0
svg-origin-relative-length-invalid-012 = SVG SVG presentation attribute transform-origin, invalid arguments 'right left'
  • Spec does not allow two horizontal values. Fallback to 0,0
transform-inherit-origin-001 = "transform-origin: inherit" and em
  • The 'transform-origin' property's computed value (which is what's inherited if 'inherit' is specified) is defined as "For <length> the absolute value, otherwise a percentage." In this test, a parent element has a transform-origin of '5em 10em' with a font-size of 10px, and the child has "transform-origin: inherit". Since the relative length of 5em is converted to an absolute length before inheritance, the transform-origin should be at the bottom of the child, 50px 100px. The 180deg rotation should thus effectively move the child down 100px. An implementation that incorrectly inherited the transform-origin value before converting to an absolute length would treat it as 100px 200px, since the child has a font-size of 20px, so it would effectively translate the child 100px right and 300px down.
transform-inherit-origin-002 = "transform-origin: inherit" and percentages
  • The 'transform-origin' property's computed value (which is what's inherited if 'inherit' is specified) is defined as "For <length> the absolute value, otherwise a percentage." In this test, a parent element has a transform-origin of '50% 100%' with a height/width of 50px, and the child has "transform-origin: inherit" with a height/width of 100px. Since the transform-origin is a percentage, it's inherited before it gets resolved to a length. This means it works out to 50px 100px on the child, at its center, so the 180deg rotation should translate the child down by 100px. An implementation that incorrectly resolved the transform-origin to 25px 50px before inheritance would instead display the child box translated left 75px.
transform-origin-001 ≠ Default transform-origin not top left
  • A transform-origin of 0% 0% must not result in the same rendering as the default of 50% 50%, if a 45-degree rotation is applied.
transform-origin-002 ≠ Default transform-origin not center right
  • A transform-origin of 100% 50% must not result in the same rendering as the default of 50% 50%, if a 45-degree rotation is applied.
transform-origin-003 = transform-origin percentages 1
  • A transform-origin of 101px 51px must result in the same rendering as the default of 50% 50% in this case. The content box is 200x100px, so with a 1px border, the border box is 202x102px. transform-origin is computed relative to the border box. (Note: an implementation that incorrectly computes transform-origin percentages relative to the content box would fail this test by only a few pixels, so care is needed in checking that the test and reference renderings match exactly.)
transform-origin-004 = transform-origin percentages 2
  • A transform-origin of 101px 50% must result in the same rendering as the default of 50% 50% in this case. The content box is 200x100px, so with a 1px border, the border box is 202x102px. transform-origin is computed relative to the border box. (Note: an implementation that incorrectly computes transform-origin percentages relative to the content box would fail this test by only a few pixels, so care is needed in checking that the test and reference renderings match exactly.)
transform-origin-005 = transform-origin percentages 3
  • A transform-origin of 50% 51px must result in the same rendering as the default of 50% 50% in this case. The content box is 200x100px, so with a 1px border, the border box is 202x102px. transform-origin is computed relative to the border box. (Note: an implementation that incorrectly computes transform-origin percentages relative to the content box would fail this test by only a few pixels, so care is needed in checking that the test and reference renderings match exactly.)
transform-origin-006 = transform-origin percentages 4
  • Percentages in transform-origin refer to the size of the element's border box. This tests that they don't refer to the content, padding, or margin box by applying nonzero margin, border, and padding. (Note: an implementation that resolves percentages relative to the incorrect box might fail this test by only a few pixels, so it's important to check that the test and reference renderings match exactly.)
transform-origin-007 = transform-origin - 50% bottom('bottom' computes to '100%' in vertical position)
  • The 'transform-origin' property set 'bottom' computes to 100% for the vertical position.
transform-origin-008 = transform-origin - center 0%('center' computes to '50%' in horizontal position)
  • The 'transform-origin' property set 'center' computes to 50%(left 50%) for the horizontal position.
transform-origin-009 = transform-origin - 0% center('center' computes to '50%' in vertical position)
  • The 'transform-origin' property set 'center' computes to 50%(top 50%) for the vertical position.
transform-origin-01 = SVG Transform using transform-origin
  • If only one value is specified, the second value is assumed to be 'center'
transform-origin-010 = transform-origin - left 0%('left' computes to '0%' in horizontal position)
  • The 'transform-origin' property set 'left' computes to 0% for the horizontal position.
transform-origin-011 = transform-origin - right 100%('right' computes to '100%' in horizontal position)
  • The 'transform-origin' property set 'right' computes to 100% for the horizontal position.
transform-origin-012 = transform-origin - 0% top('top' computes to '0%' in vertical position)
  • The 'transform-origin' property set 'top' computes to 0% for the vertical position.
transform-origin-013 = CSS Reftest Reference
transform-origin-name-001 = ≠ transform-origin: top left
  • This tests that 'transform-origin: top left' is the same as 'transform-origin: 0% 0%'.
transform-origin-name-002 = ≠ transform-origin: left top
  • This tests that 'transform-origin: left top' is the same as 'transform-origin: 0% 0%'.
transform-origin-name-003 = ≠ transform-origin: top
  • This tests that 'transform-origin: top' is the same as 'transform-origin: 50% 0%'.
transform-origin-name-004 = ≠ transform-origin: top center
  • This tests that 'transform-origin: top center' is the same as 'transform-origin: 50% 0%'.
transform-origin-name-005 = ≠ transform-origin: center top
  • This tests that 'transform-origin: center top' is the same as 'transform-origin: 50% 0%'.
transform-origin-name-006 = ≠ transform-origin: top right
  • This tests that 'transform-origin: top right' is the same as 'transform-origin: 100% 0%'.
transform-origin-name-007 = ≠ transform-origin: right top
  • This tests that 'transform-origin: right top' is the same as 'transform-origin: 100% 0%'.
transform3d-rotatex-transformorigin-001 = ≠ rotateX() with 'transform-origin'
  • This tests that rotateX(45deg) has the same effect (with perspective) with a top left origin and a top right origin. It should make no difference, because it doesn't change the axis of rotation: it's still the top. (This doesn't actually test the perspective property, since a UA that doesn't support perspective at all could still pass.)
transform3d-translate3d-001 = ≠ translate3d() vs. 'transform-origin'
  • This tests that translate3d() before and after rotatex() is the same as an equivalent 'transform-origin'.
transform3d-translatez-001 = ≠ translatez() vs. 'transform-origin'
  • This tests that translatez(+-10px) before and after rotatex() is the same as an equivalent 'transform-origin', and different from translatez(+-20px).
transform-origin = transform-origin
  • The transform should change the transform-origin to the bottom right and rotate 180 degrees