src/third_party/WebKit/LayoutTests/css3/filters/blur-filter-page-scroll-parents.html

   1 <!-- This test asserts that blit-scrolling is disabled when blur is applied on a layer
   2     that contains an intermediate layer which has a fixed positioned object inside.
   3     One fixed black bar should be visible at the top of the page. The page should be scrolled
   4     100px and no red should be visible. The rest of the page should be green.
   5  -->
   6 <!DOCTYPE html>
   7 <html>
   8     <head>
   9         <script>
  10             if (window.testRunner)
  11                 testRunner.waitUntilDone();
  12         </script>
  13         <!-- Make sure the mock scrollbars are enabled after the call to overridePreference, otherwise the setting will be overwritten. -->
  14         <script src="../../compositing/resources/mock_scrollbars.js"></script>
  15         <style>
  16             body {
  17                 margin: 0px;
  18                 border: 0px;
  19                 padding: 0px;
  20             }
  21
  22             .blur {
  23                 -webkit-filter: blur(1px);
  24             }
  25
  26             .layer {
  27                 /* Using very subtle grayscale to keep the green & red still visible. */
  28                 -webkit-filter: grayscale(0.1);
  29             }
  30
  31             #fixedBox {
  32                 position: fixed;
  33                 background-color: #000000;
  34                 height: 100px;
  35                 width: 100%;
  36             }
  37
  38             #redBox {
  39                 background-color: red;
  40                 height: 200px;
  41             }
  42
  43             #greenBox {
  44                 background-color: green;
  45                 height: 1000px;
  46             }
  47         </style>
  48         <script src="../../resources/run-after-display.js"></script>
  49         <script type="text/javascript">
  50             function repaintTest() {
  51                 runAfterDisplay(function() {
  52                   window.scrollTo(0, 100);
  53                   if (window.testRunner)
  54                     testRunner.notifyDone();
  55                 });
  56             }
  57         </script>
  58     </head>
  59     <body onload="repaintTest()">
  60         <div class="blur">
  61             <div class="layer">
  62                 <div id="fixedBox"></div>
  63                 <div id="redBox"></div>
  64                 <div id="greenBox"></div>
  65             </div>
  66         </div>
  67     </body>
  68 </html>