getclientrects-000.html (5004B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects"> 4 <link rel="help" href="https://drafts.csswg.org/css-multicol/"> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style> 7 .multicol { 8 visibility: hidden; 9 position: absolute; 10 left: 100px; 11 top: 50px; 12 columns: 3; 13 column-gap: 10px; 14 inline-size: 290px; 15 font: 20px/1 Ahem; 16 orphans: 1; 17 widows: 1; 18 } 19 #horizontalTbLtr { 20 writing-mode: horizontal-tb; 21 } 22 #verticalLrLtr { 23 writing-mode: vertical-lr; 24 } 25 #verticalRlLtr { 26 writing-mode: vertical-rl; 27 } 28 #horizontalTbRtl { 29 writing-mode: horizontal-tb; 30 direction: rtl; 31 } 32 #verticalLrRtl { 33 writing-mode: vertical-lr; 34 direction: rtl; 35 } 36 #verticalRlRtl { 37 writing-mode: vertical-rl; 38 direction: rtl; 39 } 40 </style> 41 <div class="multicol" id="horizontalTbLtr"> 42 <div style="block-size:20px;"></div> 43 <span>XXXX XXXX XXXX XXXX</span> 44 </div> 45 <div class="multicol" id="verticalLrLtr"> 46 <div style="block-size:20px;"></div> 47 <span>XXXX XXXX XXXX XXXX</span> 48 </div> 49 <div class="multicol" id="verticalRlLtr"> 50 <div style="block-size:20px;"></div> 51 <span>XXXX XXXX XXXX XXXX</span> 52 </div> 53 <div class="multicol" id="horizontalTbRtl" > 54 <div style="block-size:20px;"></div> 55 <span>XXXX XXXX XXXX XXXX</span> 56 </div> 57 <div class="multicol" id="verticalLrRtl"> 58 <div style="block-size:20px;"></div> 59 <span>XXXX XXXX XXXX XXXX</span> 60 </div> 61 <div class="multicol" id="verticalRlRtl"> 62 <div style="block-size:20px;"></div> 63 <span>XXXX XXXX XXXX XXXX</span> 64 </div> 65 <script src="/resources/testharness.js"></script> 66 <script src="/resources/testharnessreport.js"></script> 67 <script> 68 setup({ explicit_done: true }); 69 70 document.fonts.ready.then(() => { 71 test(()=> { 72 var span = document.querySelector("#horizontalTbLtr span"); 73 var rects = span.getClientRects(); 74 assert_equals(rects.length, 4); 75 assert_equals(rects[0].left, 100); 76 assert_equals(rects[0].top, 70); 77 assert_equals(rects[1].left, 200); 78 assert_equals(rects[1].top, 50); 79 assert_equals(rects[2].left, 200); 80 assert_equals(rects[2].top, 70); 81 assert_equals(rects[3].left, 300); 82 assert_equals(rects[3].top, 50); 83 }, "horizontal-tb ltr"); 84 85 test(()=> { 86 var span = document.querySelector("#verticalLrLtr span"); 87 var rects = span.getClientRects(); 88 assert_equals(rects.length, 4); 89 assert_equals(rects[0].left, 120); 90 assert_equals(rects[0].top, 50); 91 assert_equals(rects[1].left, 100); 92 assert_equals(rects[1].top, 150); 93 assert_equals(rects[2].left, 120); 94 assert_equals(rects[2].top, 150); 95 assert_equals(rects[3].left, 100); 96 assert_equals(rects[3].top, 250); 97 }, "vertical-lr ltr"); 98 99 test(()=> { 100 var span = document.querySelector("#verticalRlLtr span"); 101 var rects = span.getClientRects(); 102 assert_equals(rects.length, 4); 103 assert_equals(rects[0].left, 100); 104 assert_equals(rects[0].top, 50); 105 assert_equals(rects[1].left, 120); 106 assert_equals(rects[1].top, 150); 107 assert_equals(rects[2].left, 100); 108 assert_equals(rects[2].top, 150); 109 assert_equals(rects[3].left, 120); 110 assert_equals(rects[3].top, 250); 111 }, "vertical-rl ltr"); 112 113 test(()=> { 114 var span = document.querySelector("#horizontalTbRtl span"); 115 var rects = span.getClientRects(); 116 assert_equals(rects.length, 4); 117 assert_equals(rects[0].left, 310); 118 assert_equals(rects[0].top, 70); 119 assert_equals(rects[1].left, 210); 120 assert_equals(rects[1].top, 50); 121 assert_equals(rects[2].left, 210); 122 assert_equals(rects[2].top, 70); 123 assert_equals(rects[3].left, 110); 124 assert_equals(rects[3].top, 50); 125 }, "horizontal-tb rtl"); 126 127 test(()=> { 128 var span = document.querySelector("#verticalLrRtl span"); 129 var rects = span.getClientRects(); 130 assert_equals(rects.length, 4); 131 assert_equals(rects[0].left, 120); 132 assert_equals(rects[0].top, 260); 133 assert_equals(rects[1].left, 100); 134 assert_equals(rects[1].top, 160); 135 assert_equals(rects[2].left, 120); 136 assert_equals(rects[2].top, 160); 137 assert_equals(rects[3].left, 100); 138 assert_equals(rects[3].top, 60); 139 }, "vertical-lr rtl"); 140 141 test(()=> { 142 var span = document.querySelector("#verticalRlRtl span"); 143 var rects = span.getClientRects(); 144 assert_equals(rects.length, 4); 145 assert_equals(rects[0].left, 100); 146 assert_equals(rects[0].top, 260); 147 assert_equals(rects[1].left, 120); 148 assert_equals(rects[1].top, 160); 149 assert_equals(rects[2].left, 100); 150 assert_equals(rects[2].top, 160); 151 assert_equals(rects[3].left, 120); 152 assert_equals(rects[3].top, 60); 153 }, "vertical-rl rtl"); 154 155 done(); 156 }); 157 </script>