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