1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Test of very large image layer</title>
5
6 <style type="text/css" media="screen">
7 #container {
8 width: 500px;
9 height: 20000px;
10 -webkit-transform:translateZ(0);
11 }
12 </style>
13 <script type="text/javascript" charset="utf-8">
14 if (window.layoutTestController) {
15 layoutTestController.dumpAsText();
16 layoutTestController.waitUntilDone();
17 }
18
19 function testOnLoad()
20 {
21 var canvas = document.createElement('canvas');
22 var img = document.getElementById("container")
23 canvas.width = img.width;
24 canvas.height = img.height;
25 var context = canvas.getContext('2d');
26 context.fillStyle = "yellow";
27 context.fillRect(0, 0, canvas.width, canvas.height);
28 context.fillStyle = "red";
29 context.fillRect(50, 50, 200, 200);
30 context.fillStyle = "blue";
31 context.fillRect(50, canvas.height - 250, 200, 200);
32 img.src = canvas.toDataURL();
33
34 window.setTimeout(function() {
35 if (window.layoutTestController) {
36 document.getElementById('layers').innerHTML = layoutTestController.layerTreeAsText();
37 layoutTestController.notifyDone();
38 }
39 }, 0);
40 }
41
42 window.addEventListener('load', testOnLoad, false);
43 </script>
44 </head>
45 <body>
46 <p>
47 The yellow box should be large enough to scroll off the bottom.
48 There should be a red box on the first page and a blue box
49 near the bottom of the yellow box. This tests that we can support
50 very large composited image layers.
51 </p>
52 <img id="container">
53 <pre id="layers">Layer tree appears here in DRT.</pre>
54 </body>
55</html>