| <!DOCTYPE html> |
| <style> |
| .container { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: lightgrey; |
| } |
| |
| .parent { |
| height: 100%; |
| width: 6px; |
| background-color: black; |
| } |
| |
| .child { |
| position: relative; |
| display: inline-block; |
| height: 30px; |
| width: 6px; |
| top: 50%; |
| background-color: red; |
| } |
| |
| </style> |
| <!-- |
| Tests that the element with class "child" is invalidated when the browser is resized, |
| since its position is relative to the size of the frame. |
| --> |
| <div class="container"> |
| <div class="parent"> |
| <div class="child"></div> |
| </div> |
| </div> |
