diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html')
-rw-r--r-- | testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html | 142 |
1 files changed, 0 insertions, 142 deletions
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html b/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html deleted file mode 100644 index 531dc303d6..0000000000 --- a/testing/web-platform/tests/css/css-anchor-position/position-fallback-003.html +++ /dev/null @@ -1,142 +0,0 @@ -<!DOCTYPE html> -<title>Tests fallback positions that overflow the inset-modified containing block regardless of scrolling</title> -<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback"> -<link rel="author" href="mailto:xiaochengh@chromium.org"> -<script src="/resources/testharness.js"></script> -<script src="/resources/testharnessreport.js"></script> -<script src="/resources/check-layout-th.js"></script> -<script src="support/test-common.js"></script> -<style> -body { margin: 0; } -.ltr { direction: ltr; } -.rtl { direction: rtl; } -.vrl { writing-mode: vertical-rl; } -.vlr { writing-mode: vertical-lr; } - -.cb { - width: 200px; - height: 200px; - transform: scale(1); -} - -.spacer { - block-size: 50px; -} - -.anchor { - width: 100px; - height: 100px; - margin-inline-start: 50px; - background: orange; - anchor-name: --a; -} - -.anchored { - position: absolute; - width: 50px; - height: 50px; - background: lime; -} - -.exceeds-end { - position-fallback: --exceeds-end; -} - -/* Used on a element whose block and inline axes are the same with its - containing block, so that the first two positions will exceed the end edges - of the IMCB, and the last position will be used. */ -@position-fallback --exceeds-end { - @try { - left: 0; - right: anchor(--a left); - width: 100px; - } - - @try { - top: 0; - bottom: anchor(--a top); - height: 100px; - } - - @try { - top: 11px; - left: 22px; - } -} - -.exceeds-start { - position-fallback: --exceeds-start; -} - -/* Used on a element whose block and inline axes are in the opposite directions - of its containing block, so that the first two positions will exceed the - start edges of the IMCB, and the last position will be used. */ -@position-fallback --exceeds-start { - @try { - bottom: 0; - top: anchor(--a bottom); - height: 100px; - } - - @try { - right: 0; - left: anchor(--a right); - width: 100px; - } - - @try { - top: 11px; - left: 22px; - } -} - -.exceeds-size { - position-fallback: --exceeds-size; -} - -/* Both inset sides are `auto`, but the size is too big to fit in the containing - block. */ -@position-fallback --exceeds-size { - @try { - top: anchor(--a bottom); - left: auto; - right: auto; - width: 300px; - } - - @try { - left: anchor(--a right); - top: auto; - bottom: auto; - height: 300px; - } - - @try { - top: 11px; - left: 22px; - } -} -</style> - -<body onload="checkLayoutForAnchorPos('.anchored')"> - <div class=cb> - <div class=spacer></div> - <div class=anchor></div> - <div class="anchored exceeds-end" - data-offset-x=22 data-offset-y=11></div> - </div> - - <div class="cb rtl vrl"> - <div class=spacer></div> - <div class=anchor></div> - <div class="anchored ltr vlr exceeds-start" - data-offset-x=22 data-offset-y=11></div> - </div> - - <div class="cb"> - <div class=spacer></div> - <div class=anchor></div> - <div class="anchored exceeds-size" - data-offset-x=22 data-offset-y=11></div> - </div> -</body> |