anchor-size-001.html (3509B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 3 <link rel="author" href="mailto:kojii@chromium.org"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/check-layout-th.js"></script> 7 <script src="support/test-common.js"></script> 8 <style> 9 .container { 10 position: relative; 11 height: 10px; 12 } 13 .anchor1 { 14 anchor-name: --a1; 15 width: 5px; 16 height: 7px; 17 background: orange; 18 } 19 .target { 20 position: absolute; 21 } 22 </style> 23 <body onload="checkLayoutForAnchorPos('.target')"> 24 <div class="container"> 25 <div class="anchor1"></div> 26 27 <!-- Basic cases of all `anchor-size`s. --> 28 <div class="target" style="width: anchor-size(--a1 width)" data-expected-width=5></div> 29 <div class="target" style="height: anchor-size(--a1 height)" data-expected-height=7></div> 30 <div class="target" style="width: anchor-size(--a1 inline)" data-expected-width=5></div> 31 <div class="target" style="height: anchor-size(--a1 block)" data-expected-height=7></div> 32 <div class="target" style="width: anchor-size(--a1 self-inline)" data-expected-width=5></div> 33 <div class="target" style="height: anchor-size(--a1 self-block)" data-expected-height=7></div> 34 35 <!-- Different axes should work. --> 36 <div class="target" style="height: anchor-size(--a1 width)" data-expected-height=5></div> 37 <div class="target" style="width: anchor-size(--a1 height)" data-expected-width=7></div> 38 <div class="target" style="height: anchor-size(--a1 inline)" data-expected-height=5></div> 39 <div class="target" style="width: anchor-size(--a1 block)" data-expected-width=7></div> 40 <div class="target" style="height: anchor-size(--a1 self-inline)" data-expected-height=5></div> 41 <div class="target" style="width: anchor-size(--a1 self-block)" data-expected-width=7></div> 42 43 <!-- anchor-size() in insets --> 44 <div class="target" style="left: anchor-size(--a1 width)" data-offset-x=5></div> 45 <div class="target" style="top: anchor-size(--a1 height)" data-offset-y=7></div> 46 <div class="target" style="left: anchor-size(--a1 height)" data-offset-x=7></div> 47 <div class="target" style="top: anchor-size(--a1 width" data-offset-y=5></div> 48 49 <!-- anchor-size() in margins --> 50 <div class="target" style="margin-left: anchor-size(--a1 width)" data-expected-margin-left=5></div> 51 <div class="target" style="margin-top: anchor-size(--a1 height)" data-expected-margin-top=7></div> 52 <div class="target" style="margin-right: anchor-size(--a1 height)" data-expected-margin-right=7></div> 53 <div class="target" style="margin-bottom: anchor-size(--a1 width" data-expected-margin-bottom=5></div> 54 55 <!-- Implicit <anchor-size> --> 56 <div class="target" style="width: anchor-size(--a1)" data-expected-width=5></div> 57 <div class="target" style="height: anchor-size(--a1)" data-expected-height=7></div> 58 <div class="target" style="left: anchor-size(--a1)" data-offset-x=5></div> 59 <div class="target" style="top: anchor-size(--a1)" data-offset-y=7></div> 60 <div class="target" style="margin-left: anchor-size(--a1)" data-expected-margin-left=5></div> 61 <div class="target" style="margin-right: anchor-size(--a1)" data-expected-margin-right=5></div> 62 <div class="target" style="margin-top: anchor-size(--a1)" data-expected-margin-top=7></div> 63 <div class="target" style="margin-bottom: anchor-size(--a1)" data-expected-margin-bottom=7></div> 64 </div> 65 </body>