Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / layers-inside-overflow-scroll.html
blob0c8cbcaa341ea4b74280f4cb6930640d32a308b6
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Layers inside overflow-scroll</title>
6 <style type="text/css" media="screen">
8 #container {
9 width: 300px;
10 margin: 10px;
11 border: 1px solid black;
14 #details {
15 width: 300px;
16 height: 150px;
17 margin: 10px;
18 overflow: auto;
19 border: 1px solid black;
22 #details > div {
23 width: 100%;
24 height: 500px;
25 font-size: 24pt;
26 line-height: 150%;
29 .compositing {
30 height: 100px;
31 width: 100px;
32 background-color: red;
33 transform: translateZ(0);
35 </style>
36 <script src="resources/media-testing.js"></script>
37 <script src="../media/media-file.js"></script>
39 <script type="text/javascript" charset="utf-8">
40 function testDone()
42 document.getElementById('details').scrollTop = 100;
43 if (window.testRunner)
44 testRunner.notifyDone();
47 function doTest()
49 var video = document.getElementsByTagName('video')[0];
50 setupVideo(video, 'resources/video', testDone);
52 </script>
53 </head>
54 <body onload="doTest()">
55 <p>The red box in the overflow:scroll div should be scrolled out of view.</p>
56 <div id="container">
57 <video width="300" height="200"></video>
58 </div>
60 <div id="details">
61 <div>
62 <div class="compositing"></div>
63 </div>
64 </div>
66 </body>
67 </html>