scrollIntoView-scrollPadding.html (2420B)
1 <!DOCTYPE html> 2 <title>CSSOM View - scrollIntoView considers scroll-padding</title> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <link rel="author" title="Sandra Sun" href="mailto:sunyunjia@chromium.org"> 6 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollintoview"> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-snap-1/#scroll-padding"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 11 <style> 12 #scroller { 13 width: 200px; 14 height: 200px; 15 overflow: scroll; 16 scroll-padding-top: 4px; 17 scroll-padding-right: 8px; 18 scroll-padding-bottom: 12px; 19 scroll-padding-left: 16px; 20 } 21 #content { 22 width: 500px; 23 height: 500px; 24 } 25 #target { 26 position: relative; 27 left: 200px; 28 top: 200px; 29 width: 100px; 30 height: 100px; 31 background-color: lightgreen; 32 } 33 </style> 34 35 <div id="scroller"> 36 <div id="content"> 37 <div id="target"></div> 38 </div> 39 </div> 40 <div id="log"></div> 41 42 <script> 43 var target = document.getElementById("target"); 44 var scroller = document.getElementById("scroller"); 45 var expectedXLeft = 200 - 16; 46 var expectedXRight = 200 - scroller.clientWidth + 8 + target.clientWidth; 47 var expectedXCenter = 200 - (16 + scroller.clientWidth - 8) / 2 + 48 target.clientWidth / 2; 49 50 var expectedYTop = 200 - 4; 51 var expectedYBottom = 200 - scroller.clientHeight + 12 + target.clientHeight; 52 var expectedYCenter = 200 - (4 + scroller.clientHeight - 12) / 2 + 53 target.clientHeight / 2; 54 55 // This formats dict as a string suitable as test name. 56 // format_value() is provided by testharness.js, 57 // which also preserves sign for -0. 58 function format_dict(dict) { 59 const props = []; 60 for (let prop in dict) { 61 props.push(`${prop}: ${format_value(dict[prop])}`); 62 } 63 return `{${props.join(", ")}}`; 64 } 65 66 [ 67 [{block: "center", inline: "center"}, expectedXCenter, expectedYCenter], 68 [{block: "start", inline: "start"}, expectedXLeft, expectedYTop], 69 [{block: "end", inline: "end"}, expectedXRight, expectedYBottom], 70 ].forEach(([input, expectedX, expectedY]) => { 71 test(() => { 72 scroller.scrollTo(0, 0); 73 target.scrollIntoView(input); 74 assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX"); 75 assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY"); 76 }, `scrollIntoView(${format_dict(input)})`); 77 }) 78 </script>