getclientrects-006.html (4715B)
1 <!DOCTYPE html> 2 <title>getClientRects on fragmented table-column and table-column-group, vertical-rl</title> 3 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getclientrects"> 5 <link rel="help" href="https://drafts.csswg.org/css-multicol/"> 6 <style> 7 body { 8 margin: 8px; 9 } 10 </style> 11 <div style="writing-mode:vertical-rl; columns:6; gap:20px; inline-size:580px; column-rule:solid; column-fill:auto; block-size:100px; background:yellow;"> 12 <div style="block-size:110px;"></div> 13 <div style="display:table; inline-size:100%; border-spacing:5px; border:2px solid; background:pink;"> 14 <div style="display:table-caption; block-size:100px;"></div> 15 <div style="display:table-caption; caption-side:bottom; block-size:100px;"></div> 16 <div id="col1" style="display:table-column; inline-size:15px; background:blue;"></div> 17 <div id="col2" style="display:table-column; background:lime;"></div> 18 <div id="group" style="display:table-column-group;"> 19 <div id="col3" style="display:table-column; inline-size:20px; background:hotpink;"></div> 20 <div id="col4" style="display:table-column; inline-size:10px; background:cyan;" id="col2"></div> 21 </div> 22 <div style="display:table-row-group;"> 23 <div style="display:table-cell;"> 24 <div style="block-size:5px;"></div> 25 </div> 26 </div> 27 <div style="display:table-row-group;"> 28 <div style="display:table-cell;"> 29 <div style="block-size:240px;"></div> 30 </div> 31 <div style="display:table-cell;"></div> 32 <div style="display:table-cell;"></div> 33 <div style="display:table-cell;"></div> 34 </div> 35 </div> 36 </div> 37 <script src="/resources/testharness.js"></script> 38 <script src="/resources/testharnessreport.js"></script> 39 <script> 40 test(()=> { 41 let rects = col1.getClientRects(); 42 assert_equals(rects.length, 3); 43 44 assert_equals(rects[0].left, 8); 45 assert_equals(rects[0].top, 215); 46 assert_equals(rects[0].width, 83); 47 assert_equals(rects[0].height, 15); 48 49 assert_equals(rects[1].left, 8); 50 assert_equals(rects[1].top, 315); 51 assert_equals(rects[1].width, 100); 52 assert_equals(rects[1].height, 15); 53 54 assert_equals(rects[2].left, 41); 55 assert_equals(rects[2].top, 415); 56 assert_equals(rects[2].width, 67); 57 assert_equals(rects[2].height, 15); 58 }, "#col1"); 59 60 test(()=> { 61 let rects = col2.getClientRects(); 62 assert_equals(rects.length, 3); 63 64 assert_equals(rects[0].left, 8); 65 assert_equals(rects[0].top, 235); 66 assert_equals(rects[0].width, 83); 67 assert_equals(rects[0].height, 10); 68 69 assert_equals(rects[1].left, 8); 70 assert_equals(rects[1].top, 335); 71 assert_equals(rects[1].width, 100); 72 assert_equals(rects[1].height, 10); 73 74 assert_equals(rects[2].left, 41); 75 assert_equals(rects[2].top, 435); 76 assert_equals(rects[2].width, 67); 77 assert_equals(rects[2].height, 10); 78 }, "#col2"); 79 80 test(()=> { 81 let rects = col3.getClientRects(); 82 assert_equals(rects.length, 3); 83 84 assert_equals(rects[0].left, 8); 85 assert_equals(rects[0].top, 250); 86 assert_equals(rects[0].width, 83); 87 assert_equals(rects[0].height, 20); 88 89 assert_equals(rects[1].left, 8); 90 assert_equals(rects[1].top, 350); 91 assert_equals(rects[1].width, 100); 92 assert_equals(rects[1].height, 20); 93 94 assert_equals(rects[2].left, 41); 95 assert_equals(rects[2].top, 450); 96 assert_equals(rects[2].width, 67); 97 assert_equals(rects[2].height, 20); 98 }, "#col3"); 99 100 test(()=> { 101 let rects = col4.getClientRects(); 102 assert_equals(rects.length, 3); 103 104 assert_equals(rects[0].left, 8); 105 assert_equals(rects[0].top, 275); 106 assert_equals(rects[0].width, 83); 107 assert_equals(rects[0].height, 10); 108 109 assert_equals(rects[1].left, 8); 110 assert_equals(rects[1].top, 375); 111 assert_equals(rects[1].width, 100); 112 assert_equals(rects[1].height, 10); 113 114 assert_equals(rects[2].left, 41); 115 assert_equals(rects[2].top, 475); 116 assert_equals(rects[2].width, 67); 117 assert_equals(rects[2].height, 10); 118 }, "#col4"); 119 120 test(()=> { 121 let rects = group.getClientRects(); 122 assert_equals(rects.length, 3); 123 124 assert_equals(rects[0].left, 8); 125 assert_equals(rects[0].top, 250); 126 assert_equals(rects[0].width, 83); 127 assert_equals(rects[0].height, 35); 128 129 assert_equals(rects[1].left, 8); 130 assert_equals(rects[1].top, 350); 131 assert_equals(rects[1].width, 100); 132 assert_equals(rects[1].height, 35); 133 134 assert_equals(rects[2].left, 41); 135 assert_equals(rects[2].top, 450); 136 assert_equals(rects[2].width, 67); 137 assert_equals(rects[2].height, 35); 138 }, "#group"); 139 </script>