| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Test (Transforms): "transform-origin: inherit" and em</title> |
| <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> |
| <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property"> |
| <meta name="assert" content='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.'> |
| <link rel="match" href="transform-inherit-origin-ref.html"> |
| <style> |
| body { |
| font-size: 10px; |
| transform-origin: 5em 10em; |
| } |
| div { |
| height: 100px; |
| width: 100px; |
| font-size: 20px; |
| transform: rotate(180deg); |
| transform-origin: inherit; |
| background: blue; |
| } |
| </style> |
| </head> |
| <body> |
| <div></div> |
| </body> |
| </html> |