4 <title>Test that the clip state persists across frame boundaries.
</title>
7 <canvas id='canvas1' width='
100' height='
100'
></canvas>
8 <canvas id='canvas2' width='
100' height='
100'
></canvas>
9 <canvas id='canvas3' width='
100' height='
100'
></canvas>
10 <canvas id='canvas4' width='
100' height='
100'
></canvas>
12 var canvas1
= document
.getElementById('canvas1');
13 var canvas2
= document
.getElementById('canvas2');
14 var canvas3
= document
.getElementById('canvas3');
15 var canvas4
= document
.getElementById('canvas4');
16 var ctx1
= canvas1
.getContext('2d');
17 var ctx2
= canvas2
.getContext('2d');
18 var ctx3
= canvas3
.getContext('2d');
19 var ctx4
= canvas4
.getContext('2d');
20 if (window
.testRunner
) {
21 testRunner
.waitUntilDone();
23 window
.requestAnimationFrame(setupClips
);
25 function setupClips() {
26 // ctx1 covers clipPath and unrealized save on the stack
27 ctx1
.fillStyle
= 'green';
28 ctx1
.fillRect(0, 0, 100, 100);
37 // ctx2 covers accumulation of path and rect in separate layers
38 ctx2
.fillStyle
= 'green';
39 ctx2
.fillRect(0, 0, 100, 100);
48 ctx2
.rect(50, 0, 50, 100);
51 // ctx3 identical to ctx2, but will call restore before drawing
52 ctx3
.fillStyle
= 'green';
53 ctx3
.fillRect(0, 0, 100, 100);
62 ctx3
.rect(50, 0, 50, 100);
65 // ctx4 transformed clip
66 ctx4
.fillStyle
= 'green';
67 ctx4
.fillRect(0, 0, 100, 100);
76 window
.requestAnimationFrame(drawPass
)
80 ctx1
.fillStyle
= 'yellow';
81 ctx1
.fillRect(0, 0, 100, 100);
83 ctx2
.fillStyle
= 'yellow';
84 ctx2
.fillRect(0, 0, 100, 100);
87 ctx3
.fillStyle
= 'yellow';
88 ctx3
.fillRect(0, 0, 100, 100);
90 ctx4
.fillStyle
= 'yellow';
91 ctx4
.fillRect(-10, 0, 100, 100);
93 if (window
.testRunner
) {
94 testRunner
.notifyDone();