| <!DOCTYPE html> |
| <title>Tests that 'anchor-center' behaves as 'center' in non-OOF layout modes</title> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-center"> |
| <link rel="match" href="anchor-center-002-ref.html"> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| |
| <style> |
| .container { |
| width: 100px; |
| height: 100px; |
| background: orange; |
| margin-block: 5px; |
| } |
| |
| .item { |
| width: 40px; |
| height: 40px; |
| background: lime; |
| } |
| |
| .flex { |
| display: flex; |
| } |
| |
| .grid { |
| display: grid; |
| grid-template-columns: repeat(8, 1fr); |
| grid-auto-rows: 50px; |
| grid-template-areas: |
| "a a a a b b b b" |
| "a a a a b b b b"; |
| } |
| </style> |
| |
| <div class="flex container" style="align-items: anchor-center"> |
| <div class="item"></div> |
| </div> |
| |
| <div class="flex container"> |
| <div class="item" style="align-self: anchor-center"></div> |
| </div> |
| |
| <div class="grid container" |
| style="align-items: anchor-center; justify-items: anchor-center"> |
| <div class="item" style="grid-area: a"></div> |
| <div class="item" style="grid-area: b"></div> |
| </div> |
| |
| <div class="grid container"> |
| <div class="item" style="grid-area: a; align-self: center"></div> |
| <div class="item" style="grid-area: b; justify-self: center"></div> |
| </div> |