getclientrects-005.html (4676B)
1 <!DOCTYPE html> 2 <title>getClientRects on fragmented table-column and table-column-group</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="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, 215); 45 assert_equals(rects[0].top, 25); 46 assert_equals(rects[0].width, 15); 47 assert_equals(rects[0].height, 83); 48 49 assert_equals(rects[1].left, 315); 50 assert_equals(rects[1].top, 8); 51 assert_equals(rects[1].width, 15); 52 assert_equals(rects[1].height, 100); 53 54 assert_equals(rects[2].left, 415); 55 assert_equals(rects[2].top, 8); 56 assert_equals(rects[2].width, 15); 57 assert_equals(rects[2].height, 67); 58 }, "#col1"); 59 60 test(()=> { 61 let rects = col2.getClientRects(); 62 assert_equals(rects.length, 3); 63 64 assert_equals(rects[0].left, 235); 65 assert_equals(rects[0].top, 25); 66 assert_equals(rects[0].width, 10); 67 assert_equals(rects[0].height, 83); 68 69 assert_equals(rects[1].left, 335); 70 assert_equals(rects[1].top, 8); 71 assert_equals(rects[1].width, 10); 72 assert_equals(rects[1].height, 100); 73 74 assert_equals(rects[2].left, 435); 75 assert_equals(rects[2].top, 8); 76 assert_equals(rects[2].width, 10); 77 assert_equals(rects[2].height, 67); 78 }, "#col2"); 79 80 test(()=> { 81 let rects = col3.getClientRects(); 82 assert_equals(rects.length, 3); 83 84 assert_equals(rects[0].left, 250); 85 assert_equals(rects[0].top, 25); 86 assert_equals(rects[0].width, 20); 87 assert_equals(rects[0].height, 83); 88 89 assert_equals(rects[1].left, 350); 90 assert_equals(rects[1].top, 8); 91 assert_equals(rects[1].width, 20); 92 assert_equals(rects[1].height, 100); 93 94 assert_equals(rects[2].left, 450); 95 assert_equals(rects[2].top, 8); 96 assert_equals(rects[2].width, 20); 97 assert_equals(rects[2].height, 67); 98 }, "#col3"); 99 100 test(()=> { 101 let rects = col4.getClientRects(); 102 assert_equals(rects.length, 3); 103 104 assert_equals(rects[0].left, 275); 105 assert_equals(rects[0].top, 25); 106 assert_equals(rects[0].width, 10); 107 assert_equals(rects[0].height, 83); 108 109 assert_equals(rects[1].left, 375); 110 assert_equals(rects[1].top, 8); 111 assert_equals(rects[1].width, 10); 112 assert_equals(rects[1].height, 100); 113 114 assert_equals(rects[2].left, 475); 115 assert_equals(rects[2].top, 8); 116 assert_equals(rects[2].width, 10); 117 assert_equals(rects[2].height, 67); 118 }, "#col4"); 119 120 test(()=> { 121 let rects = group.getClientRects(); 122 assert_equals(rects.length, 3); 123 124 assert_equals(rects[0].left, 250); 125 assert_equals(rects[0].top, 25); 126 assert_equals(rects[0].width, 35); 127 assert_equals(rects[0].height, 83); 128 129 assert_equals(rects[1].left, 350); 130 assert_equals(rects[1].top, 8); 131 assert_equals(rects[1].width, 35); 132 assert_equals(rects[1].height, 100); 133 134 assert_equals(rects[2].left, 450); 135 assert_equals(rects[2].top, 8); 136 assert_equals(rects[2].width, 35); 137 assert_equals(rects[2].height, 67); 138 }, "#group"); 139 </script>