anchor-size-replaced-001.html (3030B)
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: 24px; 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 <!-- Specifying the width or the height should scale uniformly. --> 28 <img class="target" src="support/green-16x16.png" 29 style="width: anchor-size(--a1 width)" 30 data-expected-width=5 data-expected-height=5> 31 <img class="target" src="support/green-16x16.png" 32 style="height: anchor-size(--a1 width)" 33 data-expected-width=5 data-expected-height=5> 34 35 <!-- Smaller `min-width/height` than the natural size should be ignored. --> 36 <img class="target" src="support/green-16x16.png" 37 style="min-width: anchor-size(--a1 width)" 38 data-expected-width=16 data-expected-height=16> 39 <img class="target" src="support/green-16x16.png" 40 style="min-height: anchor-size(--a1 width)" 41 data-expected-width=16 data-expected-height=16> 42 43 <!-- Larger `min-width/height` than the natural size should scale. --> 44 <img class="target" src="support/green-16x16.png" 45 style="min-width: anchor-size(--a1 height)" 46 data-expected-width=24 data-expected-height=24> 47 <img class="target" src="support/green-16x16.png" 48 style="min-height: anchor-size(--a1 height)" 49 data-expected-width=24 data-expected-height=24> 50 51 <!-- Smaller `max-width/height` than the natural size should scale. --> 52 <img class="target" src="support/green-16x16.png" 53 style="max-width: anchor-size(--a1 width)" 54 data-expected-width=5 data-expected-height=5> 55 <img class="target" src="support/green-16x16.png" 56 style="max-height: anchor-size(--a1 width)" 57 data-expected-width=5 data-expected-height=5> 58 59 <!-- Larger `min-width/height` than the natural size should be ignored. --> 60 <img class="target" src="support/green-16x16.png" 61 style="max-width: anchor-size(--a1 height)" 62 data-expected-width=16 data-expected-height=16> 63 <img class="target" src="support/green-16x16.png" 64 style="max-height: anchor-size(--a1 height)" 65 data-expected-width=16 data-expected-height=16> 66 67 <!-- The `aspect-ratio` property should be honored. --> 68 <img class="target" src="support/green-16x16.png" 69 style="width: anchor-size(--a1 width); aspect-ratio: 0.5" 70 data-expected-width=5 data-expected-height=10> 71 <img class="target" src="support/green-16x16.png" 72 style="height: anchor-size(--a1 width); aspect-ratio: 2" 73 data-expected-width=10 data-expected-height=5> 74 </div> 75 </body>