media-queries-001-print.html (1624B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/mediaqueries-3/#media1"> 4 <link rel="match" href="media-queries-001-print-ref.html"> 5 <style> 6 @page { 7 size: 10in; 8 margin: 2in; 9 } 10 :root { 11 print-color-adjust: exact; 12 } 13 body { 14 margin: 0; 15 width: 4in; 16 height: 3in; 17 background: red; 18 } 19 20 /* There's some confusion regarding how width/height media queries for print are 21 supposed to be handled (and some additional confusion for WPT tests). First 22 of all, the spec suggests that we should use the size of the page box that 23 we get from the system/user, unaffected by any @page size declarations. But 24 all known implementations use the page *area*, not the page *box*, 25 i.e. with margins subtracted. [1] Secondly, the WPT documentation says that 26 the default page size should be 5 by 3 inches, and doesn't mention any 27 default margins. Yet, there are WPT tests that assume that there's a 28 half-inch margin on each side [2]. So take all these things into 29 consideration in the following media query, so that any default margins of 30 0.5 inches don't make a difference. Once the spec / WPT issues have been 31 resolved, we should make the test more strict. 32 33 [1] https://github.com/w3c/csswg-drafts/issues/5437 34 [2] https://github.com/web-platform-tests/wpt/issues/40788 */ 35 36 @media (min-width: 4in) and (max-width: 5in) and (min-height: 2in) and (max-height: 3in) { 37 body { background: green; } 38 } 39 </style> 40 This page should have a green background.