dynamic-toolbar-sticky-top-1.html (957B)
1 <!DOCTYPE HTML> 2 <!-- 3 Tests that setting a fixed top margin in the compositor results 4 in the margin being applied to an element sticky to the top. 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 fixed element to be offset from the top 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 top: 20px; 32 background: red; 33 } 34 </style> 35 <body> 36 <div id="scrolled"> 37 <div id="sticky"></div> 38 </div> 39 </body> 40 </html>