Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-overflow/line-clamp/line-clamp-with-fixed-pos-013.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Overflow: fixed pos whose containing block contains the clamp point gets painted</title>
<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
<link rel="match" href="reference/line-clamp-with-abspos-013-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 contains the clamp point, so the fixed-pos gets painted, 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;
}
.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">Line 1
Line 2
Line 3
<div class="transformed">Line 4
Line 5<div class="fixed"></div></div></div>