<!doctype html>
<html lang=en>
<meta charset=utf-8>
<title>CSS-contain test: size containment and fragmentation</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net">
<meta name=flags content="ahem">
<meta name=assert content="size containment makes element monolithic">
<link rel="match" href="reference/contain-size-breaks-001-ref.html">
<link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-size">
<link rel=help href="https://drafts.csswg.org/css-break-3/#monolithic">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
article {
height: 2.5em;
column-gap: 0;
columns: 3 1em;
width: 3em;
font-size: 40px;
font-family: ahem;
line-height: 1;
}
div {
contain: size;
height: 5em;
color: orange;
}
</style>
<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails.
<article>
<div>A B C D E</div>
</article>
<!--
As the element is monolithic it should either:
* Overflow vertically, appearing as a single 1x5 em rectangle:
-----
| A |
| B |
| C |
| D |
| E |
-----
* Be sliced, with one slice in each column, appearing as a single 2x2.5 em rectangle:
----------
| A |' ◟ '
| B || D |
' ◜ '| E |
----------
Either way, it will always appear as a single rectangle.
If the element is not monolithic, it will fit 2 letters (A & B) in the first column,
2 (C & D) in the second column, and the fifth (E) will be overflowing the div,
either into the third column, or into the bottom of the second one.
Either way, this will not look like a rectangle.
Note: We use some UTF-8 characters to simulate the sliced C on the ASCII diagrams:
* U+25DC: ◜ Upper left quadrant circular arc
* U+25DF: ◟ Lower left quadrant circular arc
-->
Codebase Browser
chromium