flexbox-break-request-vert-002a.html (3614B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title>CSS Test: Testing page-break-before in vertical single-line flex containers (should have no effect)</title> 9 <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> 10 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#algo-line-break"> 11 <link rel="match" href="flexbox-break-request-vert-002-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 div.flexbox { 15 display: flex; 16 flex-direction: column; 17 border: 1px dashed black; 18 width: 20px; 19 height: 60px; 20 margin: 2px; 21 float: left; 22 } 23 div.item { 24 height: 28px; 25 border: 1px solid blue; 26 background: lightblue; 27 } 28 </style> 29 </head> 30 <body> 31 <!-- page-break-before specified on first (and only) item, at a point where 32 we're already "breaking" (the beginning): --> 33 <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> 34 <div class="flexbox"> 35 <div class="item" style="page-break-before: auto"></div> 36 </div> 37 <div class="flexbox"> 38 <div class="item" style="page-break-before: avoid"></div> 39 </div> 40 <!-- * With 'page-break-before: always, left, right' (requesting a break): --> 41 <div class="flexbox"> 42 <div class="item" style="page-break-before: always"></div> 43 </div> 44 <div class="flexbox"> 45 <div class="item" style="page-break-before: left"></div> 46 </div> 47 <div class="flexbox"> 48 <div class="item" style="page-break-before: right"></div> 49 </div> 50 <div style="clear: both"></div> 51 52 <!-- page-break-before specified on second item, at a point where breaking 53 would otherwise be unnecessary: --> 54 <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> 55 <div class="flexbox"> 56 <div class="item"></div> 57 <div class="item" style="page-break-before: auto"></div> 58 </div> 59 <div class="flexbox"> 60 <div class="item"></div> 61 <div class="item" style="page-break-before: avoid"></div> 62 </div> 63 <!-- * With 'page-break-before: always, left, right' (requesting a break): --> 64 <div class="flexbox"> 65 <div class="item"></div> 66 <div class="item" style="page-break-before: always"></div> 67 </div> 68 <div class="flexbox"> 69 <div class="item"></div> 70 <div class="item" style="page-break-before: left"></div> 71 </div> 72 <div class="flexbox"> 73 <div class="item"></div> 74 <div class="item" style="page-break-before: right"></div> 75 </div> 76 <div style="clear: both"></div> 77 78 <!-- page-break-before specified on third item, at a point where breaking 79 is already necessary: --> 80 <!-- * With 'page-break-before: auto, avoid' (not requesting a break): --> 81 <div class="flexbox"> 82 <div class="item"></div> 83 <div class="item"></div> 84 <div class="item" style="page-break-before: auto"></div> 85 </div> 86 <div class="flexbox"> 87 <div class="item"></div> 88 <div class="item"></div> 89 <div class="item" style="page-break-before: avoid"></div> 90 </div> 91 <!-- * With 'page-break-before: always, left, right' (requesting a break): --> 92 <div class="flexbox"> 93 <div class="item"></div> 94 <div class="item"></div> 95 <div class="item" style="page-break-before: always"></div> 96 </div> 97 <div class="flexbox"> 98 <div class="item"></div> 99 <div class="item"></div> 100 <div class="item" style="page-break-before: left"></div> 101 </div> 102 <div class="flexbox"> 103 <div class="item"></div> 104 <div class="item"></div> 105 <div class="item" style="page-break-before: right"></div> 106 </div> 107 </body> 108 </html>