OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <script src="../resources/run-after-layout-and-paint.js"></script> | |
5 <script src="resources/test-runner-paint-worklet.js"></script> | |
6 <style> | |
7 div { | |
8 display: inline-block; | |
9 width: 100px; | |
10 height: 100px; | |
11 } | |
12 | |
13 #one { | |
14 background: | |
15 paint(ellipse) top left/50% 50% repeat-x, | |
16 paint(ellipse) bottom left/100% 50% no-repeat; | |
17 } | |
18 | |
19 #two { | |
20 background: | |
21 paint(ellipse) top left/50% 20% repeat-y, | |
22 paint(ellipse) center right/50% 50% no-repeat; | |
23 } | |
24 </style> | |
25 </head> | |
26 <body> | |
27 <div id="one"></div> | |
28 <div id="two"></div> | |
29 | |
30 <script id="code" type="text/worklet"> | |
31 registerPaint('ellipse', class { | |
32 paint(ctx, geom) { | |
33 var x = geom.width / 2; | |
34 var y = geom.height / 2; | |
35 | |
36 ctx.fillStyle = 'green'; | |
37 ctx.beginPath(); | |
38 ctx.ellipse(x, y, x - 1, y - 1, 0, 0, 2 * Math.PI); | |
39 ctx.fill(); | |
40 } | |
41 }); | |
42 </script> | |
43 | |
44 <script> | |
45 importPaintWorkletAndTerminateTestAfterAsyncPaint(document.getElementById('c
ode').textContent); | |
46 </script> | |
47 </body> | |
48 </html> | |
OLD | NEW |