src/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       if (window.testRunner)
  33         testRunner.notifyDone();
  34     }
  35
  36     function modifyDocument()
  37     {
  38       window.scrollBy(50, 50);
  39     }
  40
  41     function doTest()
  42     {
  43       var video = document.getElementsByTagName('video')[0];
  44       setupVideo(video, '../resources/video', modifyDocument, testDone);
  45     }
  46   </script>
  47 </head>
  48 <body onload="doTest()">
  49     <video></video>
  50
  51     <p>The blue bar should be in front of the video, and at the top of the page.</p>
  52     <div id="fixed-bar"></div>
  53 </body>
  54 </html>