| <!DOCTYPE html> |
| <!-- |
| | Tests for CSS Flexible Box Layout Module. |
| | Testing absolutely positioned flex container children. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| background-color: gray; |
| font-size: 12px; |
| } |
| .flex { |
| display: inline-flex; |
| flex-flow: row wrap; |
| color: fuchsia; |
| background-color: yellow; |
| opacity: 0.75; |
| min-width: 400px; |
| min-height: 200px; |
| margin: 10px 20px 40px 30px; |
| border: solid white; |
| border-width: 10px 25px 25px 25px; |
| -no-position: relative; |
| -no-transform: translateX(0); |
| } |
| .absolute { |
| background-color: blue; |
| position: absolute; |
| } |
| .fixed { |
| background-color: purple; |
| position: fixed; |
| } |
| div > span { |
| padding: 1.25%; |
| border: 10px solid black; |
| } |
| div > video { |
| opacity: 1; |
| width: 5%; |
| height: 5%; |
| z-index: 1; |
| } |
| </style> |
| </head> |
| <body> |
| -gh- |
| <div style="height: 5px; background-color: black;"></div> |
| <div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div> |
| <span style="display: inline-block; width: 40px; background-color: lime;">-gh-</span> |
| <div class="flex"> |
| <video class="absolute" style="top: 20%;"></video> |
| <video class="absolute" style="top: 30%; left: 0%;"></video> |
| <video class="absolute" style="left: 20%;"></video> |
| <video class="absolute" style="left: 30%; top: 0%;"></video> |
| <video class="fixed" style="top: 40%;"></video> |
| <video class="fixed" style="top: 50%; left: 0%;"></video> |
| <video class="fixed" style="left: 40%;"></video> |
| <video class="fixed" style="left: 50%; top: 0%;"></video> |
| <span class="absolute" style="top: 60%;"></span> |
| <span class="absolute" style="top: 70%; left: 0%;"></span> |
| <span class="absolute" style="left: 60%;"></span> |
| <span class="absolute" style="left: 70%; top: 0%;"></span> |
| <span class="fixed" style="top: 80%;"></span> |
| <span class="fixed" style="top: 90%; left: 0%;"></span> |
| <span class="fixed" style="left: 80%;"></span> |
| <span class="fixed" style="left: 90%; top: 0%"></span> |
| </div> |
| <div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div> |
| <div style="height: 5px; background-color: black;"></div> |
| </body> |
| </html> |