Revision 190c3feba3a42cbc4c32facd7994c190589d889e authored by Liam R. E. Quin on 26 March 2018, 01:04:45 UTC, committed by Liam R. E. Quin on 26 March 2018, 01:04:45 UTC
1 parent 2b4cdad
transform-inherit-origin-001.html
<!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>
![swh spinner](/static/img/swh-spinner.gif)
Computing file changes ...