wpt/css/css-multicol/subpixel-column-progression.html at master · web-platform-tests/wpt · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<title>Element placed right after all columns (as specified by column-count)</title>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://un5pwb8rvk5j89wkxbcf89h0br.julianrbryant.com/issues/467869214">
<style>
  body { margin:0; }
</style>
<div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;">
  <div style="height:479px;"></div>
  <div id="elm1" style="height:1px;"></div>
</div>

<div style="columns:479; column-fill:auto; gap:0; width:100px; height:1px;">
  <div style="height:958px;"></div>
  <div id="elm2" style="height:1px;"></div>
</div>

<div style="columns:100; column-fill:auto; gap:1.01px; width:500px; height:1px;">
  <div style="height:99px;"></div>
  <div id="elm3" style="margin-left:auto; width:0; height:1px;"></div>
</div>

<div style="columns:100; column-fill:auto; gap:1.01px; width:0; height:1px;">
  <div style="height:100px;"></div>
  <div id="elm4" style="height:1px;"></div>
</div>

<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
  test(()=> {
    assert_equals(elm1.getBoundingClientRect().left, 100);
  }, "Should be exactly to the right of the multicol container");

  test(()=> {
    assert_equals(elm2.getBoundingClientRect().left, 200);
  }, "Should equal to two multicol container widths");

  test(()=> {
    assert_equals(elm3.getBoundingClientRect().left, 500);
  }, "Fractional column gaps and widths");

  test(()=> {
    assert_equals(elm4.getBoundingClientRect().left, 101);
  }, "No space for columns, only gaps");
</script>