position-area-align-justify-wm-dir.html (8999B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area positioning - alignment with writing-mode and direction</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 /* A 300x300 container with a 100x100 centered anchor */ 8 #container { 9 position: relative; 10 width: 300px; 11 height: 300px; 12 } 13 #anchor { 14 position: absolute; 15 top: 100px; 16 left: 100px; 17 width: 100px; 18 height: 100px; 19 anchor-name: --anchor; 20 } 21 #anchored { 22 position: absolute; 23 width: 10px; 24 height: 10px; 25 inset: 10px 15px 20px 25px; 26 position-anchor: --anchor; 27 } 28 </style> 29 <div id="container"> 30 <div id="anchor"></div> 31 <div id="anchored"></div> 32 </div> 33 <script> 34 function test_position_area(writing_direction, position_area, expected_offsets) { 35 anchored.style.positionArea = position_area; 36 test(() => { 37 assert_equals(anchored.offsetLeft, expected_offsets.left, "Checking offsetLeft"); 38 assert_equals(anchored.offsetTop, expected_offsets.top, "Checking offsetTop"); 39 assert_equals(anchored.offsetWidth, expected_offsets.width, "Checking offsetWidth"); 40 assert_equals(anchored.offsetHeight, expected_offsets.height, "Checking offsetHeight"); 41 }, "Offsets for: " + position_area + " with writing-mode / direction: " + writing_direction); 42 } 43 44 const top_left = {left:75, top:70, width:10, height:10}; 45 const top_right = {left:225, top:70, width:10, height:10}; 46 const bottom_left = {left:75, top:210, width:10, height:10}; 47 const bottom_right = {left:225, top:210, width:10, height:10}; 48 49 anchored.style.writingMode = "horizontal-tb"; 50 anchored.style.direction = "ltr"; 51 52 // Writing-mode and direction on container 53 let writing_direction = "containing-block: horizontal-tb / rtl"; 54 container.style.writingMode = "horizontal-tb"; 55 container.style.direction = "rtl"; 56 test_position_area(writing_direction, "start start", top_right); 57 test_position_area(writing_direction, "self-start self-start", top_left); 58 test_position_area(writing_direction, "x-start y-start", top_right); 59 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 60 61 // containing-block: vertical-lr / ltr 62 // self: horizontal-tb / ltr 63 writing_direction = "containing-block: vertical-lr / ltr"; 64 container.style.writingMode = "vertical-lr"; 65 container.style.direction = "ltr"; 66 test_position_area(writing_direction, "start start", top_left); 67 test_position_area(writing_direction, "self-start self-start", top_left); 68 test_position_area(writing_direction, "x-start y-start", top_left); 69 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 70 71 // containing-block: sideways-lr / ltr 72 // self: horizontal-tb / ltr 73 writing_direction = "containing-block: sideways-lr / ltr"; 74 container.style.writingMode = "sideways-lr"; 75 container.style.direction = "ltr"; 76 test_position_area(writing_direction, "start start", bottom_left); 77 test_position_area(writing_direction, "self-start self-start", top_left); 78 test_position_area(writing_direction, "x-start y-start", bottom_left); 79 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 80 81 // containing-block: vertical-lr / rtl 82 // self: horizontal-tb / ltr 83 writing_direction = "containing-block: vertical-lr / rtl"; 84 container.style.writingMode = "vertical-lr"; 85 container.style.direction = "rtl"; 86 test_position_area(writing_direction, "start start", bottom_left); 87 test_position_area(writing_direction, "self-start self-start", top_left); 88 test_position_area(writing_direction, "x-start y-start", bottom_left); 89 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 90 91 // containing-block: sideways-lr / rtl 92 // self: horizontal-tb / ltr 93 writing_direction = "containing-block: sideways-lr / rtl"; 94 container.style.writingMode = "sideways-lr"; 95 container.style.direction = "rtl"; 96 test_position_area(writing_direction, "start start", top_left); 97 test_position_area(writing_direction, "self-start self-start", top_left); 98 test_position_area(writing_direction, "x-start y-start", top_left); 99 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 100 101 // containing-block: vertical-rl / ltr 102 // self: horizontal-tb / ltr 103 writing_direction = "containing-block: vertical-rl / ltr"; 104 container.style.writingMode = "vertical-rl"; 105 container.style.direction = "ltr"; 106 test_position_area(writing_direction, "start start", top_right); 107 test_position_area(writing_direction, "self-start self-start", top_left); 108 test_position_area(writing_direction, "x-start y-start", top_right); 109 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 110 111 // containing-block: vertical-rl / rtl 112 // self: horizontal-tb / ltr 113 writing_direction = "containing-block: vertical-rl / rtl"; 114 container.style.writingMode = "vertical-rl"; 115 container.style.direction = "rtl"; 116 test_position_area(writing_direction, "start start", bottom_right); 117 test_position_area(writing_direction, "self-start self-start", top_left); 118 test_position_area(writing_direction, "x-start y-start", bottom_right); 119 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 120 121 // Writing-mode and direction on self 122 container.style.writingMode = "horizontal-tb"; 123 container.style.direction = "ltr"; 124 125 // containing-block: horizontal-tb / ltr 126 // self: horizontal-tb / rtl 127 writing_direction = "self: horizontal-tb / rtl"; 128 anchored.style.writingMode = "horizontal-tb"; 129 anchored.style.direction = "rtl"; 130 test_position_area(writing_direction, "start start", top_left); 131 test_position_area(writing_direction, "self-start self-start", top_right); 132 test_position_area(writing_direction, "x-start y-start", top_left); 133 test_position_area(writing_direction, "self-x-start self-y-start", top_right); 134 135 // containing-block: horizontal-tb / ltr 136 // self: vertical-lr / ltr 137 writing_direction = "self: vertical-lr / ltr"; 138 anchored.style.writingMode = "vertical-lr"; 139 anchored.style.direction = "ltr"; 140 test_position_area(writing_direction, "start start", top_left); 141 test_position_area(writing_direction, "self-start self-start", top_left); 142 test_position_area(writing_direction, "x-start y-start", top_left); 143 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 144 145 // containing-block: horizontal-tb / ltr 146 // self: sideways-lr / ltr 147 writing_direction = "self: sideways-lr / ltr"; 148 anchored.style.writingMode = "sideways-lr"; 149 anchored.style.direction = "ltr"; 150 test_position_area(writing_direction, "start start", top_left); 151 test_position_area(writing_direction, "self-start self-start", bottom_left); 152 test_position_area(writing_direction, "x-start y-start", top_left); 153 test_position_area(writing_direction, "self-x-start self-y-start", bottom_left); 154 155 // containing-block: horizontal-tb / ltr 156 // self: vertical-lr / rtl 157 writing_direction = "self: vertical-lr / rtl"; 158 anchored.style.writingMode = "vertical-lr"; 159 anchored.style.direction = "rtl"; 160 test_position_area(writing_direction, "start start", top_left); 161 test_position_area(writing_direction, "self-start self-start", bottom_left); 162 test_position_area(writing_direction, "x-start y-start", top_left); 163 test_position_area(writing_direction, "self-x-start self-y-start", bottom_left); 164 165 // containing-block: horizontal-tb / ltr 166 // self: sideways-lr / rtl 167 writing_direction = "self: sideways-lr / rtl"; 168 anchored.style.writingMode = "sideways-lr"; 169 anchored.style.direction = "rtl"; 170 test_position_area(writing_direction, "start start", top_left); 171 test_position_area(writing_direction, "self-start self-start", top_left); 172 test_position_area(writing_direction, "x-start y-start", top_left); 173 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 174 175 // containing-block: horizontal-tb / ltr 176 // self: vertical-rl / ltr 177 writing_direction = "self: vertical-rl / ltr"; 178 anchored.style.writingMode = "vertical-rl"; 179 anchored.style.direction = "ltr"; 180 test_position_area(writing_direction, "start start", top_left); 181 test_position_area(writing_direction, "self-start self-start", top_right); 182 test_position_area(writing_direction, "x-start y-start", top_left); 183 test_position_area(writing_direction, "self-x-start self-y-start", top_right); 184 185 // containing-block: horizontal-tb / ltr 186 // self: vertical-rl / rtl 187 writing_direction = "self: vertical-rl / rtl"; 188 anchored.style.writingMode = "vertical-rl"; 189 anchored.style.direction = "rtl"; 190 test_position_area(writing_direction, "start start", top_left); 191 test_position_area(writing_direction, "self-start self-start", bottom_right); 192 test_position_area(writing_direction, "x-start y-start", top_left); 193 test_position_area(writing_direction, "self-x-start self-y-start", bottom_right); 194 195 </script>