scrollIntoView-scrollMargin.html (2419B)
1 <!DOCTYPE html> 2 <title>CSSOM View - scrollIntoView considers scroll-margin</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-margin"> 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 } 17 #content { 18 width: 500px; 19 height: 500px; 20 } 21 #target { 22 position: relative; 23 left: 200px; 24 top: 200px; 25 width: 100px; 26 height: 100px; 27 scroll-margin-top: 4px; 28 scroll-margin-right: 8px; 29 scroll-margin-bottom: 12px; 30 scroll-margin-left: 16px; 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 46 var expectedXLeft = 200 - 16; 47 var expectedXRight = 200 - scroller.clientWidth + target.clientWidth + 8; 48 var expectedXCenter = 200 - (scroller.clientWidth / 2) + 49 (target.clientWidth + 8 - 16) / 2; 50 51 var expectedYTop = 200 - 4; 52 var expectedYBottom = 200 - scroller.clientHeight + target.clientHeight + 12; 53 var expectedYCenter = 200 - (scroller.clientHeight / 2) + 54 (target.clientHeight + 12 - 4) / 2; 55 56 // This formats dict as a string suitable as test name. 57 // format_value() is provided by testharness.js, 58 // which also preserves sign for -0. 59 function format_dict(dict) { 60 const props = []; 61 for (let prop in dict) { 62 props.push(`${prop}: ${format_value(dict[prop])}`); 63 } 64 return `{${props.join(", ")}}`; 65 } 66 67 [ 68 [{block: "center", inline: "center"}, expectedXCenter, expectedYCenter], 69 [{block: "start", inline: "start"}, expectedXLeft, expectedYTop], 70 [{block: "end", inline: "end"}, expectedXRight, expectedYBottom], 71 ].forEach(([input, expectedX, expectedY]) => { 72 test(() => { 73 scroller.scrollTo(0, 0); 74 target.scrollIntoView(input); 75 assert_approx_equals(scroller.scrollLeft, expectedX, 0.5, "scrollX"); 76 assert_approx_equals(scroller.scrollTop, expectedY, 0.5, "scrollY"); 77 }, `scrollIntoView(${format_dict(input)})`); 78 }) 79 </script>