test_overlay_scrollbar_position.html (1533B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Test for overlay scrollbar positions</title> 4 <script src="/tests/SimpleTest/SimpleTest.js"></script> 5 <link rel="stylesheet" href="/tests/SimpleTest/test.css"> 6 <style> 7 div { 8 width: 100px; 9 height: 100px; 10 } 11 </style> 12 <div style="overflow-x: scroll" data-expected-bottom></div> 13 <div style="overflow-y: scroll" data-expected-right></div> 14 <div style="overflow-y: scroll" dir="rtl" data-expected-left></div> 15 <script> 16 add_task(async function() { 17 await SpecialPowers.pushPrefEnv({ 18 set: [["ui.useOverlayScrollbars", 1]], 19 }); 20 for (let div of document.querySelectorAll("div")) { 21 let rect = div.getBoundingClientRect(); 22 let kids = SpecialPowers.InspectorUtils.getChildrenForNode( 23 div, 24 /* anonymous = */ true, 25 false 26 ); 27 is(kids.length, 3, "Should create both horizontal and vertical scrollbars, and a scrollcorner"); 28 for (let attr of ["top", "left", "bottom", "right"]) { 29 if (!div.hasAttribute(`data-expected-${attr}`)) { 30 continue; 31 } 32 let vertical = attr == "left" || attr == "right"; 33 let scrollbar = kids[vertical ? 1 : 0]; 34 is(scrollbar.tagName, "scrollbar", "Should find scrollbar"); 35 is(scrollbar.hasAttribute("vertical"), vertical, "Should be the right scrollbar"); 36 let scrollbarRect = scrollbar.getBoundingClientRect(); 37 let diff = scrollbarRect[attr] - rect[attr]; 38 is(diff, 0, `Scrollbar should be at ${attr}: ${scrollbarRect[attr]} vs. ${rect[attr]}`); 39 } 40 } 41 }); 42 </script>