javascript/atoms/test/scrolled_into_view_test.html - external/selenium - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
   <title>scrolling_test.html</title>
   <script src="test_bootstrap.js"></script>
   <script type="text/javascript">
     goog.require('bot.dom');
     goog.require('bot.locators');
     goog.require('bot.userAgent');
     goog.require('goog.events');
     goog.require('goog.testing.jsunit');
   </script>
 </head>
 <body>
   <script type="text/javascript">
     var findElement = bot.locators.findElement;
     var topLeft = new goog.math.Coordinate(0, 0);

     function testOffscreenIsNotInView() {
       var element = findElement({id: 'offscreen'});
       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }

     function testOffscreenIsNotInViewWithOffset() {
       var element = findElement({id: 'offscreen'});
       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertFalse(inView);
     }

     function testOnScreenIsInView() {
       var element = findElement({id: 'onscreen'});
       var inView = bot.dom.isScrolledIntoView(element);
       assertTrue(inView);
     }

     function testOnScreenIsInViewWithOffset() {
       var element = findElement({id: 'onscreen'});
       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertTrue(inView);
     }

     function testHiddenByScrollableOverflowIsNotInView() {
       var element = findElement({id: 'scrollable'});
       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }

     function testHiddenByScrollableOverflowIsNotInViewWithOffset() {
       var element = findElement({id: 'scrollable'});
       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertFalse(inView);
     }


     function testNotHiddenByOverflowIsInView() {
       var element = findElement({id: 'scrollable-in-view'});
       var inView = bot.dom.isScrolledIntoView(element);
       assertTrue(inView);
     }

     function testNotHiddenByOverflowIsInViewWithOffset() {
       var element = findElement({id: 'scrollable-in-view'});
       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertTrue(inView);
     }

     function testHiddenByOverflowIsNotInView() {
       var element = findElement({id: 'scrollable'});
       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }

     function testHiddenByOverflowIsNotInViewWithOffset() {
       var element = findElement({id: 'scrollable'});
       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertFalse(inView);
     }

     function testHiddenByOverflowIsNotInView() {
       var element = findElement({id: 'hidden-by-overflow'});
       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }

     function testHiddenByOverflowIsNotInViewWithOffset() {
       var element = findElement({id: 'hidden-by-overflow'});
       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertFalse(inView);
     }

     function testHiddenByNestedScrollContainersIsNotInView() {
       var element = findElement({id: 'nested'});
       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }

     function testHiddenByNestedScrollContainersIsNotInViewWithOffset() {
       var element = findElement({id: 'nested'});
       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertFalse(inView);
     }

     function testHiddenByIframeIsNotInView() {
       var iframe = findElement({id: 'scrollable-iframe'});
       var frameDocument = iframe.contentWindow.document;
       var element = findElement({id: 'iframe-scrollable'}, frameDocument);

       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }

     function testHiddenByIframeIsNotInViewWithOffset() {
       var iframe = findElement({id: 'scrollable-iframe'});
       var frameDocument = iframe.contentWindow.document;
       var element = findElement({id: 'iframe-scrollable'}, frameDocument);

       var inView = bot.dom.isScrolledIntoView(element, topLeft);
       assertFalse(inView);
     }

     function testOffscreenInIframeIsNotInView() {
       var iframe = findElement({id: 'offscreen-in-view-iframe'});
       var frameDocument = iframe.contentWindow.document;
       var element = findElement({id: 'in-offscreen-in-view-iframe'}, frameDocument);
       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }

     function testNestedIframeWhereMiddleNeedsScrollingIsNotInView() {
       // Android Froyo zooms out to auto-fit the page and make the element visible.
       if (bot.userAgent.ANDROID_PRE_GINGERBREAD) {
         return;
       }
       var iframe = findElement({id: 'nested-iframe-parent'});
       var frameDocument = iframe.contentWindow.document;
       var innerIframe = findElement({id: 'middle'}, frameDocument);
       var innerDocument = innerIframe.contentWindow.document;
       var element = findElement({id: 'in-offscreen-in-view-iframe'}, innerDocument);
       var inView = bot.dom.isScrolledIntoView(element);
       assertFalse(inView);
     }
   </script>
   <div style="position: absolute; left: 150px; top: 100px; border: 2px yellow solid;"><a id="onscreen">Onscreen</a></div>
   <div style="position: absolute; left: 3000px; border: 2px orange solid;"><a id="offscreen">Offscreen</a></div>
   <div style="overflow: hidden; width: 50px; height: 30px; border: 2px blue solid;" id="hidden-by-overflow-container">
     <a style="margin-left: 100px;" id="hidden-by-overflow">Hidden</a></div>
   </div>
   <div id="scrollable-container" style="overflow: scroll; width: 100px; height: 100px; border: 2px purple solid;">
     <a id="scrollable" style="margin-left: 150px;">Scrollable</a>
   </div>
   <div id="scrollable-in-view-container" style="overflow: scroll; width: 200px;
     height: 50px; border: 2px grey solid;">&nbsp;&nbsp;&nbsp;<a
       id="scrollable-in-view">Scrollable&nbsp;in&nbsp;view</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </div>
   <div id="scrollable-in-view-container2" style="overflow: scroll; width: 200px;
     height: 50px; border: 2px grey solid;">&nbsp;&nbsp;&nbsp;<a
       id="scrollable-in-view2">Scrollable&nbsp;in&nbsp;view</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   </div>
   <div style="overflow: hidden; width: 100px; height: 30px; border: 2px black solid;" id="not-hidden-by-hidden-overflow-container">&nbsp;&nbsp;&nbsp;<a id="not-hidden-by-hidden-overflow">Not hidden</a></div>
   <div style="overflow: scroll; width: 100px; height: 100px;" id="nested-top-container">
     <div style="overflow: scroll; width: 150px; left: 150px; margin-left:
       200px;" id="nested-inner-container"><a id="nested" style="margin-left: 200px;">Nested</a></div>
   </div>

   <div id="scrollable-but-unscrolled-top-container" style="overflow: scroll;
     width: 150px; height: 100px; border: 2px cyan solid;">
     <div id="scrollable-but-unscrolled-middle-container" style="overflow:
       scroll; width: 100px; height: 50px; border: 2px green solid; margin-left:
       200px">&nbsp;&nbsp;&nbsp;<a style="margin-right: 200px;"
         id="scrollable-but-unscrolled-not-hidden">X</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
   </div>

   <iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="scrollable-iframe"></iframe>
   <iframe src="testdata/nested_scrolling_iframe_parent.html" style="width: 200px; height: 200px;" id="nested-iframe-parent"></iframe>
   <div style="position: absolute; left: 3000px; top: 200px; border: 2px orange solid;">
     <iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="offscreen-scrollable-iframe"></iframe>
   </div>
   <div style="position: absolute; left: 3000px; top: 500px; border: 2px red solid;">
     <iframe src="testdata/simple.html" style="width: 200px; height: 100px;" id="offscreen-in-view-iframe"></iframe>
   </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>scrolling_test.html</title>
	<script src="test_bootstrap.js"></script>
	<script type="text/javascript">
	goog.require('bot.dom');
	goog.require('bot.locators');
	goog.require('bot.userAgent');
	goog.require('goog.events');
	goog.require('goog.testing.jsunit');
	</script>
	</head>
	<body>
	<script type="text/javascript">
	var findElement = bot.locators.findElement;
	var topLeft = new goog.math.Coordinate(0, 0);

	function testOffscreenIsNotInView() {
	var element = findElement({id: 'offscreen'});
	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}

	function testOffscreenIsNotInViewWithOffset() {
	var element = findElement({id: 'offscreen'});
	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertFalse(inView);
	}

	function testOnScreenIsInView() {
	var element = findElement({id: 'onscreen'});
	var inView = bot.dom.isScrolledIntoView(element);
	assertTrue(inView);
	}

	function testOnScreenIsInViewWithOffset() {
	var element = findElement({id: 'onscreen'});
	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertTrue(inView);
	}

	function testHiddenByScrollableOverflowIsNotInView() {
	var element = findElement({id: 'scrollable'});
	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}

	function testHiddenByScrollableOverflowIsNotInViewWithOffset() {
	var element = findElement({id: 'scrollable'});
	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertFalse(inView);
	}


	function testNotHiddenByOverflowIsInView() {
	var element = findElement({id: 'scrollable-in-view'});
	var inView = bot.dom.isScrolledIntoView(element);
	assertTrue(inView);
	}

	function testNotHiddenByOverflowIsInViewWithOffset() {
	var element = findElement({id: 'scrollable-in-view'});
	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertTrue(inView);
	}

	function testHiddenByOverflowIsNotInView() {
	var element = findElement({id: 'scrollable'});
	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}

	function testHiddenByOverflowIsNotInViewWithOffset() {
	var element = findElement({id: 'scrollable'});
	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertFalse(inView);
	}

	function testHiddenByOverflowIsNotInView() {
	var element = findElement({id: 'hidden-by-overflow'});
	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}

	function testHiddenByOverflowIsNotInViewWithOffset() {
	var element = findElement({id: 'hidden-by-overflow'});
	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertFalse(inView);
	}

	function testHiddenByNestedScrollContainersIsNotInView() {
	var element = findElement({id: 'nested'});
	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}

	function testHiddenByNestedScrollContainersIsNotInViewWithOffset() {
	var element = findElement({id: 'nested'});
	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertFalse(inView);
	}

	function testHiddenByIframeIsNotInView() {
	var iframe = findElement({id: 'scrollable-iframe'});
	var frameDocument = iframe.contentWindow.document;
	var element = findElement({id: 'iframe-scrollable'}, frameDocument);

	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}

	function testHiddenByIframeIsNotInViewWithOffset() {
	var iframe = findElement({id: 'scrollable-iframe'});
	var frameDocument = iframe.contentWindow.document;
	var element = findElement({id: 'iframe-scrollable'}, frameDocument);

	var inView = bot.dom.isScrolledIntoView(element, topLeft);
	assertFalse(inView);
	}

	function testOffscreenInIframeIsNotInView() {
	var iframe = findElement({id: 'offscreen-in-view-iframe'});
	var frameDocument = iframe.contentWindow.document;
	var element = findElement({id: 'in-offscreen-in-view-iframe'}, frameDocument);
	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}

	function testNestedIframeWhereMiddleNeedsScrollingIsNotInView() {
	// Android Froyo zooms out to auto-fit the page and make the element visible.
	if (bot.userAgent.ANDROID_PRE_GINGERBREAD) {
	return;
	}
	var iframe = findElement({id: 'nested-iframe-parent'});
	var frameDocument = iframe.contentWindow.document;
	var innerIframe = findElement({id: 'middle'}, frameDocument);
	var innerDocument = innerIframe.contentWindow.document;
	var element = findElement({id: 'in-offscreen-in-view-iframe'}, innerDocument);
	var inView = bot.dom.isScrolledIntoView(element);
	assertFalse(inView);
	}
	</script>
	<div style="position: absolute; left: 150px; top: 100px; border: 2px yellow solid;"><a id="onscreen">Onscreen</a></div>
	<div style="position: absolute; left: 3000px; border: 2px orange solid;"><a id="offscreen">Offscreen</a></div>
	<div style="overflow: hidden; width: 50px; height: 30px; border: 2px blue solid;" id="hidden-by-overflow-container">
	<a style="margin-left: 100px;" id="hidden-by-overflow">Hidden</a></div>
	</div>
	<div id="scrollable-container" style="overflow: scroll; width: 100px; height: 100px; border: 2px purple solid;">
	<a id="scrollable" style="margin-left: 150px;">Scrollable</a>
	</div>
	<div id="scrollable-in-view-container" style="overflow: scroll; width: 200px;
	height: 50px; border: 2px grey solid;">   <a
	id="scrollable-in-view">Scrollable in view</a>
	</div>
	<div id="scrollable-in-view-container2" style="overflow: scroll; width: 200px;
	height: 50px; border: 2px grey solid;">   <a
	id="scrollable-in-view2">Scrollable in view</a>
	</div>
	<div style="overflow: hidden; width: 100px; height: 30px; border: 2px black solid;" id="not-hidden-by-hidden-overflow-container">   <a id="not-hidden-by-hidden-overflow">Not hidden</a></div>
	<div style="overflow: scroll; width: 100px; height: 100px;" id="nested-top-container">
	<div style="overflow: scroll; width: 150px; left: 150px; margin-left:
	200px;" id="nested-inner-container"><a id="nested" style="margin-left: 200px;">Nested</a></div>
	</div>

	<div id="scrollable-but-unscrolled-top-container" style="overflow: scroll;
	width: 150px; height: 100px; border: 2px cyan solid;">
	<div id="scrollable-but-unscrolled-middle-container" style="overflow:
	scroll; width: 100px; height: 50px; border: 2px green solid; margin-left:
	200px">   <a style="margin-right: 200px;"
	id="scrollable-but-unscrolled-not-hidden">X</a>                  </div>
	</div>

	<iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="scrollable-iframe"></iframe>
	<iframe src="testdata/nested_scrolling_iframe_parent.html" style="width: 200px; height: 200px;" id="nested-iframe-parent"></iframe>
	<div style="position: absolute; left: 3000px; top: 200px; border: 2px orange solid;">
	<iframe src="testdata/scrolling_iframe.html" style="width: 200px; height: 100px;" id="offscreen-scrollable-iframe"></iframe>
	</div>
	<div style="position: absolute; left: 3000px; top: 500px; border: 2px red solid;">
	<iframe src="testdata/simple.html" style="width: 200px; height: 100px;" id="offscreen-in-view-iframe"></iframe>
	</div>
	</body>
	</html>