tests/wpt/css-tests/css-transforms-1_dev/xhtml1print/transform-origin-006.xht


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>CSS Test (Transforms): transform-origin percentages 4</title>
    <link href="mailto:ayg@aryeh.name" rel="author" title="Aryeh Gregor" />
    <link href="http://www.w3.org/TR/css-transforms-1/#transform-origin-property" rel="help" />
    <meta content="Percentages in transform-origin 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.)" name="assert" />
    <link href="reference/transform-origin-ref-2.xht" rel="match" />
    <style>
      body &gt; div {
        width: 190px;
        height: 90px;
        padding: 5px;
        border: 1px solid black;
        margin: 5px;
        transform: rotate(45deg);
        transform-origin: 50% 50%;
        position: relative;
        right: 5px;
      }
      body &gt; div &gt; div {
        margin: -5px;
      }
    </style>
  </head>
  <body>
    <div>
      <div>Some text!</div>
    </div>
  

</body></html>