| <!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 showing. Bring them in |
| // fully without causing a resize. i.e. as if the user dragged them into view |
| // but hasn't lifted their finger. |
| // This test verifies that a position: fixed element that has both |top| and |
| // |bottom| properties set sticks to the top of the screen, rather than the |
| // bottom. |
| if (window.internals) { |
| internals.setBrowserControlsShownRatio(1, 1); |
| internals.setBrowserControlsState(100, 0, true); |
| internals.setBrowserControlsShownRatio(0, 0); |
| 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; |
| right: 0px; |
| width: 200px; |
| top: 0px; |
| bottom: 0px; |
| background-color: coral; |
| } |
| </style> |
| |
| <div id="cover"> |
| Test passes if the orange bar's top edge is at the top of the screen. |
| </div> |
| <div id="bottom"></div> |
