OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE HTML> | |
2 <title> Check End Position of ScrollIntoView</title> | |
3 <div id='container' style='height: 2500px; width: 2500px;'> | |
4 <div id='content' style='height: 500px; width: 500px;margin-left: 1000px; marg in-right: 1000px; margin-top: 1000px;margin-bottom: 1000px'> | |
5 </div> | |
6 </div> | |
7 <script src='/resources/testharness.js'></script> | |
bokan
2017/05/15 17:15:27
Super-nit: it's customary for testharness includes
sunyunjia
2017/05/19 16:24:28
Done.
| |
8 <script src='/resources/testharnessreport.js'></script> | |
9 <script> | |
10 | |
11 var frames = 0; | |
12 var content_height = 500; | |
13 var content_width = 500; | |
14 var window_height = visualViewport.clientHeight; | |
15 var window_width = visualViewport.clientWidth; | |
16 var content = document.getElementById('content'); | |
17 | |
18 function animate (funct, x, y, next) { | |
19 if (frames < 500) { | |
20 ++frames; | |
21 requestAnimationFrame(animate.bind(null, funct, x, y, next)); | |
22 } else { | |
23 assert_approx_equals(window.scrollX, x, 1); | |
bokan
2017/05/15 17:15:27
I'm kind of new to testharness.js but my read is t
sunyunjia
2017/05/19 16:24:28
Done.
| |
24 assert_approx_equals(window.scrollY, y, 1); | |
25 funct.done(); | |
26 next(); | |
27 } | |
28 } | |
29 | |
30 var checkNearest = async_test("Smooth ScrollIntoView should scroll the element t o the 'nearest' position"); | |
31 checkNearest.step(function() { | |
32 content.scrollIntoView( | |
33 {behavior: 'smooth', block: 'nearest', inlinePosition: 'nearest'}); | |
34 frames = 0; | |
35 var x = content.offsetLeft + content_width - window_width; | |
36 var y = content.offsetTop + content_height - window_height; | |
37 animate(checkNearest, x, y, test2); | |
38 }); | |
39 | |
40 var checkStart = async_test("Smooth ScrollIntoView should scroll the element to the 'start' position"); | |
41 function test2() { | |
42 checkStart.step(function() { | |
43 content.scrollIntoView( | |
44 {behavior: 'smooth', block: 'start', inlinePosition: 'start'}); | |
45 frames = 0; | |
46 animate(checkStart, content.offsetLeft, content.offsetTop, test3); | |
47 }); | |
48 } | |
49 | |
50 var checkCenter = async_test("Smooth ScrollIntoView should scroll the element to the 'center' position"); | |
51 function test3() { | |
52 checkCenter.step(function() { | |
53 content.scrollIntoView( | |
54 {behavior: 'smooth', block: 'center', inlinePosition: 'center'}); | |
55 frames = 0; | |
56 var x = content.offsetLeft + (content_width - window_width) / 2; | |
57 var y = content.offsetTop + (content_height - window_height) / 2; | |
58 animate(checkCenter, x, y, test4); | |
59 }); | |
60 } | |
61 | |
62 var checkEnd = async_test("Smooth ScrollIntoView should scroll the element to th e 'end' position"); | |
63 function test4() { | |
64 checkEnd.step(function() { | |
65 content.scrollIntoView( | |
66 {behavior: 'smooth', block: 'end', inlinePosition: 'end'}); | |
67 frames = 0; | |
68 var x = content.offsetLeft + content_width - window_width; | |
69 var y = content.offsetTop + content_height - window_height; | |
70 animate(checkEnd, x, y, end); | |
71 }); | |
72 } | |
73 | |
74 function end() {} | |
bokan
2017/05/15 17:15:27
Pass in null for the last case and check `next` be
sunyunjia
2017/05/19 16:24:28
Done.
| |
75 | |
76 </script> | |
OLD | NEW |