testing/web-platform/tests/css/css-overflow/line-clamp-with-floats-008.tentative.html


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

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: line-clamp IFC with floats extending past the clamp point</title>
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
<link rel="match" href="reference/line-clamp-with-floats-008-ref.html">
<meta name="assert" content="If the line-clamp container is an independent formatting context, it will clear contained floats before the clamp point, even if they extend beyond the last line. Lines past the clamp point will remain hidden.">
<style>
.clamp {
  display: flow-root;
  line-clamp: 4;
  font: 16px / 32px serif;
  padding: 0 4px;
  white-space: pre;
  background-color: yellow;
}
.float {
  float: left;
  width: 50px;
  height: 50px;
  margin: 4px;
  background-color: skyblue;
}
</style>
<div class="clamp">Line 1
Line 2
Line 3
<div class="float"></div>Line 4
Line 5</div>