anchor-query-fallback.html (3235B)
1 <!DOCTYPE html> 2 <title>Tests the fallback value in anchor queries</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 4 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-size"> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/check-layout-th.js"></script> 9 <script src="support/test-common.js"></script> 10 <style> 11 #container { 12 position: relative; 13 display: flex; 14 flex-wrap: wrap; 15 width: 300px; 16 } 17 18 .flex-item { 19 width: 100px; 20 height: 50px; 21 flex: auto; 22 } 23 24 #a1 { 25 anchor-name: --a1; 26 background: orange; 27 } 28 #a2 { 29 anchor-name: --a2; 30 background: purple; 31 } 32 33 .target { 34 position: absolute; 35 } 36 </style> 37 38 <body onload="checkLayoutForAnchorPos('.target')"> 39 <div id="container"> 40 <div class="flex-item" id="a1"></div> 41 <div class="flex-item"></div> 42 <div class="flex-item"></div> 43 <div class="flex-item"></div> 44 <div class="flex-item"></div> 45 <div class="flex-item"></div> 46 <div class="flex-item"></div> 47 <div class="flex-item"></div> 48 <div class="flex-item" id="a2"></div> 49 50 <!-- Fallback due to no valid anchor --> 51 <div class="target" style="left: anchor(--inexist-anchor left, 50px)" data-offset-x="50"></div> 52 <div class="target" style="width: anchor-size(--inexist-anchor width, 50px)" data-expected-width="50"></div> 53 54 <!-- Fallback due to wrong axis for anchor() --> 55 <div class="target" style="left: anchor(--a1 top, 50px)" data-offset-x="50"></div> 56 <div class="target" style="left: anchor(--a1 bottom, 50px)" data-offset-x="50"></div> 57 <div class="target" style="top: anchor(--a1 left, 50px)" data-offset-y="50"></div> 58 <div class="target" style="top: anchor(--a1 right, 50px)" data-offset-y="50"></div> 59 60 <!-- More complicated fallback values --> 61 <div class="target" style="left: anchor(--inexist-anchor left, 50%)" data-offset-x="150"></div> 62 <div class="target" style="left: anchor(--inexist-anchor left, calc(20% + 20px))" data-offset-x="80"></div> 63 <div class="target" style="left: calc(anchor(--inexist-anchor left, calc(anchor(--inexist-anchor left, 20%) + 20px)) + 20px)" data-offset-x="100"></div> 64 <div class="target" style="left: calc(anchor(--inexist-anchor left, calc(anchor-size(--inexist-anchor width, 20%) + 20px)) + 20px)" data-offset-x="100"></div> 65 <div class="target" style="top: anchor(--a1 left, anchor(--a2 top))" data-offset-y="100"></div> 66 <div class="target" style="top: anchor(--a1 left, calc((anchor(--a1 bottom) + anchor(--a2 top)) / 2))" data-offset-y="75"></div> 67 <div class="target" style="width: anchor-size(--inexist-anchor width, 50%)" data-expected-width="150"></div> 68 <div class="target" style="width: anchor-size(--inexist-anchor width, calc(20% + 20px))" data-expected-width="80"></div> 69 <div class="target" style="height: anchor-size(--inexist-anchor height, anchor-size(--a1 width))" data-expected-height="100"></div> 70 <div class="target" style="height: anchor-size(--inexist-anchor height, calc((anchor-size(--a1 width) + anchor-size(--a2 height)) / 2))" data-expected-height="75"></div> 71 </div> 72 </body>