blob: d3d421459111f537bc287d8a165044e444e22b1d [file] [log] [blame]
<!DOCTYPE html>
<!--
| A sequence of collapsible spaces at the beginning of a line is removed.
| A sequence of collapsible spaces at the end of a line is removed.
| https://www.w3.org/TR/css3-text/#white-space-phase-2
-->
<html>
<head>
<style>
body {
margin: 0px;
font-family: Roboto;
font-size: 50px;
font-weight: bold;
}
.inline-block {
background-color: #b3e5fc;
display: inline-block;
}
.invisible {
background-color: #f44336;
/* TODO: Use "border: 1px solid #4caf50;" in addition to. */
}
.visible {
background-color: #4caf50;
padding: 0 10px;
}
</style>
</head>
<body>
<div>
<div class="inline-block"> Hello, world! </div>
</div>
<div>
<div class="inline-block"><span class="visible"></span><span class="invisible"> </span> Hello, world!</div>
</div>
<div>
<div class="inline-block"><span class="visible"> </span><span class="invisible"> </span> Hello, world!</div>
</div>
<div>
<div class="inline-block">Hello, world!<span class="invisible"> </span><span class="visible"></span></div>
</div>
<div>
<div class="inline-block">Hello, world!<span class="invisible"> </span><span class="visible"> </span></div>
</div>
</body>
</html>