| <!DOCTYPE html> |
| <title>getClientRects on fragmented table-column and table-column-group, vertical-lr</title> |
| <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> |
| <link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-getclientrects"> |
| <link rel="help" href="https://drafts.csswg.org/css-multicol/"> |
| <style> |
| body { |
| margin: 8px; |
| } |
| </style> |
| <div style="float:left; writing-mode:vertical-lr; columns:6; gap:20px; inline-size:580px; column-rule:solid; column-fill:auto; block-size:100px; background:yellow;"> |
| <div style="block-size:110px;"></div> |
| <div style="display:table; inline-size:100%; border-spacing:5px; border:2px solid; background:pink;"> |
| <div style="display:table-caption; block-size:100px;"></div> |
| <div style="display:table-caption; caption-side:bottom; block-size:100px;"></div> |
| <div id="col1" style="display:table-column; inline-size:15px; background:blue;"></div> |
| <div id="col2" style="display:table-column; background:lime;"></div> |
| <div id="group" style="display:table-column-group;"> |
| <div id="col3" style="display:table-column; inline-size:20px; background:hotpink;"></div> |
| <div id="col4" style="display:table-column; inline-size:10px; background:cyan;" id="col2"></div> |
| </div> |
| <div style="display:table-row-group;"> |
| <div style="display:table-cell;"> |
| <div style="block-size:5px;"></div> |
| </div> |
| </div> |
| <div style="display:table-row-group;"> |
| <div style="display:table-cell;"> |
| <div style="block-size:240px;"></div> |
| </div> |
| <div style="display:table-cell;"></div> |
| <div style="display:table-cell;"></div> |
| <div style="display:table-cell;"></div> |
| </div> |
| </div> |
| </div> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| test(()=> { |
| let rects = col1.getClientRects(); |
| assert_equals(rects.length, 3); |
| |
| assert_equals(rects[0].top, 215); |
| assert_equals(rects[0].left, 25); |
| assert_equals(rects[0].height, 15); |
| assert_equals(rects[0].width, 83); |
| |
| assert_equals(rects[1].top, 315); |
| assert_equals(rects[1].left, 8); |
| assert_equals(rects[1].height, 15); |
| assert_equals(rects[1].width, 100); |
| |
| assert_equals(rects[2].top, 415); |
| assert_equals(rects[2].left, 8); |
| assert_equals(rects[2].height, 15); |
| assert_equals(rects[2].width, 67); |
| }, "#col1"); |
| |
| test(()=> { |
| let rects = col2.getClientRects(); |
| assert_equals(rects.length, 3); |
| |
| assert_equals(rects[0].top, 235); |
| assert_equals(rects[0].left, 25); |
| assert_equals(rects[0].height, 10); |
| assert_equals(rects[0].width, 83); |
| |
| assert_equals(rects[1].top, 335); |
| assert_equals(rects[1].left, 8); |
| assert_equals(rects[1].height, 10); |
| assert_equals(rects[1].width, 100); |
| |
| assert_equals(rects[2].top, 435); |
| assert_equals(rects[2].left, 8); |
| assert_equals(rects[2].height, 10); |
| assert_equals(rects[2].width, 67); |
| }, "#col2"); |
| |
| test(()=> { |
| let rects = col3.getClientRects(); |
| assert_equals(rects.length, 3); |
| |
| assert_equals(rects[0].top, 250); |
| assert_equals(rects[0].left, 25); |
| assert_equals(rects[0].height, 20); |
| assert_equals(rects[0].width, 83); |
| |
| assert_equals(rects[1].top, 350); |
| assert_equals(rects[1].left, 8); |
| assert_equals(rects[1].height, 20); |
| assert_equals(rects[1].width, 100); |
| |
| assert_equals(rects[2].top, 450); |
| assert_equals(rects[2].left, 8); |
| assert_equals(rects[2].height, 20); |
| assert_equals(rects[2].width, 67); |
| }, "#col3"); |
| |
| test(()=> { |
| let rects = col4.getClientRects(); |
| assert_equals(rects.length, 3); |
| |
| assert_equals(rects[0].top, 275); |
| assert_equals(rects[0].left, 25); |
| assert_equals(rects[0].height, 10); |
| assert_equals(rects[0].width, 83); |
| |
| assert_equals(rects[1].top, 375); |
| assert_equals(rects[1].left, 8); |
| assert_equals(rects[1].height, 10); |
| assert_equals(rects[1].width, 100); |
| |
| assert_equals(rects[2].top, 475); |
| assert_equals(rects[2].left, 8); |
| assert_equals(rects[2].height, 10); |
| assert_equals(rects[2].width, 67); |
| }, "#col4"); |
| |
| test(()=> { |
| let rects = group.getClientRects(); |
| assert_equals(rects.length, 3); |
| |
| assert_equals(rects[0].top, 250); |
| assert_equals(rects[0].left, 25); |
| assert_equals(rects[0].height, 35); |
| assert_equals(rects[0].width, 83); |
| |
| assert_equals(rects[1].top, 350); |
| assert_equals(rects[1].left, 8); |
| assert_equals(rects[1].height, 35); |
| assert_equals(rects[1].width, 100); |
| |
| assert_equals(rects[2].top, 450); |
| assert_equals(rects[2].left, 8); |
| assert_equals(rects[2].height, 35); |
| assert_equals(rects[2].width, 67); |
| }, "#group"); |
| </script> |
