LayoutTests/fast/overflow/scroll-anchor-in-overflow-in-position-fixed.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <style>
         body {
             height: 2000px;
             width: 2000px;
         }

         .fixed {
             position: fixed;
             top: 250px;
             left: 40px;
             height: 200px;
             width: 200px;
             border: 1px solid black;
         }

         #scroller {
             height: 100%;
             width: 100%;
             overflow: scroll;
         }

         #scroller > a {
             display: block;
             height: 50px;
             margin-top: 600px;
         }
     </style>
     <script src="../../resources/js-test-pre.js"></script>
     <script>
     description("Tests scrolling to an anchor inside overflow:scroll inside position:fixed correctly scrolls the overflow, and not the page");
     window.jsTestIsAsync = true;

     function runTest()
     {
         window.scrollTo(100, 800);
         setTimeout(function() {
             window.location='#anchor';
             setTimeout(finishTest, 0);
         }, 0);
     }

     var scroller;
     function finishTest()
     {
         if (window.location.toString().indexOf("#") == -1) {
             setTimeout(finishTest, 0);
             return;
         }

         scroller = document.getElementById('scroller');

         shouldBe('scroller.scrollTop', '465');
         shouldBe('scroller.scrollLeft', '0');

         shouldBe('document.scrollingElement.scrollTop', '800');
         shouldBe('document.scrollingElement.scrollLeft', '100');

         window.scrollTo(0, 0);
         finishJSTest();
     }
     </script>
 </head>
 <body onload="runTest()">

 <div class="fixed">
     <div id="scroller">
         <a name="anchor">Anchor is here</a>
     </div>
 </div>

 <script src="../../resources/js-test-post.js"></script>

 </body></html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	height: 2000px;
	width: 2000px;
	}

	.fixed {
	position: fixed;
	top: 250px;
	left: 40px;
	height: 200px;
	width: 200px;
	border: 1px solid black;
	}

	#scroller {
	height: 100%;
	width: 100%;
	overflow: scroll;
	}

	#scroller > a {
	display: block;
	height: 50px;
	margin-top: 600px;
	}
	</style>
	<script src="../../resources/js-test-pre.js"></script>
	<script>
	description("Tests scrolling to an anchor inside overflow:scroll inside position:fixed correctly scrolls the overflow, and not the page");
	window.jsTestIsAsync = true;

	function runTest()
	{
	window.scrollTo(100, 800);
	setTimeout(function() {
	window.location='#anchor';
	setTimeout(finishTest, 0);
	}, 0);
	}

	var scroller;
	function finishTest()
	{
	if (window.location.toString().indexOf("#") == -1) {
	setTimeout(finishTest, 0);
	return;
	}

	scroller = document.getElementById('scroller');

	shouldBe('scroller.scrollTop', '465');
	shouldBe('scroller.scrollLeft', '0');

	shouldBe('document.scrollingElement.scrollTop', '800');
	shouldBe('document.scrollingElement.scrollLeft', '100');

	window.scrollTo(0, 0);
	finishJSTest();
	}
	</script>
	</head>
	<body onload="runTest()">

	<div class="fixed">
	<div id="scroller">
	<a name="anchor">Anchor is here</a>
	</div>
	</div>

	<script src="../../resources/js-test-post.js"></script>

	</body></html>