blob: b9b8c78c0eaae69669f0e2b4cc3d95457554efe0 [file] [log] [blame]
<!DOCTYPE html>
<title>CSS Snap Size: snap-width</title>
<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;
}
.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="ref">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
<div class="border container">
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
<div class="padding container">
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
<div class="border padding container">
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
<div class="ref">XXXXXXXXXX XXXXXXXXX</div>
</div>
</body>