Google Git
Sign in
chromium / chromium / src.git / 4fd348fdb9c0b3842829acdfb2b82c86dacd8e0a / . / third_party / WebKit / LayoutTests / fast / css-intrinsic-dimensions / multicol.html
blob: 0b81f9595bea99be926cb68f55c6003e3143bb0c [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<title>Multicol intrinsic width calculation</title>
<style>
.gap15 { -webkit-column-gap:15px; column-gap:15px; }
.mc3 { -webkit-columns:3; columns:3; }
.mc3w50 { -webkit-columns:3 50px; columns:3 50px; }
.mc3w150 { -webkit-columns:3 150px; columns:3 150px; }
.mcw50 { -webkit-columns:50px; columns:50px; }
.mcw150 { -webkit-columns:150px; columns:150px; }
.intrinsic { width:fit-content; }
.hidden { visibility:hidden; } /* hide garbage produced from &#x200b; characters */
</style>
</head>
<body>
<!-- min intrinsic width, non-auto column-count -->
<div style="width:1px;">
<div class="intrinsic mc3 gap15" data-expected-width="330">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- max intrinsic width, non-auto column-count -->
<div style="width:1000px;">
<div class="intrinsic mc3 gap15" data-expected-width="330">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- min intrinsic width, non-auto column-count, breakable lines -->
<div style="width:1px;">
<div class="intrinsic mc3 gap15" data-expected-width="330">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- max intrinsic width, non-auto column-count, breakable lines -->
<div style="width:1000px;">
<div class="intrinsic mc3 gap15" data-expected-width="630">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- min intrinsic width, non-auto column-count and small column-width -->
<div style="width:1px;">
<div class="intrinsic mc3w50 gap15" data-expected-width="50">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- max intrinsic width, non-auto column-count and small column-width -->
<div style="width:1000px;">
<div class="intrinsic mc3w50 gap15" data-expected-width="330">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- min intrinsic width, non-auto column-count and small column-width, breakable lines -->
<div style="width:1px;">
<div class="intrinsic mc3w50 gap15" data-expected-width="50">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- max intrinsic width, non-auto column-count and small column-width, breakable lines -->
<div style="width:1000px;">
<div class="intrinsic mc3w50 gap15" data-expected-width="630">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- min intrinsic width, non-auto column-count and large column-width -->
<div style="width:1px;">
<div class="intrinsic mc3w150 gap15" data-expected-width="100">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- max intrinsic width, non-auto column-count and large column-width -->
<div style="width:1000px;">
<div class="intrinsic mc3w150 gap15" data-expected-width="480">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- min intrinsic width, non-auto column-count and large column-width, breakable lines -->
<div style="width:1px;">
<div class="intrinsic mc3w150 gap15" data-expected-width="100">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- max intrinsic width, non-auto column-count and large column-width, breakable lines -->
<div style="width:1000px;">
<div class="intrinsic mc3w150 gap15" data-expected-width="630">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- min intrinsic width, auto column-count and small column-width -->
<div style="width:1px;">
<div class="intrinsic mcw50 gap15" data-expected-width="50">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- max intrinsic width, auto column-count and small column-width -->
<div style="width:1000px;">
<div class="intrinsic mcw50 gap15" data-expected-width="100">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- min intrinsic width, auto column-count and small column-width, breakable lines -->
<div style="width:1px;">
<div class="intrinsic mcw50 gap15" data-expected-width="50">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- max intrinsic width, auto column-count and small column-width, breakable lines -->
<div style="width:1000px;">
<div class="intrinsic mcw50 gap15" data-expected-width="200">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- min intrinsic width, auto column-count and large column-width -->
<div style="width:1px;">
<div class="intrinsic mcw150 gap15" data-expected-width="100">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- max intrinsic width, auto column-count and large column-width -->
<div style="width:1000px;">
<div class="intrinsic mcw150 gap15" data-expected-width="150">
<div style="width:100px; height:10px;"></div>
</div>
</div>
<!-- min intrinsic width, auto column-count and large column-width, breakable lines -->
<div style="width:1px;">
<div class="intrinsic mcw150 gap15" data-expected-width="100">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<!-- max intrinsic width, auto column-count and large column-width, breakable lines -->
<div style="width:1000px;">
<div class="intrinsic mcw150 gap15" data-expected-width="200">
<div class="hidden"><div style="display:inline-block; width:100px; height:10px;"></div>&#x200b;<div style="display:inline-block; width:100px; height:10px;"></div></div>
</div>
</div>
<script src="../../resources/check-layout.js"></script>
<script>
checkLayout(".intrinsic");
</script>
</body>
</html>