wpt/css/css-overflow/line-clamp/line-clamp-with-fixed-pos-003.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
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: fixed pos whose containing block is outside the line-clamp container gets painted</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-abspos-001-ref.html">
<meta name="assert" content="Fixed positioned boxes in a line-clamp container are shown if and only if their fixed positioning containing block precedes or contains the clamp point. In this case, the containing block is the layout viewport, so the fixed-pos gets shown, even if its static position is after the clamp point.">
<style>
.clamp {
  line-clamp: 4;
  font: 16px / 32px serif;
  padding: 0 4px;
  white-space: pre;
  background-color: yellow;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: skyblue;
}
</style>
<div class="clamp">Line 1
Line 2
Line 3
Line 4
<div class="fixed"></div>Line 5</div>