LayoutTests/css3/filters/blur-filter-page-scroll-parents.html - WebKit - Git at Google

 <!-- This test asserts that blit-scrolling is disabled when blur is applied on a layer
     that contains an intermediate layer which has a fixed positioned object inside.
     One fixed black bar should be visible at the top of the page. The page should be scrolled
     100px and no red should be visible. The rest of the page should be green.
  -->
 <!DOCTYPE html>
 <html>
     <head>
         <script>
             if (window.testRunner) {
                 // Force software rendering mode.
                 window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
             }
         </script>
         <style>
             body {
                 margin: 0px;
                 border: 0px;
                 padding: 0px;
             }

             .blur {
                 -webkit-filter: blur(1px);
             }

             .layer {
                 /* Using very subtle grayscale to keep the green & red still visible. */
                 -webkit-filter: grayscale(0.1);
             }

             #fixedBox {
                 position: fixed;
                 background-color: #000000;
                 height: 100px;
                 width: 100%;
             }

             #redBox {
                 background-color: red;
                 height: 200px;
             }

             #greenBox {
                 background-color: green;
                 height: 1000px;
             }
         </style>
         <script src="../../fast/repaint/resources/repaint.js"></script>
         <script type="text/javascript">
             function repaintTest() {
                 window.scrollTo(0, 100);
             }
         </script>
     </head>
     <body onload="runRepaintTest()">
         <div class="blur">
             <div class="layer">
                 <div id="fixedBox"></div>
                 <div id="redBox"></div>
                 <div id="greenBox"></div>
             </div>
         </div>
     </body>
 </html>
	<!-- This test asserts that blit-scrolling is disabled when blur is applied on a layer
	that contains an intermediate layer which has a fixed positioned object inside.
	One fixed black bar should be visible at the top of the page. The page should be scrolled
	100px and no red should be visible. The rest of the page should be green.
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	if (window.testRunner) {
	// Force software rendering mode.
	window.testRunner.overridePreference("WebKitAcceleratedCompositingEnabled", "0");
	}
	</script>
	<style>
	body {
	margin: 0px;
	border: 0px;
	padding: 0px;
	}

	.blur {
	-webkit-filter: blur(1px);
	}

	.layer {
	/* Using very subtle grayscale to keep the green & red still visible. */
	-webkit-filter: grayscale(0.1);
	}

	#fixedBox {
	position: fixed;
	background-color: #000000;
	height: 100px;
	width: 100%;
	}

	#redBox {
	background-color: red;
	height: 200px;
	}

	#greenBox {
	background-color: green;
	height: 1000px;
	}
	</style>
	<script src="../../fast/repaint/resources/repaint.js"></script>
	<script type="text/javascript">
	function repaintTest() {
	window.scrollTo(0, 100);
	}
	</script>
	</head>
	<body onload="runRepaintTest()">
	<div class="blur">
	<div class="layer">
	<div id="fixedBox"></div>
	<div id="redBox"></div>
	<div id="greenBox"></div>
	</div>
	</div>
	</body>
	</html>