position-area-wm-dir.html (7770B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area 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 <!-- The grid: 7 8 100 150 150 9 +--------+--------+--------+ 10 | | | | 11 150 | | | | 12 | | | | 13 +--------+--------+--------+ 14 | | | | 15 75 | | | | 16 | | | | 17 +--------+--------+--------+ 18 | | | | 19 175 | | | | 20 | | | | 21 +--------+--------+--------+ 22 23 --> 24 <style> 25 #container { 26 position: absolute; 27 width: 400px; 28 height: 400px; 29 } 30 #anchored { 31 position: absolute; 32 align-self: stretch; 33 justify-self: stretch; 34 position-anchor: --anchor; 35 } 36 #anchor { 37 margin-top: 150px; 38 margin-bottom: 175px; 39 margin-left: 100px; 40 margin-right: 150px; 41 width: 150px; 42 height: 75px; 43 anchor-name: --anchor; 44 } 45 </style> 46 <div id="container"> 47 <div id="anchored"></div> 48 <div id="anchor"></div> 49 </div> 50 <script> 51 function test_position_area(writing_direction, position_area, expected_offsets) { 52 anchored.style.positionArea = position_area; 53 test(() => { 54 assert_equals(anchored.offsetLeft, expected_offsets.left, "Checking offsetLeft"); 55 assert_equals(anchored.offsetTop, expected_offsets.top, "Checking offsetTop"); 56 assert_equals(anchored.offsetWidth, expected_offsets.width, "Checking offsetWidth"); 57 assert_equals(anchored.offsetHeight, expected_offsets.height, "Checking offsetHeight"); 58 }, "Offsets for: " + position_area + " with writing-mode / direction: " + writing_direction); 59 } 60 61 const top_left = {left:0, top:0, width:100, height:150}; 62 const top_right = {left:250, top:0, width:150, height:150}; 63 const bottom_left = {left:0, top:225, width:100, height:175}; 64 const bottom_right = {left:250, top:225, width:150, height:175}; 65 66 anchored.style.writingMode = "horizontal-tb"; 67 anchored.style.direction = "ltr"; 68 69 // Writing-mode and direction on container 70 let writing_direction = "containing-block: horizontal-tb / rtl"; 71 container.style.writingMode = "horizontal-tb"; 72 container.style.direction = "rtl"; 73 test_position_area(writing_direction, "start start", top_right); 74 test_position_area(writing_direction, "self-start self-start", top_left); 75 test_position_area(writing_direction, "x-start y-start", top_right); 76 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 77 test_position_area(writing_direction, "inline-start block-end", bottom_right); 78 test_position_area(writing_direction, "self-inline-start self-block-end", bottom_left); 79 80 // containing-block: vertical-lr / ltr 81 // self: horizontal-tb / ltr 82 writing_direction = "containing-block: vertical-lr / ltr"; 83 container.style.writingMode = "vertical-lr"; 84 container.style.direction = "ltr"; 85 test_position_area(writing_direction, "start start", top_left); 86 test_position_area(writing_direction, "self-start self-start", top_left); 87 test_position_area(writing_direction, "x-start y-start", top_left); 88 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 89 test_position_area(writing_direction, "inline-start block-end", top_right); 90 test_position_area(writing_direction, "self-inline-start self-block-end", bottom_left); 91 92 // containing-block: vertical-lr / rtl 93 // self: horizontal-tb / ltr 94 writing_direction = "containing-block: vertical-lr / rtl"; 95 container.style.writingMode = "vertical-lr"; 96 container.style.direction = "rtl"; 97 test_position_area(writing_direction, "start start", bottom_left); 98 test_position_area(writing_direction, "self-start self-start", top_left); 99 test_position_area(writing_direction, "x-start y-start", bottom_left); 100 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 101 102 // containing-block: vertical-rl / ltr 103 // self: horizontal-tb / ltr 104 writing_direction = "containing-block: vertical-rl / ltr"; 105 container.style.writingMode = "vertical-rl"; 106 container.style.direction = "ltr"; 107 test_position_area(writing_direction, "start start", top_right); 108 test_position_area(writing_direction, "self-start self-start", top_left); 109 test_position_area(writing_direction, "x-start y-start", top_right); 110 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 111 112 // containing-block: vertical-rl / rtl 113 // self: horizontal-tb / ltr 114 writing_direction = "containing-block: vertical-rl / rtl"; 115 container.style.writingMode = "vertical-rl"; 116 container.style.direction = "rtl"; 117 test_position_area(writing_direction, "start start", bottom_right); 118 test_position_area(writing_direction, "self-start self-start", top_left); 119 test_position_area(writing_direction, "x-start y-start", bottom_right); 120 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 121 122 // Writing-mode and direction on self 123 container.style.writingMode = "horizontal-tb"; 124 container.style.direction = "ltr"; 125 126 // containing-block: horizontal-tb / ltr 127 // self: horizontal-tb / rtl 128 writing_direction = "self: horizontal-tb / rtl"; 129 anchored.style.writingMode = "horizontal-tb"; 130 anchored.style.direction = "rtl"; 131 test_position_area(writing_direction, "start start", top_left); 132 test_position_area(writing_direction, "self-start self-start", top_right); 133 test_position_area(writing_direction, "x-start y-start", top_left); 134 test_position_area(writing_direction, "self-x-start self-y-start", top_right); 135 136 // containing-block: horizontal-tb / ltr 137 // self: vertical-lr / ltr 138 writing_direction = "self: vertical-lr / ltr"; 139 anchored.style.writingMode = "vertical-lr"; 140 anchored.style.direction = "ltr"; 141 test_position_area(writing_direction, "start start", top_left); 142 test_position_area(writing_direction, "self-start self-start", top_left); 143 test_position_area(writing_direction, "x-start y-start", top_left); 144 test_position_area(writing_direction, "self-x-start self-y-start", top_left); 145 146 // containing-block: horizontal-tb / ltr 147 // self: vertical-lr / rtl 148 writing_direction = "self: vertical-lr / rtl"; 149 anchored.style.writingMode = "vertical-lr"; 150 anchored.style.direction = "rtl"; 151 test_position_area(writing_direction, "start start", top_left); 152 test_position_area(writing_direction, "self-start self-start", bottom_left); 153 test_position_area(writing_direction, "x-start y-start", top_left); 154 test_position_area(writing_direction, "self-x-start self-y-start", bottom_left); 155 156 // containing-block: horizontal-tb / ltr 157 // self: vertical-rl / ltr 158 writing_direction = "self: vertical-rl / ltr"; 159 anchored.style.writingMode = "vertical-rl"; 160 anchored.style.direction = "ltr"; 161 test_position_area(writing_direction, "start start", top_left); 162 test_position_area(writing_direction, "self-start self-start", top_right); 163 test_position_area(writing_direction, "x-start y-start", top_left); 164 test_position_area(writing_direction, "self-x-start self-y-start", top_right); 165 166 // containing-block: horizontal-tb / ltr 167 // self: vertical-rl / rtl 168 writing_direction = "self: vertical-rl / rtl"; 169 anchored.style.writingMode = "vertical-rl"; 170 anchored.style.direction = "rtl"; 171 test_position_area(writing_direction, "start start", top_left); 172 test_position_area(writing_direction, "self-start self-start", bottom_right); 173 test_position_area(writing_direction, "x-start y-start", top_left); 174 test_position_area(writing_direction, "self-x-start self-y-start", bottom_right); 175 176 </script>