diff options
Diffstat (limited to '')
| -rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html b/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html new file mode 100644 index 0000000000..52344614f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-anchor-position/inset-area-abs-inline-container.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS Anchor Positioning: inset-area positioning with absolute inline container</title> +<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area"> +<link rel="match" href="inset-area-inline-container-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + #in-flow { + font-family: Ahem; + font-size: 100px; + color: orange; + } + #inline-container { + position: absolute; + } + #anchor { + position: absolute; + top: 25px; + left: 100px; + width: 200px; + height: 50px; + anchor-name: --anchor; + background-color: cyan; + } + .anchored { + position: absolute; + align-self: stretch; + justify-self: stretch; + anchor-default: --anchor; + background-color: blue; + } + #top-left { inset-area: top / left; } + #top-right { inset-area: top / right; } + #bottom-left { inset-area: bottom / left; } + #bottom-right { inset-area: bottom / right; } +</style> +<div id="in-flow"> + <br> + <br> + <span id="inline-container">XXXX<span id="anchor"></span><div id="top-left" class="anchored"></div><div id="top-right" class="anchored"></div><div id="bottom-left" class="anchored"></div><div id="bottom-right" class="anchored"></div></span> +</div> |