third_party/WebKit/LayoutTests/intersection-observer/iframe-root.html - Issue 1449623002: IntersectionObserver: second cut.

Side by Side Diff: third_party/WebKit/LayoutTests/intersection-observer/iframe-root.html

Issue 1449623002: IntersectionObserver: second cut. (Closed) Base URL: https://chromium.googlesource.com/chromium/src@master

Patch Set: sigbjornf nits Created 4 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/intersection-observer/iframe-no-root-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/iframe-root-expected.txt » ('j') | third_party/WebKit/Source/core/dom/Document.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

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

	3 <script src="helper-functions.js"></script>

	4 <div style="width:100%; height:700px;"></div>

	5 <div id="root" style="display: inline-block; overflow-y: scroll; height: 200px;" >

	6 <div id="target" style="width:100px; height:300px"></div>

	7 <iframe id="target-iframe" src="../resources/intersection-observer-subframe.ht ml" style="width: 300px; height: 100px; overflow-y: scroll"></iframe>

	8 </div>

	9 <div style="width:100%; height:700px;"></div>

	10

	11 <script>

	12 description("Simple intersection observer test with no explicit root and target in an iframe.");

	13 var entries = [];

	14 var root = document.getElementById("root");

	15 var targetIframe = document.getElementById("target-iframe");

	16

	17 targetIframe.onload = function() {

	18 var target = targetIframe.contentDocument.getElementById("target");

	19 var iframeScroller = targetIframe.contentDocument.scrollingElement;

	20

	21 observer_callback = function(changes) {

	22 for (var i in changes)

	23 entries.push(changes[i]);

	24 };

	25 var observer = new IntersectionObserver(observer_callback, {"root": document.g etElementById("root")});

	26 observer.observe(target);

	27

	28 // TODO(szager): It shouldn't be necessary to RAF after the call to observer()

	29 // and before changing the scroll position, but it is.

	30

	31 function step0() {

	32 setTimeout(function() {

	33 shouldBeEqualToNumber("entries.length", 0);

	34 document.scrollingElement.scrollTop = 250;

	35 requestAnimationFrame(step1);

	36 });

	37 }

	38

	39 function step1() {

	40 setTimeout(function() {

	41 shouldBeEqualToNumber("entries.length", 0);

	42 iframeScroller.scrollTop = 200;

	43 requestAnimationFrame(step2);

	44 });

	45 }

	46

	47 function step2() {

	48 setTimeout(function() {

	49 shouldBeEqualToNumber("entries.length", 0);

	50 root.scrollTop = 175;

	51 requestAnimationFrame(step3);

	52 });

	53 }

	54

	55 function step3() {

	56 setTimeout(function() {

	57 shouldBeEqualToNumber("entries.length", 1);

	58 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 18);

	59 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 118);

	60 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 593);

	61 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 693);

	62 shouldBeEqualToNumber("entries[0].intersectionRect.left", 18);

	63 shouldBeEqualToNumber("entries[0].intersectionRect.right", 118);

	64 shouldBeEqualToNumber("entries[0].intersectionRect.top", 593);

	65 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 658);

	66 shouldBeEqualToNumber("entries[0].rootBounds.left", 8);

	67 shouldBeEqualToNumber("entries[0].rootBounds.right", 312);

	68 shouldBeEqualToNumber("entries[0].rootBounds.top", 458);

	69 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 658);

	70 shouldEvaluateToSameObject("entries[0].target", target);

	71 document.scrollingElement.scrollTop = 100;

	72 requestAnimationFrame(step4);

	73 });

	74 }

	75

	76 function step4() {

	77 setTimeout(function() {

	78 shouldBeEqualToNumber("entries.length", 1);

	79 root.scrollTop = 100;

	80 requestAnimationFrame(step5);

	81 });

	82 }

	83

	84 function step5() {

	85 setTimeout(function() {

	86 shouldBeEqualToNumber("entries.length", 2);

	87 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 18);

	88 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 118);

	89 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 818);

	90 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 918);

	91 shouldBeEqualToNumber("entries[1].intersectionRect.left", 0);

	92 shouldBeEqualToNumber("entries[1].intersectionRect.right", 0);

	93 shouldBeEqualToNumber("entries[1].intersectionRect.top", 0);

	94 shouldBeEqualToNumber("entries[1].intersectionRect.bottom", 0);

	95 shouldBeEqualToNumber("entries[1].rootBounds.left", 8);

	96 shouldBeEqualToNumber("entries[1].rootBounds.right", 312);

	97 shouldBeEqualToNumber("entries[1].rootBounds.top", 608);

	98 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 808);

	99 shouldEvaluateToSameObject("entries[1].target", target);

	100 finishTest();

	101 document.scrollingElement.scrollTop = 0;

	102 });

	103 }

	104

	105 requestAnimationFrame(step0);

	106 }

	107 </script>

OLD	NEW