blob: cac8e32e8a01d2a7f1237bc6714b2f7a394763de [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Snap Size: snap-width</title>
<link rel="help" href="https://drafts.csswg.org/css-snap-size/#snap-width">
<link rel="match" href="reference/snap-width-inline-001.html">
<meta name="assert" content="This test asserts the snap-width property rounds down the box width.">
<meta name="flags" content="ahem">
<link rel="author" title="Koji Ishii" href="kojiishi@gmail.com">
<style>
.container {
font-family: Ahem;
font-size: 32px;
line-height: 1;
}
.container > div {
margin: .5em 0;
}
.border > div {
border-left: .4em transparent solid;
border-right: .4em transparent solid;
}
.padding > div {
padding: 0 .4em;
}
.container { width: 20.5em; }
.container.border, .container.padding { width: 21.3em; }
.container.border.padding { width: 22.1em; }
.test {
snap-width: 1em;
text-align: right;
}
.ref {
white-space: pre; /* make sure the line does not wrap */
width: 20em;
}
</style>
<body>
<p class="instructions" style="display:none">Test passes if each pair of boxes are the same,
including how they look, widths, and horizontal positions.
<div class="container">
<div class="test">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
<div class="border container">
<div class="test">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
<div class="padding container">
<div class="test">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
<div class="border padding container">
<div class="test">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
</body>