third_party/WebKit/LayoutTests/intersection-observer/unclipped-root.html - Issue 2560253004: IntersectionObserver: convert tests to testharness.js

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

Issue 2560253004: IntersectionObserver: convert tests to testharness.js (Closed)

Patch Set: Formatting tweaks and explicit resource paths Created 3 years, 12 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:

« third_party/WebKit/LayoutTests/intersection-observer/timestamp.html ('K') | « third_party/WebKit/LayoutTests/intersection-observer/timestamp-expected.txt ('k') | third_party/WebKit/LayoutTests/intersection-observer/unclipped-root-expected.txt » ('j') | third_party/WebKit/LayoutTests/resources/intersection-observer-helper-functions.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

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

3 <script src="../resources/intersection-observer-helper-functions.js"></script>	3 <script src="../resources/testharnessreport.js"></script>

	4 <script src="./resources/intersection-observer-test-utils.js"></script>

	5

4 <style>	6 <style>

	7 pre, #log {

	8 position: absolute;

	9 top: 0;

	10 left: 200px;

	11 }

5 #root {	12 #root {

6 overflow: visible;	13 overflow: visible;

7 height: 200px;	14 height: 200px;

8 width: 200px;	15 width: 160px;

9 border: 7px solid black;	16 border: 7px solid black;

10 }	17 }

11 #target {	18 #target {

12 width: 100px;	19 width: 100px;

13 height: 100px;	20 height: 100px;

14 background-color: green;	21 background-color: green;

15 }	22 }

16 </style>	23 </style>

	24

17 <div id="root">	25 <div id="root">

18 <div id="target" style="transform: translateY(300px)"></div>	26 <div id="target" style="transform: translateY(300px)"></div>

19 </div>	27 </div>

20	28

21 <script>	29 <script>

22 description("Test that border bounding box is used to calculate intersection wit h a non-scrolling root.");

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

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

25 var entries = [];	30 var entries = [];

26 var observer = new IntersectionObserver(	31 var target;

27 changes => { entries.push(...changes) },

28 { root: document.getElementById("root") }

29 );

30	32

31 onload = function() {	33 runTestCycle(function() {

	34 target = document.getElementById("target");

	35 assert_true(!!target, "target exists");

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

	37 assert_true(!!root, "root exists");

	38 var observer = new IntersectionObserver(function(changes) {

	39 entries = entries.concat(changes)

	40 }, {root: root});

32 observer.observe(target);	41 observer.observe(target);

33 entries.push(...observer.takeRecords());	42 entries = entries.concat(observer.takeRecords());

34 shouldBeEqualToNumber("entries.length", 0);	43 assert_equals(entries.length, 0, "No initial notifications.");

35 waitForNotification(step0);	44 runTestCycle(step0, "First rAF should not generate notifications.");

36 }	45 }, "Test that border bounding box is used to calculate intersection with a non-s crolling root.");

37	46

38 function step0() {	47 function step0() {

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

40 target.style.transform = "translateY(195px)";	48 target.style.transform = "translateY(195px)";

41 waitForNotification(step1);	49 runTestCycle(step1, "target.style.transform = 'translateY(195px)'");

	50 assert_equals(entries.length, 0, "No notifications after first rAF.");

42 }	51 }

43	52

44 function step1() {	53 function step1() {

45 shouldBeEqualToNumber("entries.length", 1);	54 target.style.transform = "";

46 if (entries.length > 0) {	55 checkEntry(entries, 0, [15, 115, 210, 310, 15, 115, 210, 222, 8, 182, 8, 222, target]);

47 shouldBeEqualToNumber("entries[0].boundingClientRect.left", 15);

48 shouldBeEqualToNumber("entries[0].boundingClientRect.right", 115);

49 shouldBeEqualToNumber("entries[0].boundingClientRect.top", 210);

50 shouldBeEqualToNumber("entries[0].boundingClientRect.bottom", 310);

51 shouldBeEqualToNumber("entries[0].intersectionRect.left", 15);

52 shouldBeEqualToNumber("entries[0].intersectionRect.right", 115);

53 shouldBeEqualToNumber("entries[0].intersectionRect.top", 210);

54 shouldBeEqualToNumber("entries[0].intersectionRect.bottom", 222);

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

56 shouldBeEqualToNumber("entries[0].rootBounds.right", 222);

57 shouldBeEqualToNumber("entries[0].rootBounds.top", 8);

58 shouldBeEqualToNumber("entries[0].rootBounds.bottom", 222);

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

60 }

61

62 finishJSTest();

63 }	56 }

64 </script>	57 </script>

OLD	NEW