wpt/css/css-multicol/parsing/column-pseudo-computed.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
<!DOCTYPE html>
<title>CSS Multi-column Layout Test: Computed ::column style</title>
<link rel="help" href="https://drafts.csswg.org/css-multicol-2/#column-pseudo">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
  #target {
    font-size: 20px;
    scroll-margin-bottom: 4px;
  }
  #target::column {
    font-size: 40px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin: 2px;
    scroll-margin-top: 2em;
    scroll-margin-bottom: inherit;
  }
</style>
<div id="target"></div>
<script>
  const column_style = getComputedStyle(target, "::column");

  test(() => {
    assert_equals(column_style.fontSize, "40px");
  }, "::column font-size applied");

  test(() => {
    assert_equals(column_style.scrollSnapAlign, "start");
  }, "::column scroll-snap-align");

  test(() => {
    assert_equals(column_style.scrollSnapStop, "always");
  }, "::column scroll-snap-stop");

  test(() => {
    assert_equals(column_style.scrollSnapMarginLeft, "2px");
    assert_equals(column_style.scrollSnapMarginRight, "2px");
    assert_equals(column_style.scrollSnapMarginTop, "80px");
    assert_equals(column_style.scrollSnapMarginBottom, "4px");
  }, "::column scroll-snap-margin");

</script>