flexbox-single-column-4.html (1555B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <html class="reftest-paged"> 5 <meta charset="utf-8"> 6 <title>CSS Flexbox Test: Fragmentation of nested block-size:auto flex containers with a tall flex item in print context, not top-of-page</title> 7 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 8 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 9 <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#pagination"> 10 <link rel="match" href="flexbox-single-column-4-ref.html"> 11 <meta name="assert" content="This test verifies fragmentation of a tall flex item in nested block-size:auto single-line column flex containers in print context."> 12 13 <style> 14 @page { size:5in 3in; margin:0.5in; } 15 16 html, body { 17 font-size: 12pt; margin: 0; 18 } 19 20 .flexContainer { 21 display: flex; 22 flex-wrap: nowrap; 23 flex-direction: column; 24 background: gray; 25 border: 0.25in solid lightgray; 26 } 27 article { 28 background: yellow; 29 block-size: 2in; 30 } 31 </style> 32 33 <body> 34 <div style="block-size: 0.25in; background: lightblue"></div> 35 <div class="flexContainer"> 36 <div class="flexContainer"> 37 <div class="flexContainer"> 38 <!-- <article> is expected to have 1 inch in the first page and 1 inch 39 in the second page. --> 40 <article></article> 41 </div> 42 </div> 43 </div> 44 <div style="block-size: 0.25in; background: lightblue"></div> 45 </body> 46 </html>