40 lines
1.5 KiB
HTML
40 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<!-- This is a reference case for a "2-pages-per-sheet" scenario. The width and
|
|
height of each "swatch" is 0.625 the width and height of the page. That
|
|
0.625 scale-factor comes from the fact that, when rendering the testcase,
|
|
we'll need to scale the page-width (8in) down enough to fit side-by-side
|
|
into half of the page height (10in/2 = 5in), on a rotated sheet. So we've
|
|
got to scale 8in to fit into 5in, which is a scale factor of 0.625. -->
|
|
<style>
|
|
html { height: 100%; }
|
|
body {
|
|
height: 100%;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
|
|
/* The testcase (rendered at 2-pages-per-sheet) will have 1.75in of extra
|
|
space in the vertical axis, which will be distributed equally with 0.875in
|
|
on the top and the bottom of the page grid. We mock that up as padding
|
|
here: */
|
|
padding: 0.875in 0;
|
|
|
|
/* We lay out the body as a row-oriented flex container, with two
|
|
side-by-side children which correspond to the two pages per sheet: */
|
|
display: flex;
|
|
}
|
|
.swatch {
|
|
box-sizing: border-box;
|
|
|
|
/* This represents the 240px border in the testcase, scaled down 0.625x: */
|
|
border: 150px solid;
|
|
|
|
/* Share the width equally among the swatches. (The height will be
|
|
automatically set to the flex container's row height, via default
|
|
'align-self' behavior.) */
|
|
flex: 1;
|
|
}
|
|
.swatch:nth-child(1) { border-color: cyan; }
|
|
.swatch:nth-child(2) { border-color: pink; }
|
|
</style>
|
|
<div class="swatch"></div>
|
|
<div class="swatch"></div>
|