dynamic-toolbar-nested-fixed-bottom.html (1115B)
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 fixed 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 fixed element to be offset from the bottom of the screen, and in 12 the ref page we use a regular CSS "margin-bottom" to match the rendering. 13 --> 14 <html> 15 <meta name="viewport" content="width=device-width"> 16 <style> 17 html { 18 scrollbar-width: none; 19 } 20 #scrolled { 21 height: 2000px; 22 width: 100%; 23 } 24 #fixed-outer { 25 width: 100%; 26 height: 200px; 27 position: fixed; 28 bottom: 0; 29 background: red; 30 } 31 #fixed-inner { 32 width: 100%; 33 height: 100px; 34 position: fixed; 35 bottom: 0; 36 background: blue; 37 } 38 </style> 39 <body> 40 <div id="scrolled"></div> 41 <div id="fixed-outer"> 42 <div id="fixed-inner"></div> 43 </div> 44 </body> 45 </html>