| <!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: 36px; |
| } |
| .flex { |
| display: inline-flex; |
| flex-flow: row wrap; |
| color: fuchsia; |
| background-color: yellow; |
| opacity: 0.75; |
| min-width: 10px; |
| min-height: 10px; |
| border: solid white; |
| } |
| .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; |
| } |
| .margin-a { |
| margin: 6px 12px 24px 16px; |
| } |
| .margin-b { |
| margin: 24px 16px 6px 12px; |
| } |
| .border-a { |
| border-width: 6px 12px 12px 12px; |
| } |
| .border-b { |
| border-width: 12px 12px 5px 12px; |
| } |
| </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: 60px; background-color: lime">-gh- -gh-</span> |
| <div class="flex"></div> |
| <div class="flex margin-a"></div> |
| <div class="flex margin-b"></div> |
| <div class="flex border-a"></div> |
| <div class="flex border-b"></div> |
| <div class="flex margin-a border-a"></div> |
| <div class="flex margin-a border-b""></div> |
| <div class="flex margin-b border-a"></div> |
| <div class="flex margin-b border-b""></div> |
| <div style="display: inline-flex; width: 5px; height: 50px; background-color: black;"></div> |
| <div style="height: 5px; background-color: black;"></div> |
| </body> |
| </html> |
