position-sticky-left-and-right-overconstrained.html (1926B)
1 <!DOCTYPE html> 2 <title>position:sticky elements with width larger than the space available between left and right</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <meta name="assert" content="This test checks that the end edge is adjusted when the sticky view rectangle width ends up smaller than the width of the sticky element border box" /> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 11 .scroller { 12 width: 100px; 13 height: 100px; 14 overflow: auto; 15 position: relative; 16 display: flex; 17 } 18 .padding { 19 width: 200px; 20 height: 100px; 21 flex: none; 22 } 23 .sticky { 24 position: sticky; 25 background: green; 26 left: 20px; 27 right: 0; 28 width: 200px; 29 height: 100px; 30 flex: none; 31 } 32 </style> 33 34 <body> 35 <div class="scroller"> 36 <div class="padding"></div> 37 <div class="sticky"></div> 38 <div class="padding"></div> 39 </div> 40 </body> 41 42 <script> 43 test(() => { 44 const scroller = document.querySelector('.scroller'); 45 const element = document.querySelector('.sticky'); 46 scroller.scrollLeft = 0; 47 assert_equals(element.offsetLeft, 20); 48 }, 'start of scroll container'); 49 50 test(() => { 51 const scroller = document.querySelector('.scroller'); 52 const element = document.querySelector('.sticky'); 53 scroller.scrollLeft = 160; 54 assert_equals(element.offsetLeft, 180); 55 }, 'right before the in-flow position of the sticky box'); 56 57 test(() => { 58 const scroller = document.querySelector('.scroller'); 59 const element = document.querySelector('.sticky'); 60 scroller.scrollLeft = 220; 61 assert_equals(element.offsetLeft, 240); 62 }, 'right after the in-flow position the sticky box'); 63 64 test(() => { 65 const scroller = document.querySelector('.scroller'); 66 const element = document.querySelector('.sticky'); 67 scroller.scrollLeft = 500; 68 assert_equals(element.offsetLeft, 400); 69 }, 'end of scroll container'); 70 </script>