Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!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>