getclientrects-002.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 5 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-multicol/getclientrects-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>out-of-flow in relpos in multicol</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: 0;

</style>

<div style="margin:10px; border:10px solid; padding:5px; columns:3; gap:50px; column-fill:auto; inline-size:400px; block-size:100px;">

  <div style="block-size:50px;"></div>

  <div style="position:relative;">

    <div style="block-size:60px;"></div>

    <div id="elm" style="position:absolute; inline-size:10px; border:10px solid; block-size:100px;"></div>

  </div>

</div>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

  let rects = elm.getClientRects();

  test(()=> { assert_equals(rects.length, 2); }, "Rectangle count");

  test(()=> { assert_equals(rects[0].left, 175); }, "#0 left");

  test(()=> { assert_equals(rects[0].top, 35); }, "#0 top");

  test(()=> { assert_equals(rects[0].width, 30); }, "#0 width");

  test(()=> { assert_equals(rects[0].height, 90); }, "#0 height");

  test(()=> { assert_equals(rects[1].left, 325); }, "#1 left");

  test(()=> { assert_equals(rects[1].top, 25); }, "#1 top");

  test(()=> { assert_equals(rects[1].width, 30); }, "#1 width");

  test(()=> { assert_equals(rects[1].height, 30); }, "#1 height");

</script>