+
5 The transformorigin Property 
csstransformscale001manual 
= 

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.

csstransformscale002 
= 

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.

svgoriginlength001 
= 
SVG 
SVG presentation attribute transformorigin with length values  default value
 The transformorigin should be 0 0 by default for SVG elements without associated CSS Layout Box.

svgoriginlength002 
= 
SVG 
SVG presentation attribute transformorigin with length values  0 0
 The transformorigin should be 0 0 by default, so the current value shouldn't make a difference.

svgoriginlength003 
= 
SVG 
SVG presentation attribute transformorigin with length values  100px 0
 The transformorigin should translate the origin by (100,0) temporarily.

svgoriginlength004 
= 
SVG 
SVG presentation attribute transformorigin with length values  0 100px
 The transformorigin should translate the origin by (0,100px) temporarily.

svgoriginlength005 
= 
SVG 
SVG presentation attribute transformorigin with length values  50px 50px
 The transformorigin should translate the origin by (50px,50px) temporarily.

svgoriginlength006 
= 
SVG 
SVG presentation attribute transformorigin with length values  100px 0
 The transformorigin should translate the origin by (100,0) temporarily and must support unit less values for presentation attributes.

svgoriginlength007 
= 
SVG 
SVG presentation attribute transformorigin with length values  0 100
 The transformorigin should translate the origin by (0,100px) temporarily and must support unit less values for presentation attributes.

svgoriginlength008 
= 
SVG 
SVG presentation attribute transformorigin with length values  50 50
 The transformorigin should translate the origin by (50px,50px) temporarily and must support unit less values for presentation attributes.

svgoriginlengthcm001 
= 
SVG 
SVG presentation attribute transformorigin with length values in cm  default value
 The transformorigin should be 0 0 by default for SVG elements without associated CSS Layout Box.

svgoriginlengthcm002 
= 
SVG 
SVG presentation attribute transformorigin with length values in cm  0 0
 The transformorigin should be 0 0 by default, so the current value shouldn't make a difference.

svgoriginlengthcm003 
= 
SVG 
SVG presentation attribute transformorigin with length values  2cm 0
 The transformorigin should translate the origin by (2cm,0) temporarily.

svgoriginlengthcm004 
= 
SVG 
SVG presentation attribute transformorigin with length values  0 2cm
 The transformorigin should translate the origin by (0,2cm) temporarily.

svgoriginlengthcm005 
= 
SVG 
SVG presentation attribute transformorigin with length values  1cm 1cm
 The transformorigin should translate the origin by (1cm,1cm) temporarily.

svgoriginlengthin001 
= 
SVG 
SVG presentation attribute transformorigin with length values in inch  default value
 The transformorigin should be 0 0 by default for SVG elements without associated CSS Layout Box.

svgoriginlengthin002 
= 
SVG 
SVG presentation attribute transformorigin with length values in inch  0 0
 The transformorigin should be 0 0 by default, so the current value shouldn't make a difference.

svgoriginlengthin003 
= 
SVG 
SVG presentation attribute transformorigin with length values  1.5in 0
 The transformorigin should translate the origin by (1.5in,0) temporarily.

svgoriginlengthin004 
= 
SVG 
SVG presentation attribute transformorigin with length values  0 1.5in
 The transformorigin should translate the origin by (0,1.5in) temporarily.

svgoriginlengthin005 
= 
SVG 
SVG presentation attribute transformorigin with length values  0.75in 0.75in
 The transformorigin should translate the origin by (0.75in, 0.75in) temporarily.

svgoriginlengthpt001 
= 
SVG 
SVG presentation attribute transformorigin with length values in pt  default value
 The transformorigin should be 0 0 by default for SVG elements without associated CSS Layout Box.

svgoriginlengthpt002 
= 
SVG 
SVG presentation attribute transformorigin with length values in pt  0 0
 The transformorigin should be 0 0 by default, so the current value shouldn't make a difference.

svgoriginlengthpt003 
= 
SVG 
SVG presentation attribute transformorigin with length values  80pt 0
 The transformorigin should translate the origin by (80pt,0) temporarily.

svgoriginlengthpt004 
= 
SVG 
SVG presentation attribute transformorigin with length values  0 80pt
 The transformorigin should translate the origin by (0,80pt) temporarily.

svgoriginlengthpt005 
= 
SVG 
SVG presentation attribute transformorigin with length values  40pt 40pt
 The transformorigin should translate the origin by (40pt,40pt) temporarily.

svgoriginrelativelength001 
= 
SVG 
SVG presentation attribute transformorigin, 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

svgoriginrelativelength002 
= 
SVG 
SVG presentation attribute transformorigin, 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

svgoriginrelativelength003 
= 
SVG 
SVG presentation attribute transformorigin, 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

svgoriginrelativelength004 
= 
SVG 
SVG presentation attribute transformorigin, '50% 50%'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength005 
= 
SVG 
SVG presentation attribute transformorigin, '50% center'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength006 
= 
SVG 
SVG presentation attribute transformorigin, 'center 50%'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength007 
= 
SVG 
SVG presentation attribute transformorigin, 'center center'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength008 
= 
SVG 
SVG presentation attribute transformorigin, '75 center'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength009 
= 
SVG 
SVG presentation attribute transformorigin, '75 50%'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength010 
= 
SVG 
SVG presentation attribute transformorigin, 'center 75'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength011 
= 
SVG 
SVG presentation attribute transformorigin, '50% 75'
 The rect should be rotated around its center point at 75,75

svgoriginrelativelength012 
= 
SVG 
SVG presentation attribute transformorigin, '0'
 The initial point of origin gets translated to 0,75. Since the second argument is missing, it is set to 'center'.

svgoriginrelativelength013 
= 
SVG 
SVG presentation attribute transformorigin, '150'
 The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'.

svgoriginrelativelength014 
= 
SVG 
SVG presentation attribute transformorigin, '100%'
 The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'.

svgoriginrelativelength015 
= 
SVG 
SVG presentation attribute transformorigin, 'right'
 The initial point of origin gets translated to 150,75. Since the second argument is missing, it is set to 'center'.

svgoriginrelativelength016 
= 
SVG 
SVG presentation attribute transformorigin, 'left'
 The initial point of origin gets translated to 75,75. Since the second argument is missing, it is set to 'center'.

svgoriginrelativelength017 
= 
SVG 
SVG presentation attribute transformorigin, '25%'
 If the second argument is missing, it is assumed to be center. The initial point of origin gets translated to 37.5,75.

svgoriginrelativelength018 
= 
SVG 
SVG presentation attribute transformorigin, 'top'
 The initial point of origin gets translated to 75,0. A single argument 'top' gets interpreted as 'center top'.

svgoriginrelativelength019 
= 
SVG 
SVG presentation attribute transformorigin, 'bottom'
 The initial point of origin gets translated to 75,150. A single argument 'bottom' gets interpreted as 'center bottom'.

svgoriginrelativelength020 
= 
SVG 
SVG presentation attribute transformorigin, '0% 0%'
 The initial point of origin gets translated to 75,75 since '0% 0%' is relative to the bounding box of the object.

svgoriginrelativelength021 
= 
SVG 
SVG presentation attribute transformorigin, 'top right'
 The initial point of origin gets translated to 225,75 since 'top right' is relative to the bounding box of the object.

svgoriginrelativelength022 
= 
SVG 
SVG presentation attribute transformorigin, 'top left'
 The initial point of origin gets translated to 75,75 since 'top left' is relative to the bounding box of the object.

svgoriginrelativelength023 
= 
SVG 
SVG presentation attribute transformorigin, 'top center'
 The initial point of origin gets translated to 150,75 since 'top center' is relative to the bounding box of the object.

svgoriginrelativelength024 
= 
SVG 
SVG presentation attribute transformorigin, 'bottom left'
 The initial point of origin gets translated to 75,225 since 'bottom left' is relative to the bounding box of the object.

svgoriginrelativelength025 
= 
SVG 
SVG presentation attribute transformorigin, 'bottom center'
 The initial point of origin gets translated to 150,225 since 'bottom center' is relative to the bounding box of the object.

svgoriginrelativelength026 
= 
SVG 
SVG presentation attribute transformorigin, 'bottom right'
 The initial point of origin gets translated to 225,225 since 'bottom right' is relative to the bounding box of the object.

svgoriginrelativelength027 
= 
SVG 
SVG presentation attribute transformorigin, 'right top'
 The initial point of origin gets translated to 225,75 since 'right top' is relative to the bounding box of the object.

svgoriginrelativelength028 
= 
SVG 
SVG presentation attribute transformorigin, 'right center'
 The initial point of origin gets translated to 225,150 since 'right center' is relative to the bounding box of the object.

svgoriginrelativelength029 
= 
SVG 
SVG presentation attribute transformorigin, 'right bottom'
 The initial point of origin gets translated to 225,225 since 'right bottom' is relative to the bounding box of the object.

svgoriginrelativelength030 
= 
SVG 
SVG presentation attribute transformorigin, 'right 75'
 The initial point of origin gets translated to 225,75 since 'right 75' is relative to the bounding box of the object.

svgoriginrelativelength031 
= 
SVG 
SVG presentation attribute transformorigin, 'right 0%'
 The initial point of origin gets translated to 225,75 since 'right 0%' is relative to the bounding box of the object.

svgoriginrelativelength032 
= 
SVG 
SVG presentation attribute transformorigin, 'right 100%'
 The initial point of origin gets translated to 225,225 since 'right 100%' is relative to the bounding box of the object.

svgoriginrelativelength033 
= 
SVG 
SVG presentation attribute transformorigin, 'left top'
 The initial point of origin gets translated to 75,75 since 'left top' is relative to the bounding box of the object.

svgoriginrelativelength034 
= 
SVG 
SVG presentation attribute transformorigin, 'left center'
 The initial point of origin gets translated to 75,150 since 'left center' is relative to the bounding box of the object.

svgoriginrelativelength035 
= 
SVG 
SVG presentation attribute transformorigin, 'left bottom'
 The initial point of origin gets translated to 75,225 since 'left bottom' is relative to the bounding box of the object.

svgoriginrelativelength036 
= 
SVG 
SVG presentation attribute transformorigin, 'left 75'
 The initial point of origin gets translated to 75,75 since 'left 75' is relative to the bounding box of the object.

svgoriginrelativelength037 
= 
SVG 
SVG presentation attribute transformorigin, 'left 0%'
 The initial point of origin gets translated to 75,75 since 'left 0%' is relative to the bounding box of the object.

svgoriginrelativelength038 
= 
SVG 
SVG presentation attribute transformorigin, 'left 100%'
 The initial point of origin gets translated to 75,225 since 'left 100%' is relative to the bounding box of the object.

svgoriginrelativelength039 
= 
SVG 
SVG presentation attribute transformorigin, 'center top'
 The initial point of origin gets translated to 150,75 since 'center top' is relative to the bounding box of the object.

svgoriginrelativelength040 
= 
SVG 
SVG presentation attribute transformorigin, 'center bottom'
 The initial point of origin gets translated to 150,225 since 'center bottom' is relative to the bounding box of the object.

svgoriginrelativelength041 
= 
SVG 
SVG presentation attribute transformorigin, 'center left'
 The initial point of origin gets translated to 75,150 since 'center left' is relative to the bounding box of the object.

svgoriginrelativelength042 
= 
SVG 
SVG presentation attribute transformorigin, 'center right'
 The initial point of origin gets translated to 225,150 since 'center right' is relative to the bounding box of the object.

svgoriginrelativelength043 
= 
SVG 
SVG presentation attribute transformorigin, 'center 100%'
 The initial point of origin gets translated to 150,225 since 'center 100%' is relative to the bounding box of the object.

svgoriginrelativelength044 
= 
SVG 
SVG presentation attribute transformorigin, '0 center'
 The initial point of origin gets translated to 0,150 since '0 center' is relative to the bounding box of the object.

svgoriginrelativelength045 
= 
SVG 
SVG presentation attribute transformorigin, 'center 0%'
 The initial point of origin gets translated to 150,75 since 'center 0%' is relative to the bounding box of the object.

svgoriginrelativelength046 
= 
SVG 
SVG presentation attribute transformorigin, 'center 0'
 The initial point of origin gets translated to 150,0 since 'center 0' is relative to the bounding box of the object.

svgoriginrelativelengthinvalid001 
= 
SVG 
SVG presentation attribute transformorigin, 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

svgoriginrelativelengthinvalid002 
= 
SVG 
SVG presentation attribute transformorigin, 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

svgoriginrelativelengthinvalid003 
= 
SVG 
SVG presentation attribute transformorigin, 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

svgoriginrelativelengthinvalid004 
= 
SVG 
SVG presentation attribute transformorigin, 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

svgoriginrelativelengthinvalid005 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'top top'
 Spec does not allow two vertical values. Fallback to 0,0

svgoriginrelativelengthinvalid006 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'bottom bottom'
 Spec does not allow two vertical values. Fallback to 0,0

svgoriginrelativelengthinvalid007 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'top bottom'
 Spec does not allow two vertical values. Fallback to 0,0

svgoriginrelativelengthinvalid008 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'bottom top'
 Spec does not allow two vertical values. Fallback to 0,0

svgoriginrelativelengthinvalid009 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'left left'
 Spec does not allow two horizontal values. Fallback to 0,0

svgoriginrelativelengthinvalid010 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'left right'
 Spec does not allow two horizontal values. Fallback to 0,0

svgoriginrelativelengthinvalid011 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'right right'
 Spec does not allow two horizontal values. Fallback to 0,0

svgoriginrelativelengthinvalid012 
= 
SVG 
SVG presentation attribute transformorigin, invalid arguments 'right left'
 Spec does not allow two horizontal values. Fallback to 0,0

transforminheritorigin001 
= 

"transformorigin: inherit" and em
 The 'transformorigin' 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 transformorigin of '5em 10em' with a fontsize of 10px, and the child has "transformorigin: inherit". Since the relative length of 5em is converted to an absolute length before inheritance, the transformorigin 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 transformorigin value before converting to an absolute length would treat it as 100px 200px, since the child has a fontsize of 20px, so it would effectively translate the child 100px right and 300px down.

transforminheritorigin002 
= 

"transformorigin: inherit" and percentages
 The 'transformorigin' 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 transformorigin of '50% 100%' with a height/width of 50px, and the child has "transformorigin: inherit" with a height/width of 100px. Since the transformorigin 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 transformorigin to 25px 50px before inheritance would instead display the child box translated left 75px.

transformorigin001 
≠ 

Default transformorigin not top left
 A transformorigin of 0% 0% must not result in the same rendering as the default of 50% 50%, if a 45degree rotation is applied.

transformorigin002 
≠ 

Default transformorigin not center right
 A transformorigin of 100% 50% must not result in the same rendering as the default of 50% 50%, if a 45degree rotation is applied.

transformorigin003 
= 

transformorigin percentages 1
 A transformorigin 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. transformorigin is computed relative to the border box. (Note: an implementation that incorrectly computes transformorigin 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.)

transformorigin004 
= 

transformorigin percentages 2
 A transformorigin 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. transformorigin is computed relative to the border box. (Note: an implementation that incorrectly computes transformorigin 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.)

transformorigin005 
= 

transformorigin percentages 3
 A transformorigin 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. transformorigin is computed relative to the border box. (Note: an implementation that incorrectly computes transformorigin 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.)

transformorigin006 
= 

transformorigin percentages 4
 Percentages in transformorigin 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.)

transformorigin007 
= 

transformorigin  50% bottom('bottom' computes to '100%' in vertical position)
 The 'transformorigin' property set 'bottom' computes to 100% for the vertical position.

transformorigin008 
= 

transformorigin  center 0%('center' computes to '50%' in horizontal position)
 The 'transformorigin' property set 'center' computes to 50%(left 50%) for the horizontal position.

transformorigin009 
= 

transformorigin  0% center('center' computes to '50%' in vertical position)
 The 'transformorigin' property set 'center' computes to 50%(top 50%) for the vertical position.

transformorigin01 
= 

SVG Transform using transformorigin
 If only one value is specified, the second value is assumed to be 'center'

transformorigin010 
= 

transformorigin  left 0%('left' computes to '0%' in horizontal position)
 The 'transformorigin' property set 'left' computes to 0% for the horizontal position.

transformorigin011 
= 

transformorigin  right 100%('right' computes to '100%' in horizontal position)
 The 'transformorigin' property set 'right' computes to 100% for the horizontal position.

transformorigin012 
= 

transformorigin  0% top('top' computes to '0%' in vertical position)
 The 'transformorigin' property set 'top' computes to 0% for the vertical position.

transformorigin013 
= 

CSS Reftest Reference

transformoriginname001 
= ≠ 

transformorigin: top left
 This tests that 'transformorigin: top left' is the same as 'transformorigin: 0% 0%'.

transformoriginname002 
= ≠ 

transformorigin: left top
 This tests that 'transformorigin: left top' is the same as 'transformorigin: 0% 0%'.

transformoriginname003 
= ≠ 

transformorigin: top
 This tests that 'transformorigin: top' is the same as 'transformorigin: 50% 0%'.

transformoriginname004 
= ≠ 

transformorigin: top center
 This tests that 'transformorigin: top center' is the same as 'transformorigin: 50% 0%'.

transformoriginname005 
= ≠ 

transformorigin: center top
 This tests that 'transformorigin: center top' is the same as 'transformorigin: 50% 0%'.

transformoriginname006 
= ≠ 

transformorigin: top right
 This tests that 'transformorigin: top right' is the same as 'transformorigin: 100% 0%'.

transformoriginname007 
= ≠ 

transformorigin: right top
 This tests that 'transformorigin: right top' is the same as 'transformorigin: 100% 0%'.

transform3drotatextransformorigin001 
= ≠ 

rotateX() with 'transformorigin'
 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.)

transform3dtranslate3d001 
= ≠ 

translate3d() vs. 'transformorigin'
 This tests that translate3d() before and after rotatex() is the same as an equivalent 'transformorigin'.

transform3dtranslatez001 
= ≠ 

translatez() vs. 'transformorigin'
 This tests that translatez(+10px) before and after rotatex() is the same as an equivalent 'transformorigin', and different from translatez(+20px).
