Skip to content

Commit 6346917

Browse files
mstenshochromium-wpt-export-bot
mstensho
authored and
chromium-wpt-export-bot
committed
Resolve viewport units in @page against default page box size.
For document contents for pagination we use the page area size of the first page, which is defined as the initial containing block, when resolving viewport units. This won't do for viewport units inside @page (and page margin boxes), because then there would be circular dependencies, as the `size` property may very well use viewport units, and the page area size may be derived from `size`. Make sure that we use the default page box size (from print parameters (typically based on settings in the print preview UI)) when resolving viewport units inside @page. Bug: 380860850 Change-Id: I4c1f3d30c8aa5a678ed2a1ad414279916d28c969 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6049104 Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1388330}
1 parent 8ff8eb8 commit 6346917

8 files changed

Lines changed: 156 additions & 0 deletions

‎css/css-page/margin-boxes/dimensions-015-print-ref.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
3+
<style>
4+
@page {
5+
width: 7.5in;
6+
height: 8in;
7+
margin: 0;
8+
}
9+
body {
10+
margin: 0;
11+
}
12+
</style>
13+
<div style="display:flow-root;">
14+
<div style="margin-left:10px; width:1in; height:1.5in; background:cyan;"></div>
15+
</div>
16+
<div style="display:flow-root; margin-top:0.5in; height:6in; background:yellow;">
17+
<div style="margin:10px; width:1in; height:1.5in; background:cyan;"></div>
18+
19+
The page area size should be 7.5 by 6 inches. There should be two identical
20+
cyan boxes above.
21+
</div>

‎css/css-page/margin-boxes/dimensions-015-print.tentative.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<title>Viewport units in page and page margin contexts are resolved against the default page box size</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
4+
<link rel="help" href="https://issues.chromium.org/issues/380860850">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5437">
6+
<link rel="match" href="dimensions-015-print-ref.html">
7+
<style>
8+
/* The default page box size in WPT is 5 by 3 inches. */
9+
@page {
10+
width: 150vw; /* Page area width: 7.5in */
11+
height: 200vh; /* Page area height: 6in */
12+
margin: 0;
13+
margin-top: 2in;
14+
15+
@top-left {
16+
width: 20vw; /* 1in */
17+
height: 50vh; /* 1.5in */
18+
margin-bottom: 10vw; /* 0.5in; */
19+
margin-left: 10px;
20+
background: cyan;
21+
content: "";
22+
}
23+
}
24+
body {
25+
margin: 0;
26+
background: yellow;
27+
}
28+
</style>
29+
<div style="margin:10px; width:1in; height:1.5in; background:cyan;"></div>
30+
31+
The page area size should be 7.5 by 6 inches. There should be two identical
32+
cyan boxes above.

‎css/css-page/page-size-015-print-ref.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
3+
<style>
4+
@page {
5+
width: 7.5in;
6+
height: 6in;
7+
margin: 0;
8+
}
9+
</style>
10+
The page size should be 7.5 by 6 inches.

‎css/css-page/page-size-015-print.tentative.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>Viewport units in @page context are resolved against the default page box size</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
4+
<link rel="help" href="https://issues.chromium.org/issues/380860850">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5437">
6+
<link rel="match" href="page-size-015-print-ref.html">
7+
<style>
8+
/* The default page box size in WPT is 5 by 3 inches. */
9+
@page {
10+
width: 150vw;
11+
height: 200vh;
12+
margin: 0;
13+
14+
/* This has no effect, since both width and height are specified,
15+
using viewport units. */
16+
size: 1234px;
17+
}
18+
</style>
19+
The page size should be 7.5 by 6 inches.

‎css/css-page/page-size-016-print-ref.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
3+
<style>
4+
@page {
5+
size: 7.5in 7in;
6+
margin: 0;
7+
}
8+
body {
9+
margin: 0;
10+
}
11+
</style>
12+
<div style="height:1in;"></div>
13+
<div style="background:yellow; height:6in; background:yellow;">
14+
The page size should be 7.5 by 6 inches. The page top margin should be 1in.
15+
</div>

‎css/css-page/page-size-016-print.tentative.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<title>Viewport units in @page context are resolved against the default page box size</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
4+
<link rel="help" href="https://issues.chromium.org/issues/380860850">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5437">
6+
<link rel="match" href="page-size-016-print-ref.html">
7+
<style>
8+
/* The default page box size in WPT is 5 by 3 inches. */
9+
@page {
10+
width: 150vw; /* Page area width: 7.5in */
11+
height: 200vh; /* Page area height: 6in */
12+
margin: 0;
13+
margin-top: 20vw; /* Margin-top: 1in */
14+
15+
/* This has no effect, since both width and height are specified,
16+
using viewport units. */
17+
size: 1234px;
18+
}
19+
body {
20+
margin: 0;
21+
background: yellow;
22+
}
23+
</style>
24+
The page size should be 7.5 by 6 inches. The page top margin should be 1in.

‎css/css-page/page-size-017-print-ref.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
3+
<style>
4+
/* The default page box size in WPT is 5 by 3 inches. */
5+
@page {
6+
size: 6in 5in;
7+
margin: 0;
8+
}
9+
body {
10+
margin: 0;
11+
}
12+
</style>
13+
<div style="margin:0.5in; width:5in; height:4in; background:yellow;">
14+
The page box size should be 6 by 5 inches. Each page margin should be 0.5in,
15+
resulting in a page area size of 5 by 4 inches.
16+
</div>

‎css/css-page/page-size-017-print.tentative.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>Viewport units in @page context are resolved against the default page box size</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
4+
<link rel="help" href="https://issues.chromium.org/issues/380860850">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5437">
6+
<link rel="match" href="page-size-017-print-ref.html">
7+
<style>
8+
/* The default page box size in WPT is 5 by 3 inches. */
9+
@page {
10+
size: 200vh 100vw; /* 6 by 5 inches */
11+
margin: 10vw; /* 0.5in */
12+
}
13+
body {
14+
margin: 0;
15+
background: yellow;
16+
}
17+
</style>
18+
The page box size should be 6 by 5 inches. Each page margin should be 0.5in,
19+
resulting in a page area size of 5 by 4 inches.

0 commit comments

Comments
 (0)