tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

transform-inherit-origin-001.html (1623B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <title>CSS Test (Transforms): "transform-origin: inherit" and em</title>
      5    <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name">
      6    <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property">
      7    <meta name="assert" content='The &apos;transform-origin&apos;
      8    property&apos;s computed value (which is what&apos;s inherited if
      9    &apos;inherit&apos; is specified) is defined as "For &lt;length&gt; the
     10    absolute value, otherwise a percentage."  In this test, a parent element
     11    has a transform-origin of &apos;5em 10em&apos; with a font-size of 10px, and
     12    the child has "transform-origin: inherit".  Since the relative length of
     13    5em is converted to an absolute length before inheritance, the
     14    transform-origin should be at the bottom of the child, 50px 100px.  The
     15    180deg rotation should thus effectively move the child down 100px.  An
     16    implementation that incorrectly inherited the transform-origin value before
     17    converting to an absolute length would treat it as 100px 200px, since the
     18    child has a font-size of 20px, so it would effectively translate the child
     19    100px right and 300px down.'>
     20    <link rel="match" href="transform-inherit-origin-ref.html">
     21    <style>
     22      body {
     23        font-size: 10px;
     24        transform-origin: 5em 10em;
     25      }
     26      div {
     27        height: 100px;
     28        width: 100px;
     29        font-size: 20px;
     30        transform: rotate(180deg);
     31        transform-origin: inherit;
     32        background: blue;
     33      }
     34    </style>
     35  </head>
     36  <body>
     37    <div></div>
     38  </body>
     39 </html>