third_party/WebKit/LayoutTests/compositing/geometry/video-fixed-scrolling.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2   "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6   <title>Video overlay</title>
   7   <style type="text/css" media="screen">
   8     body {
   9       height: 1000px;
  10     }
  11
  12     video {
  13       margin-top: 80px;
  14       width: 400px;
  15       height: 300px;
  16     }
  17
  18     #fixed-bar {
  19       position: fixed;
  20       left: 0;
  21       top: 0;
  22       width: 500px;
  23       height: 60px;
  24       background-color: rgba(0, 0, 255, 0.8);
  25     }
  26   </style>
  27   <script src="../resources/media-testing.js"></script>
  28   <script src="../../media/media-file.js"></script>
  29   <script type="text/javascript" charset="utf-8">
  30     function testDone()
  31     {
  32       window.scrollBy(50, 50);
  33       if (window.testRunner)
  34         testRunner.notifyDone();
  35     }
  36
  37     function doTest()
  38     {
  39       var video = document.getElementsByTagName('video')[0];
  40       setupVideo(video, '../resources/video', testDone);
  41     }
  42   </script>
  43 </head>
  44 <body onload="doTest()">
  45     <video></video>
  46
  47     <p>The blue bar should be in front of the video, and at the top of the page.</p>
  48     <div id="fixed-bar"></div>
  49 </body>
  50 </html>