flexbox-single-column-4-ref.html (1167B)
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 Reference: Fragmentation of single-line column flex container in print context</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 10 <style> 11 @page { size:5in 3in; margin:0.5in; } 12 13 html, body { 14 font-size: 12pt; margin: 0; 15 } 16 17 .flexContainer { 18 display: block; 19 background: gray; 20 border: 0.25in solid lightgray; 21 } 22 article { 23 background: yellow; 24 block-size: 2in; 25 } 26 </style> 27 28 <body> 29 <div style="block-size: 0.25in; background: lightblue"></div> 30 <div class="flexContainer"> 31 <div class="flexContainer"> 32 <div class="flexContainer"> 33 <!-- <article> is expected to have 1 inch in the first page and 1 inch 34 in the second page. --> 35 <article></article> 36 </div> 37 </div> 38 </div> 39 <div style="block-size: 0.25in; background: lightblue"></div> 40 </body> 41 </html>