Support transform-box to switch sizing box in SVG
[WebKit-https.git] / LayoutTests / svg / transforms / svg-transform-box.html
1 <!DOCTYPE html>
2
3 <html>
4 <head>
5   <style>
6     svg {
7         border: 1px solid black;
8     }
9   </style>
10 </head>
11
12 <body>
13
14     <div class="container">
15         <p>You should see no red boxes below</p>
16         <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 600 400" style=" width: 600px; height: 400px;">
17             <!-- transform-box: view-box -->
18             <rect x="20" y="10" width="100" height="50" fill="red" />
19             <rect x="20" y="5" width="50" height="25" fill="green" style="transform: scale(2, 2); transform-origin: 20px 0; transform-box: view-box;" />
20
21             <rect x="480" y="40" width="50" height="50" fill="red" />
22             <rect x="0" y="0" width="50" height="50" fill="green" style="transform: translate(80%, 10%); transform-box: view-box;" />
23
24             <rect x="120" y="120" width="50" height="50" fill="red" />
25             <rect x="180" y="10" width="50" height="50" fill="green" style="transform: rotate(90deg); transform-origin: 120px 60px; transform-box: view-box;" />
26             <rect x="180" y="10" width="50" height="50" fill="green" style="transform: rotate(90deg); transform-origin: 20% 15%; transform-box: view-box;" />
27
28             <!-- transform-box: fill-box -->
29             <rect x="20" y="200" width="100" height="50" fill="red" />
30             <rect x="20" y="200" width="50" height="25" fill="green" style="transform: scale(2, 2); transform-box: fill-box;" />
31
32             <rect x="480" y="260" width="50" height="50" fill="red" />
33             <rect x="430" y="310" width="50" height="50" fill="green" style="transform: translate(100%, -100%); transform-box: fill-box;" />
34
35             <rect x="120" y="320" width="50" height="50" fill="red" />
36             <rect x="70" y="270" width="50" height="50" fill="green" style="transform: rotate(180deg); transform-origin: 50px 50px; transform-box: fill-box;" />
37             <rect x="95" y="345" width="50" height="50" fill="green" style="transform: rotate(90deg); transform-origin: 100% 50%; transform-box: fill-box;" />
38         </svg>
39     </div>
40
41 </body>
42 </html>