1 <!DOCTYPE html>
2 <html><head>
3 <title>CSS Test: Test for calc() on transform-origin</title>
4 <link href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934" rel="author" title="L. David Baron">
5 <link href="http://www.w3.org/TR/css3-values/#calc-notation" rel="help">
6 <link href="reference/calc-transform-origin-1-ref.htm" rel="match">
7 <meta content="" name="flags">
8 <style type="text/css">
9
10 body { margin: 100px }
11
12 p {
13 height: 50px; width: 200px;
14 background: yellow;
15 transform: rotate(15deg);
16 }
17
18 #one { transform-origin: calc(50px + 50%) calc(100% - 30px); }
19 #two { transform-origin: calc(-12.5% + 3px) calc(-10px - 50%); }
20
21 </style>
22 </head>
23 <body>
24 <p id="one">hello</p>
25 <p id="two">hello</p>
26
27
28 </body></html>