mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
62831385c7
Add multicol-width-004.html and multicol-width-005.html to test "width: min-content" and "width: max-content" with column-span:all children. There's no size containment in these tests. Note it may be worth to reuse nsBlockFrame's mCachedMinISize and mCachedPrefISize to cache intrinsic size for ColumnSetWrapperFrame, but this can be done separately. Differential Revision: https://phabricator.services.mozilla.com/D29616 --HG-- extra : moz-landing-system : lando
68 lines
1.7 KiB
HTML
68 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Multi-column Layout Test Ref: Test width:max-content for a multi-column container with column-span:all children</title>
|
|
<link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com">
|
|
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
|
|
<style>
|
|
article {
|
|
border: 1px solid black;
|
|
}
|
|
.block {
|
|
width: 100px;
|
|
background-color: yellow;
|
|
}
|
|
.spanner {
|
|
column-span: all;
|
|
background-color: lime;
|
|
}
|
|
</style>
|
|
|
|
<!-- Case 1 -->
|
|
<article style="width: 80px;">
|
|
<div class="block">block1</div>
|
|
<div class="spanner" style="width: 50px;">spanner</div>
|
|
<div class="block">block2</div>
|
|
</article>
|
|
<br>
|
|
|
|
<!-- Case 2 -->
|
|
<article style="width: 120px;">
|
|
<div class="block">block1</div>
|
|
<div class="spanner" style="width: 50px;">spanner</div>
|
|
<div class="block">block2</div>
|
|
</article>
|
|
<br>
|
|
|
|
<!-- Case 3 -->
|
|
<article style="width: 150px;">
|
|
<div class="block">block1</div>
|
|
<div class="spanner" style="width: 150px;">spanner</div>
|
|
<div class="block">block2</div>
|
|
</article>
|
|
<br>
|
|
|
|
<!-- Case 4 -->
|
|
<article style="width: 210px;">
|
|
<div class="block">block1</div>
|
|
<div class="spanner">spanner</div>
|
|
<div class="block">block2</div>
|
|
</article>
|
|
<br>
|
|
|
|
<!-- Case 4 -->
|
|
<article style="width: 230px;">
|
|
<div class="block">block1</div>
|
|
<div class="spanner">spanner</div>
|
|
<div class="block">block2</div>
|
|
</article>
|
|
<br>
|
|
|
|
<!-- Case 6 -->
|
|
<article style="width: 250px;">
|
|
<div class="block">block1</div>
|
|
<div class="spanner" style="width: 250px;">spanner</div>
|
|
<div class="block">block2</div>
|
|
</article>
|
|
</html>
|