anchor-position-writing-modes-002.html (3406B)
1 <!DOCTYPE html> 2 <title>Tests logical `anchor` function for `writing-mode`/`direction`s</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 4 <link rel="author" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 .htb-ltr { writing-mode: horizontal-tb; direction: ltr; } 9 .htb-rtl { writing-mode: horizontal-tb; direction: rtl; } 10 .vlr-ltr { writing-mode: vertical-lr; direction: ltr; } 11 .vlr-rtl { writing-mode: vertical-lr; direction: rtl; } 12 .vrl-ltr { writing-mode: vertical-rl; direction: ltr; } 13 .vrl-rtl { writing-mode: vertical-rl; direction: rtl; } 14 .relpos { 15 position: relative; 16 outline: blue 1px solid; 17 } 18 .spacer { 19 width: 10px; 20 height: 10px; 21 background: yellow; 22 } 23 .anchor { 24 anchor-name: --a1; 25 margin: 5px; 26 width: 30px; 27 height: 30px; 28 background: orange; 29 } 30 .target { 31 position: absolute; 32 outline: 5px solid lime; 33 } 34 </style> 35 <body> 36 <template id="template"> 37 <div class="relpos"> 38 <div class="spacer"></div> 39 <div class="anchor"></div> 40 </div> 41 </template> 42 <script> 43 // Generate tests for all combinations. 44 // The first two entries are the side `start` and `end` should match in x-axis. 45 // The next two entries are the side `start` and `end` should match in y-axis. 46 const writingDirs = { 47 'htb-ltr':['l', 'r', 't', 'b'], 48 'htb-rtl':['r', 'l', 't', 'b'], 49 'vrl-ltr':['r', 'l', 't', 'b'], 50 'vrl-rtl':['r', 'l', 'b', 't'], 51 'vlr-ltr':['l', 'r', 't', 'b'], 52 'vlr-rtl':['l', 'r', 'b', 't'], 53 }; 54 const container = document.body; 55 const cb_template = template.content.firstElementChild; 56 for (const [writingDir, matches] of Object.entries(writingDirs)) { 57 const cb = cb_template.cloneNode(true); 58 cb.classList.add(writingDir); 59 createTarget(null, 'left: anchor(--a1 start)', matches[0], cb); 60 createTarget(null, 'left: anchor(--a1 end)', matches[1], cb); 61 createTarget(null, 'top: anchor(--a1 start)', matches[2], cb); 62 createTarget(null, 'top: anchor(--a1 end)', matches[3], cb); 63 createTarget(writingDir, 'left: anchor(--a1 self-start)', matches[0], cb); 64 createTarget(writingDir, 'left: anchor(--a1 self-end)', matches[1], cb); 65 createTarget(writingDir, 'top: anchor(--a1 self-start)', matches[2], cb); 66 createTarget(writingDir, 'top: anchor(--a1 self-end)', matches[3], cb); 67 container.appendChild(cb); 68 } 69 70 function createTarget(className, style, match, cb) { 71 const target = document.createElement('div'); 72 target.classList.add('target'); 73 if (className) 74 target.classList.add(className); 75 target.style = style; 76 target.dataset.name = style; 77 target.dataset.match = match; 78 cb.appendChild(target); 79 } 80 81 // Test all `.target`s. 82 for (const target of document.querySelectorAll('.target')) { 83 const cb = target.parentElement; 84 const anchor = cb.querySelector('.anchor'); 85 test(() => { 86 switch (target.dataset.match) { 87 case 'l': 88 assert_equals(anchor.offsetLeft, target.offsetLeft); 89 break; 90 case 'r': 91 assert_equals(anchor.offsetLeft + anchor.offsetWidth, target.offsetLeft); 92 break; 93 case 't': 94 assert_equals(anchor.offsetTop, target.offsetTop); 95 break; 96 case 'b': 97 assert_equals(anchor.offsetTop + anchor.offsetHeight, target.offsetTop); 98 break; 99 } 100 }, `${cb.classList}/${target.classList}/${target.dataset.name}`); 101 } 102 </script> 103 </body>