Add basic support for getting a ImageBitmapRenderingContext
[WebKit-https.git] / LayoutTests / svg / repaint / buffered-rendering-dynamic-image.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4     <script src="../../fast/repaint/resources/repaint.js"></script>
5     <script>
6         function repaintTest() {
7             document.getElementById('behindDynamic').setAttribute('fill', 'green');
8             document.getElementById('translateDynamic').setAttribute('x', '0');
9             document.getElementById('transformDynamic').setAttribute('transform', 'translate(0 0)');
10             document.getElementById('scaleDynamic').setAttribute('transform', 'scale(1)');
11         }
12     </script>
13 </head>
14 <body onload="runRepaintTest()">
15 Test for WK104207: This test passes if there are 4 green squares each with a smooth black circle in the top-left corner.<br/>
16     <svg xmlns="http://www.w3.org/2000/svg" width="400" height="450">
17         <!-- Test invalidating content behind the dynamic content. -->
18         <rect id="behindDynamic" x="40" y="10" width="20" height="80" fill="red"/>
19         <image x="0" y="0" width="100" height="100" buffered-rendering="dynamic" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect x='10' y='10' width='30' height='80' fill='green'/><rect x='60' y='10' width='30' height='80' fill='green'/><circle cx='25' cy='25' r='10' fill='green' stroke='black' stroke-width='1'/></svg>"/>
20
21         <!-- Test translating dynamic content -->
22         <rect x="20" y="140" width="30" height="30" fill="red"/>
23         <image id="translateDynamic" x="50" y="120" width="100" height="100" buffered-rendering="dynamic" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect x='10%' y='10%' width='80%' height='80%' fill='green'/><circle cx='25' cy='25' r='10' fill='green' stroke='black' stroke-width='1'/></svg>"/>
24
25         <!-- Test transforming dynamic content -->
26         <rect x="20" y="260" width="30" height="30" fill="red"/>
27         <image id="transformDynamic" transform="skewX(30)" x="0" y="240" width="100" height="100" buffered-rendering="dynamic" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect x='10%' y='10%' width='80%' height='80%' fill='green'/><circle cx='25' cy='25' r='10' fill='green' stroke='black' stroke-width='1'/></svg>"/>
28
29         <!-- Test scaling dynamic content -->
30         <rect x="20" y="380" width="30" height="30" fill="red"/>
31         <image id="scaleDynamic" transform="scale(0.1)" x="0" y="360" width="100" height="100" buffered-rendering="dynamic" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><rect x='10%' y='10%' width='80%' height='80%' fill='green'/><circle cx='25' cy='25' r='10' fill='green' stroke='black' stroke-width='1'/></svg>"/>
32     </svg>
33 </body>
34 </html>