dynamic-toolbar-sticky-bottom-1.html (996B)
1 <!DOCTYPE HTML> 2 <!-- 3 Tests that setting a fixed bottom margin in the compositor results 4 in the margin being applied to an element sticky to the bottom. 5 6 The fixed margin is specified as a test-pref in reftest.list. 7 8 The purpose of the fixed margin is to compensate for the transform that the 9 dynamic toolbar applies to the entire content area. We don't have a way of 10 simulating that transform in a reftest, so the fixed margin in isolation will 11 cause the sticky element to be offset from the bottom of the screen. 12 --> 13 <html> 14 <meta name="viewport" content="width=device-width"> 15 <style> 16 html { 17 scrollbar-width: none; 18 } 19 #scrolled { 20 display: flex; 21 justify-content: space-around; 22 align-items: flex-start; 23 24 height: 2000px; 25 width: 100%; 26 } 27 #sticky { 28 width: 100%; 29 height: 200px; 30 position: sticky; 31 bottom: 20px; 32 background: red; 33 align-self: flex-end; 34 } 35 </style> 36 <body> 37 <div id="scrolled"> 38 <div id="sticky"></div> 39 </div> 40 </body> 41 </html>