anchor-size-writing-modes-001.html (3430B)
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 .htb { 23 writing-mode: horizontal-tb; 24 } 25 .vrl { 26 writing-mode: vertical-rl; 27 } 28 </style> 29 <body onload="checkLayoutForAnchorPos('.target')"> 30 <div class="container"> 31 <div class="anchor1 vrl"></div> 32 33 <!-- Anchor's `writing-mode` should not matter. --> 34 <div class="target" style="width: anchor-size(--a1 width)" data-expected-width=5></div> 35 <div class="target" style="width: anchor-size(--a1 height)" data-expected-width=7></div> 36 <div class="target" style="width: anchor-size(--a1 inline)" data-expected-width=5></div> 37 <div class="target" style="width: anchor-size(--a1 block)" data-expected-width=7></div> 38 <div class="target" style="width: anchor-size(--a1 self-inline)" data-expected-width=5></div> 39 <div class="target" style="width: anchor-size(--a1 self-block)" data-expected-width=7></div> 40 41 <!-- `self-inline` and `self-block` take target's `writing-mode` into account. --> 42 <div class="target vrl" style="width: anchor-size(--a1 width)" data-expected-width=5></div> 43 <div class="target vrl" style="width: anchor-size(--a1 height)" data-expected-width=7></div> 44 <div class="target vrl" style="width: anchor-size(--a1 inline)" data-expected-width=5></div> 45 <div class="target vrl" style="width: anchor-size(--a1 block)" data-expected-width=7></div> 46 <div class="target vrl" style="width: anchor-size(--a1 self-inline)" data-expected-width=7></div> 47 <div class="target vrl" style="width: anchor-size(--a1 self-block)" data-expected-width=5></div> 48 </div> 49 <div class="container vrl"> 50 <div class="anchor1 htb"></div> 51 52 <!-- Anchor's `writing-mode` should not matter. --> 53 <div class="target" style="width: anchor-size(--a1 width)" data-expected-width=5></div> 54 <div class="target" style="width: anchor-size(--a1 height)" data-expected-width=7></div> 55 <div class="target" style="width: anchor-size(--a1 inline)" data-expected-width=7></div> 56 <div class="target" style="width: anchor-size(--a1 block)" data-expected-width=5></div> 57 <div class="target" style="width: anchor-size(--a1 self-inline)" data-expected-width=7></div> 58 <div class="target" style="width: anchor-size(--a1 self-block)" data-expected-width=5></div> 59 60 <!-- `self-inline` and `self-block` take target's `writing-mode` into account. --> 61 <div class="target htb" style="width: anchor-size(--a1 width)" data-expected-width=5></div> 62 <div class="target htb" style="width: anchor-size(--a1 height)" data-expected-width=7></div> 63 <div class="target htb" style="width: anchor-size(--a1 inline)" data-expected-width=7></div> 64 <div class="target htb" style="width: anchor-size(--a1 block)" data-expected-width=5></div> 65 <div class="target htb" style="width: anchor-size(--a1 self-inline)" data-expected-width=5></div> 66 <div class="target htb" style="width: anchor-size(--a1 self-block)" data-expected-width=7></div> 67 </div> 68 </body>