1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<script>
var context;
window.onload = function() {
if (window.testRunner)
testRunner.waitUntilDone();
context = document.getElementById('c').getContext('2d');
context.scale(2,2);
context.beginPath();
context.rect(0,0,75,75);
context.clip();
context.fillStyle = 'red';
context.fillRect(0,0,30,30);
context.fillRect(50,50,30,30);
context.save();
context.scale(0.5,0.5);
context.beginPath();
context.rect(0,0,5,5);
context.clip();
requestAnimationFrame(drawSecondFrame);
}
function drawSecondFrame() {
context.restore();
context.fillStyle = 'green';
context.fillRect(0,0,30,30);
context.fillRect(50,50,30,30);
if (window.testRunner)
testRunner.notifyDone();
}
</script>
<p>Two green squares of different sizes should appear below</p>
<canvas id="c" width="300" height="300"></canvas>
|
