File: line-clamp-with-fixed-pos-012.html

package info (click to toggle)
thunderbird 1%3A140.4.0esr-1~deb13u1
  • links: PTS, VCS
  • area: main
  • in suites: trixie-proposed-updates
  • size: 4,609,412 kB
  • sloc: cpp: 7,672,442; javascript: 5,901,613; ansic: 3,898,954; python: 1,413,343; xml: 653,997; asm: 462,286; java: 180,927; sh: 113,489; makefile: 20,460; perl: 14,288; objc: 13,059; yacc: 4,583; pascal: 3,352; lex: 1,720; ruby: 1,222; exp: 762; sql: 715; awk: 580; php: 436; lisp: 430; sed: 70; csh: 10
file content (37 lines) | stat: -rw-r--r-- 1,193 bytes parent folder | download | duplicates (10) 
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
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: fixed pos whose containing block is fully after the clamp point 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/webkit-line-clamp-005-ref.html">
<meta name="assert" content="Fixed positioned boxes in a line-clamp container are hidden if and only if their fixed positioning containing block precedes or contains the clamp point. In this case, the containing block is fully after the clamp point, so the fixed-pos is hidden.">
<style>
.clamp {
  line-clamp: 4;
  font: 16px / 32px serif;
  padding: 0 4px;
  background-color: yellow;
}
.transformed {
  transform: scale(1); /* Makes it a fixed-pos containing block */
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: skyblue;
}
</style>
<div class="clamp">
  <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 3</div>
    <div>Line 4</div>
    <div class="transformed">
      <div class="fixed"></div>
      <div>Line 5</div>
      <div>Line 6</div>
    </div>
</div>