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

Side by Side Diff: third_party/WebKit/LayoutTests/intersection-observer/same-document-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/same-document-no-root-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/same-document-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 style="width:100px; height: 300px;"></div>

	7 <div id="target" style="background-color: green; width:100px; height:100px"></ div>

	8 </div>

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

	10

	11 <script>

	12 description("Simple intersection observer test with explicit root and target i n the same document.");

	13 var target = document.getElementById("target");

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

	15 var entries = [];

	16

	17 observer_callback = function(changes) {

	18 for (var i in changes)

	19 entries.push(changes[i]);

	20 };

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

	22 observer.observe(target);

	23

	24 // Test that notifications are not generated when the target is overflow clipp ed by the root.

	25 function step0() {

	26 setTimeout(function() {

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

	28 document.scrollingElement.scrollTop = 600;

	29 requestAnimationFrame(step1);

	30 });

	31 }

	32

	33 function step1() {

	34 setTimeout(function() {

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

	36 root.scrollTop = 150;

	37 requestAnimationFrame(step2);

	38 });

	39 }

	40

	41 function step2() {

	42 setTimeout(function() {

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

	44 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 8);

	45 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 108);

	46 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 258);

	47 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 358);

	48 shouldBeEqualToNumber("entries[0].intersectionRect.left", 8);

	49 shouldBeEqualToNumber("entries[0].intersectionRect.right", 108);

	50 shouldBeEqualToNumber("entries[0].intersectionRect.top", 258);

	51 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 308);

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

	53 shouldBeEqualToNumber("entries[0].rootBounds.right", 108);

	54 shouldBeEqualToNumber("entries[0].rootBounds.top", 108);

	55 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 308);

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

	57 document.scrollingElement.scrollTop = 0;

	58 requestAnimationFrame(step3);

	59 });

	60 }

	61

	62 function step3() {

	63 setTimeout(function() {

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

	65 root.scrollTop = 0;

	66 requestAnimationFrame(step4);

	67 });

	68 }

	69

	70 function step4() {

	71 setTimeout(function() {

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

	73 shouldBeEqualToNumber("entries[1].boundingClientRect.left", 8);

	74 shouldBeEqualToNumber("entries[1].boundingClientRect.right", 108);

	75 shouldBeEqualToNumber("entries[1].boundingClientRect.top", 1008);

	76 shouldBeEqualToNumber("entries[1].boundingClientRect.bottom", 1108);

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

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

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

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

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

	82 shouldBeEqualToNumber("entries[1].rootBounds.right", 108);

	83 shouldBeEqualToNumber("entries[1].rootBounds.top", 708);

	84 shouldBeEqualToNumber("entries[1].rootBounds.bottom", 908);

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

	86 root.scrollTop = 150;

	87 requestAnimationFrame(step5);

	88 });

	89 }

	90

	91 // This tests that notifications are generated even when the root element is o ff screen.

	92 function step5() {

	93 setTimeout(function() {

	94 shouldBeEqualToNumber("entries.length", 3);

	95 shouldBeEqualToNumber("entries[2].boundingClientRect.left", 8);

	96 shouldBeEqualToNumber("entries[2].boundingClientRect.right", 108);

	97 shouldBeEqualToNumber("entries[2].boundingClientRect.top", 858);

	98 shouldBeEqualToNumber("entries[2].boundingClientRect.bottom", 958);

	99 shouldBeEqualToNumber("entries[2].intersectionRect.left", 8);

	100 shouldBeEqualToNumber("entries[2].intersectionRect.right", 108);

	101 shouldBeEqualToNumber("entries[2].intersectionRect.top", 858);

	102 shouldBeEqualToNumber("entries[2].intersectionRect.bottom", 908);

	103 shouldBeEqualToNumber("entries[2].rootBounds.left", 8);

	104 shouldBeEqualToNumber("entries[2].rootBounds.right", 108);

	105 shouldBeEqualToNumber("entries[2].rootBounds.top", 708);

	106 shouldBeEqualToNumber("entries[2].rootBounds.bottom", 908);

	107 shouldEvaluateToSameObject("entries[2].target", target);

	108 finishTest();

	109 });

	110 }

	111

	112 requestAnimationFrame(step0);

	113 </script>

OLD	NEW