Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-page/page-box-008-print.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="match" href="page-box-008-print-ref.html">
<meta name="assert" content="Test percentage-based @page margin/padding, vertical writing mode">
<style>
html {
writing-mode: vertical-rl;
}
@page {
size: 400px 800px;
margin-inline-start: 2%;
margin-block-start: 8%;
margin-inline-end: 6%;
margin-block-end: 20%;
padding-inline-start: 2%;
padding-block-start: 8%;
padding-inline-end: 6%;
padding-block-end: 20%;
background: blue;
}
body {
margin: 0;
background: hotpink;
}
</style>
<div style="box-sizing:border-box; padding:4px; block-size:100vb; background:yellow;">
This document should be in vertical-rl writing-mode.<br>
The page padding (in hotpink) and margins (in blue) should be identical. They
should be smallest at the top, larger at the right, even larger at the bottom,
and largest at the left.
</div>