wpt/css/css-contain/contain-size-multicol-001.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>
<meta charset="utf-8">
<title>CSS Containment Test: Size containment on a multicol with set column size (and gap)</title>
<link rel="author" title="Florian Rivoal" href="https://un5pec8mwazx69pkwjkbfgr9.julianrbryant.com/">
<link rel="help" href="https://un5n798jx6qx6j0rmf2verhh.julianrbryant.com/css-contain-1/#containment-size">
<meta name=assert content="columns and column-gap do affect the size of a multicol, even with size containment">
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">

<style>
div {
  position: absolute;
}
#red {
  background: red;
  width: 100px;
  height: 100px;
}
#test {
  background: green;

  contain: size;
  columns: 2 40px;
  column-gap: 20px;
  min-height: 100px;

  color: transparent;
}
</style>

<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div id=red></div>
<div id=test>
filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler
filler filler filler filler filler filler filler filler
</div>

<!--
The filler text, min-height (instead of height) and transparent color
are to make the test fail in browsers
that do not implement contain:size at all,
by making the box non square.
-->