blob: 9e6a7809bee6c16487e039eff0c17ab92276957e [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Column clipping</title>
<style>
body {
width: 450px;
color: black;
background: white;
}
#container { margin:0 60px; }
.mc {
columns: 3;
column-gap: 15px;
column-fill: auto;
-webkit-columns: 3;
-webkit-column-gap: 15px;
-webkit-column-fill: auto;
-moz-columns:3;
-moz-column-gap:15px;
-moz-column-fill:auto;
height: 100px;
background: red;
}
.hoverflow { margin:0 -60px; }
.rect {
box-sizing:border-box;
height:100px;
border:10px solid green;
background:white;
}
</style>
</head>
<body>
<p>There should be a rectangle with a solid 10px thick green border below, and no red.</p>
<div id="container">
<div class="mc">
<div class="hoverflow">
<div class="rect"></div>
</div>
<div class="hoverflow">
<div class="rect"></div>
</div>
<div class="hoverflow">
<div class="rect"></div>
</div>
</div>
</div>
</body>
</html>