flexbox-break-request-horiz-002b.html (3555B)
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-after in horizontal 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-horiz-002-ref.html"> 12 <meta charset="utf-8"> 13 <style> 14 div.flexbox { 15 display: flex; 16 border: 1px dashed black; 17 width: 60px; 18 height: 20px; 19 margin: 2px; 20 float: left; 21 } 22 div.item { 23 width: 28px; 24 border: 1px solid blue; 25 background: lightblue; 26 } 27 </style> 28 </head> 29 <body> 30 <!-- page-break-after specified on first (and only) item, at a point where 31 we're already "breaking" (the end): --> 32 <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> 33 <div class="flexbox"> 34 <div class="item" style="page-break-after: auto"></div> 35 </div> 36 <div class="flexbox"> 37 <div class="item" style="page-break-after: avoid"></div> 38 </div> 39 <!-- * With 'page-break-after: always, left, right' (requesting a break): --> 40 <div class="flexbox"> 41 <div class="item" style="page-break-after: always"></div> 42 </div> 43 <div class="flexbox"> 44 <div class="item" style="page-break-after: left"></div> 45 </div> 46 <div class="flexbox"> 47 <div class="item" style="page-break-after: right"></div> 48 </div> 49 <div style="clear: both"></div> 50 51 <!-- page-break-after specified on first item, at a point where breaking 52 would otherwise be unnecessary: --> 53 <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> 54 <div class="flexbox"> 55 <div class="item" style="page-break-after: auto"></div> 56 <div class="item"></div> 57 </div> 58 <div class="flexbox"> 59 <div class="item" style="page-break-after: avoid"></div> 60 <div class="item"></div> 61 </div> 62 <!-- * With 'page-break-after: always, left, right' (requesting a break): --> 63 <div class="flexbox"> 64 <div class="item" style="page-break-after: always"></div> 65 <div class="item"></div> 66 </div> 67 <div class="flexbox"> 68 <div class="item" style="page-break-after: left"></div> 69 <div class="item"></div> 70 </div> 71 <div class="flexbox"> 72 <div class="item" style="page-break-after: right"></div> 73 <div class="item"></div> 74 </div> 75 <div style="clear: both"></div> 76 77 <!-- page-break-after specified on second item, at a point where breaking 78 is already necessary: --> 79 <!-- * With 'page-break-after: auto, avoid' (not requesting a break): --> 80 <div class="flexbox"> 81 <div class="item"></div> 82 <div class="item" style="page-break-after: auto"></div> 83 <div class="item"></div> 84 </div> 85 <div class="flexbox"> 86 <div class="item"></div> 87 <div class="item" style="page-break-after: avoid"></div> 88 <div class="item"></div> 89 </div> 90 <!-- * With 'page-break-after: always, left, right' (requesting a break): --> 91 <div class="flexbox"> 92 <div class="item"></div> 93 <div class="item" style="page-break-after: always"></div> 94 <div class="item"></div> 95 </div> 96 <div class="flexbox"> 97 <div class="item"></div> 98 <div class="item" style="page-break-after: left"></div> 99 <div class="item"></div> 100 </div> 101 <div class="flexbox"> 102 <div class="item"></div> 103 <div class="item" style="page-break-after: right"></div> 104 <div class="item"></div> 105 </div> 106 </body> 107 </html>