| <!DOCTYPE html> |
| <meta name="viewport" content="width=device-width, user-scalable=no" /> |
| <script> |
| // NOTE: It is important that this test be run with the Android viewport |
| // flags turned on. |
| // Set the browser controls to be 100px and start off hidden. Bring them in |
| // fully without causing a resize. i.e. as if the user dragged them into view |
| // but hasn't lifted their finger. |
| if (window.internals) { |
| internals.setBrowserControlsShownRatio(0, 0); |
| internals.setBrowserControlsState(100, 0, false); |
| internals.setBrowserControlsShownRatio(1, 1); |
| internals.settings.setHideScrollbars(true); |
| } |
| </script> |
| <style> |
| html, body { |
| height: 100%; |
| width: 100%; |
| margin: 0; |
| } |
| #cover { |
| width: 100%; |
| /* Must be scrollable to force fixed elements to get a transform node. */ |
| height: 200%; |
| background-color: palegreen; |
| } |
| #bottom { |
| position: fixed; |
| left: 50px; |
| right: 50px; |
| height: 20px; |
| bottom: 0px; |
| background-color: coral; |
| } |
| </style> |
| |
| <div id="cover"> |
| Test passes if the orange bar is visible at the bottom of the green box. |
| The green box should be 100px from the screen bottom. |
| </div> |
| <div id="bottom"></div> |
