| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script src='/resources/testharness.js'></script> |
| 3 <script src='/resources/testharnessreport.js'></script> |
| 4 <title> Check End Position of ScrollIntoView</title> |
| 5 <div id='container' style='height: 2500px; width: 2500px;'> |
| 6 <div id='content' style='height: 500px; width: 500px;margin-left: 1000px; marg
in-right: 1000px; margin-top: 1000px;margin-bottom: 1000px'> |
| 7 </div> |
| 8 </div> |
| 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 funct.step(function() { |
| 24 assert_approx_equals(window.scrollX, x, 1); |
| 25 assert_approx_equals(window.scrollY, y, 1); |
| 26 funct.done(); |
| 27 if (next) |
| 28 next(); |
| 29 }); |
| 30 } |
| 31 } |
| 32 |
| 33 var checkNearest = async_test("Smooth ScrollIntoView should scroll the element t
o the 'nearest' position"); |
| 34 checkNearest.step(function() { |
| 35 content.scrollIntoView( |
| 36 {behavior: 'smooth', block: 'nearest', inlinePosition: 'nearest'}); |
| 37 frames = 0; |
| 38 var x = content.offsetLeft + content_width - window_width; |
| 39 var y = content.offsetTop + content_height - window_height; |
| 40 animate(checkNearest, x, y, test2); |
| 41 }); |
| 42 |
| 43 var checkStart = async_test("Smooth ScrollIntoView should scroll the element to
the 'start' position"); |
| 44 function test2() { |
| 45 checkStart.step(function() { |
| 46 content.scrollIntoView( |
| 47 {behavior: 'smooth', block: 'start', inlinePosition: 'start'}); |
| 48 frames = 0; |
| 49 animate(checkStart, content.offsetLeft, content.offsetTop, test3); |
| 50 }); |
| 51 } |
| 52 |
| 53 var checkCenter = async_test("Smooth ScrollIntoView should scroll the element to
the 'center' position"); |
| 54 function test3() { |
| 55 checkCenter.step(function() { |
| 56 content.scrollIntoView( |
| 57 {behavior: 'smooth', block: 'center', inlinePosition: 'center'}); |
| 58 frames = 0; |
| 59 var x = content.offsetLeft + (content_width - window_width) / 2; |
| 60 var y = content.offsetTop + (content_height - window_height) / 2; |
| 61 animate(checkCenter, x, y, test4); |
| 62 }); |
| 63 } |
| 64 |
| 65 var checkEnd = async_test("Smooth ScrollIntoView should scroll the element to th
e 'end' position"); |
| 66 function test4() { |
| 67 checkEnd.step(function() { |
| 68 content.scrollIntoView( |
| 69 {behavior: 'smooth', block: 'end', inlinePosition: 'end'}); |
| 70 frames = 0; |
| 71 var x = content.offsetLeft + content_width - window_width; |
| 72 var y = content.offsetTop + content_height - window_height; |
| 73 animate(checkEnd, x, y, null); |
| 74 }); |
| 75 } |
| 76 |
| 77 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2650343008:
Implement Element.scrollIntoView for scroll-behavior: smooth. (Closed)
