tor-browser

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

transform-inherit-origin-002.html (1554B)

      1 <!DOCTYPE html>
      2 <html>
      3  <head>
      4    <title>CSS Test (Transforms): "transform-origin: inherit" and percentages</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;50% 100%&apos; with a height/width of 50px,
     12    and the child has "transform-origin: inherit" with a height/width of 100px.
     13    Since the transform-origin is a percentage, it&apos;s inherited before it
     14    gets resolved to a length.  This means it works out to 50px 100px on the
     15    child, at its center, so the 180deg rotation should translate the child
     16    down by 100px.  An implementation that incorrectly resolved the
     17    transform-origin to 25px 50px before inheritance would instead display the
     18    child box translated left 75px.'>
     19    <link rel="match" href="transform-inherit-origin-ref.html">
     20    <style>
     21      body {
     22        height: 50px;
     23        width: 50px;
     24        transform-origin: 50% 100%;
     25      }
     26      div {
     27        height: 100px;
     28        width: 100px;
     29        transform: rotate(180deg);
     30        transform-origin: inherit;
     31        background: blue;
     32      }
     33    </style>
     34  </head>
     35  <body>
     36    <div></div>
     37  </body>
     38 </html>