OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 | |
3 <html> | |
4 <head> | |
5 <style type="text/css" media="screen"> | |
6 body { | |
7 position: relative; | |
8 height: 1000px; | |
9 } | |
10 .container { | |
11 position: fixed; | |
12 width: 100px; | |
13 height: 100px; | |
14 padding: 20px; | |
15 z-index: 0; | |
16 border: 1px solid black; | |
17 } | |
18 | |
19 .compositing { | |
20 position: absolute; | |
21 top: 121px; | |
22 left: 21px; | |
23 width: 100px; | |
24 height: 100px; | |
25 -webkit-transform: translateZ(0); | |
26 } | |
27 | |
28 .far-left { | |
29 position: relative; | |
30 left: -1000px; | |
31 width: 1100px; | |
32 height: 100px; | |
33 background-color: green; | |
34 } | |
35 | |
36 .indicator { | |
37 position: absolute; | |
38 top: 121px; | |
39 left: 21px; | |
40 width: 100px; | |
41 height: 100px; | |
42 background-color: red; | |
43 } | |
44 </style> | |
45 <script type="text/javascript" charset="utf-8"> | |
46 if (window.testRunner) { | |
47 testRunner.dumpAsText(); | |
48 testRunner.waitUntilDone(); | |
49 } | |
50 | |
51 function doTest() | |
52 { | |
53 window.scrollBy(0, 100); | |
54 | |
55 if (window.testRunner) { | |
56 document.getElementById('layers').innerText = window.internals.layerTree
AsText(document); | |
57 testRunner.notifyDone(); | |
58 } | |
59 } | |
60 | |
61 window.addEventListener('load', doTest, false); | |
62 </script> | |
63 </head> | |
64 | |
65 <body> | |
66 | |
67 <!-- Go into compositing. --> | |
68 <div class="compositing"></div> | |
69 | |
70 <div class="indicator"></div> | |
71 | |
72 <!-- Test clipping to viewport with some intermediate layers. --> | |
73 <!-- Green box should extend to the left edge. No red visible. --> | |
74 <div class="container"> | |
75 <div class="far-left"> | |
76 Text here | |
77 </div> | |
78 </div> | |
79 <pre id="layers">Layer tree goes here in DRT</pre> | |
80 </body> | |
81 </html> | |
82 | |
OLD | NEW |