anchor-position-writing-modes-001.html (2929B)
1 <!DOCTYPE html> 2 <title>Tests `anchor` function for `writing-mode`/`direction`s</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 4 <link rel="author" href="mailto:kojii@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script><style> 7 :root, body { 8 margin: 0; 9 } 10 #container { 11 position: relative; 12 width: 600px; 13 height: 400px; 14 } 15 #a1 { 16 anchor-name: --a1; 17 background: orange; 18 margin-left: 100px; 19 margin-top: 100px; 20 width: 100px; 21 height: 100px; 22 } 23 .htb-rtl #a1 { margin-right: 400px; } 24 .vlr-rtl #a1 { margin-bottom: 200px; } 25 .vrl-ltr #a1 { margin-right: 400px; } 26 .vrl-rtl #a1 { margin-right: 400px; margin-bottom: 200px; } 27 #a2 { 28 anchor-name: --a2; 29 background: purple; 30 margin-left: 500px; 31 margin-top: 100px; 32 width: 100px; 33 height: 100px; 34 } 35 .vlr-ltr #a2 { margin-left: 300px; margin-top: 300px; } 36 .vlr-rtl #a2 { margin-left: 300px; margin-top: 300px; } 37 .vrl-ltr #a2 { margin-right: -600px; margin-top: 300px; } 38 .vrl-rtl #a2 { margin-right: -600px; margin-top: 300px; } 39 #target { 40 background: green; 41 position: absolute; 42 left: anchor(--a1 right); 43 top: anchor(--a1 bottom); 44 right: anchor(--a2 left); 45 bottom: anchor(--a2 top); 46 } 47 .htb-ltr { writing-mode: horizontal-tb; direction: ltr; } 48 .htb-rtl { writing-mode: horizontal-tb; direction: rtl; } 49 .vlr-ltr { writing-mode: vertical-lr; direction: ltr; } 50 .vlr-rtl { writing-mode: vertical-lr; direction: rtl; } 51 .vrl-ltr { writing-mode: vertical-rl; direction: ltr; } 52 .vrl-rtl { writing-mode: vertical-rl; direction: rtl; } 53 </style> 54 <body> 55 <div id="container"> 56 <div id="a1"></div> 57 <div id="a2"></div> 58 <div id="target"></div> 59 </div> 60 <script> 61 const classes = [ 62 'htb-ltr', 'htb-rtl', 63 'vlr-ltr', 'vlr-rtl', 64 'vrl-ltr', 'vrl-rtl']; 65 const combinations = []; 66 for (const container_class of classes) { 67 for (const a1_class of classes) { 68 for (const a2_class of classes) { 69 for (const target_class of classes) { 70 combinations.push([container_class, a1_class, a2_class, target_class]); 71 } 72 } 73 } 74 } 75 76 for (let i = 0; i < combinations.length; ++i) 77 run_test_index(i); 78 79 function run_test_index(i) { 80 const combination = combinations[i]; 81 run_test(i, ...combination); 82 } 83 84 function run_test(i, container_class, a1_class, a2_class, target_class) { 85 container.classList.add(container_class); 86 a1.classList.add(a1_class); 87 a2.classList.add(a2_class); 88 target.classList.add(target_class); 89 test(() => { 90 const bounds = target.getBoundingClientRect(); 91 assert_array_equals( 92 [bounds.left, bounds.top, bounds.right, bounds.bottom], 93 [200, 200, 500, 300]); 94 }, `${i}: ${container_class}/${a1_class}/${a2_class}/${target_class}`); 95 container.classList.remove(container_class); 96 a1.classList.remove(a1_class); 97 a2.classList.remove(a2_class); 98 target.classList.remove(target_class); 99 } 100 </script> 101 </body>