printpreview_pps_uw2_ref.html (2055B)
1 <!DOCTYPE html> 2 <!-- This is a reference case for a "2-pages-per-sheet" scenario with nonzero 3 unwriteable margins. We expect the pages to have a 0.5x scale-down 4 factor. That 0.5 scale-factor comes from the fact that, when rendering the 5 testcase, we'll need to scale the page-width (8in) down enough to fit 6 side-by-side into half of the sheet's available width (with the sheet 7 having been rotated to landscape mode), with the sheet's unwritable margin 8 having already been subtracted out. The sheet's width (in landscape mode) 9 is 10in, and its unwriteable margin in that axis is 2in, so it's got 8in 10 of available width to hold two side-by-side pages, i.e. 4in per page. 11 Since the page width was 8in, that makes for a 0.5x scale. --> 12 <style> 13 html { height: 100%; } 14 body { 15 height: 100%; 16 margin: 0; 17 box-sizing: border-box; 18 19 /* The testcase (rendered at 2-pages-per-sheet) will have 2in of extra space 20 in the vertical axis, which will be distributed equally with 1in on the 21 top and the bottom of the page grid (separately from the sheet's 22 unwriteable margin). We mock that up as padding here: */ 23 padding: 1in 0; 24 25 /* We lay out the body as a row-oriented flex container, with two 26 side-by-side children which correspond to the two pages per sheet: */ 27 display: flex; 28 } 29 .swatch { 30 box-sizing: border-box; 31 32 /* This represents the 240px border in the testcase, scaled down 0.5x: */ 33 border: 120px solid; 34 35 /* Share the width equally among the swatches. (The height will be 36 automatically set to the flex container's row height, via default 37 'align-self' behavior.) */ 38 flex: 1; 39 40 /* This margin is meant to mock up the unwriteable margin for each page on 41 our sheet; it's exactly 0.5x the unwriteableMargin values specified for 42 the testcase in printpreview_helper.xhtml. */ 43 margin: 0.4in 0.3in 0.6in 0.2in; 44 } 45 .swatch:nth-child(1) { border-color: cyan; } 46 .swatch:nth-child(2) { border-color: pink; } 47 </style> 48 <div class="swatch"></div> 49 <div class="swatch"></div>