Skip to content

Commit eeb12c5

Browse files
mstenshochromium-wpt-export-bot
mstensho
authored and
chromium-wpt-export-bot
committed
Add META safe-printable-inset support to content_shell WPT runner.
All css-page/ tests are run by the content_shell WPT runner anyway, since the headless Chrome WPT runner implementation is incapable of running pagination tests reliably. Move existing printing/ tests for page margin safety to WPT. Marked as tentative for now, awaiting the following to be resolved: w3c/webdriver#1950 #58030 web-platform-tests/rfcs#233 Bug: 368070327 Change-Id: I1bd05c7c10dd12f49e7bc76132138190173eb71d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7415846 Reviewed-by: Mike West <mkwst@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1617651}
1 parent f2535c6 commit eeb12c5

6 files changed

Lines changed: 231 additions & 0 deletions

‎css/css-page/tentative/safe-printable-inset-001-print-ref.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<style>
3+
@page {
4+
margin: 0;
5+
}
6+
:root {
7+
print-color-adjust: exact;
8+
}
9+
body {
10+
background: yellow;
11+
margin: 0;
12+
}
13+
.fakeMargin {
14+
position: absolute;
15+
background: white;
16+
}
17+
</style>
18+
<div style="margin:86px 78px 48px 56px;">
19+
There should be a white margin around this page. It should be larger on the
20+
top and on the right.
21+
</div>
22+
<div class="fakeMargin" style="left:0; top:0; bottom:0; width:48px;"></div>
23+
<div class="fakeMargin" style="left:0; top:0; right:0; height:78px;"></div>
24+
<div class="fakeMargin" style="right:0; top:0; bottom:0; width:78px;"></div>
25+
<div class="fakeMargin" style="left:0; bottom:0; right:0; height:48px;"></div>

‎css/css-page/tentative/safe-printable-inset-001-print.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<title>page-margin-safety: add</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/13190/files">
5+
<link rel="match" href="safe-printable-inset-001-print-ref.html">
6+
<meta name="safe-printable-inset" content="1.27">
7+
<style>
8+
@page {
9+
margin: 0;
10+
margin-top: 30px;
11+
margin-right: 30px;
12+
page-margin-safety: add;
13+
}
14+
:root {
15+
print-color-adjust: exact;
16+
}
17+
body {
18+
background: yellow;
19+
}
20+
</style>
21+
There should be a white margin around this page. It should be larger on the top
22+
and on the right.

‎css/css-page/tentative/safe-printable-inset-002-print-ref.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<style>
3+
@page {
4+
margin: 0;
5+
}
6+
:root {
7+
print-color-adjust: exact;
8+
}
9+
body {
10+
background: yellow;
11+
margin: 0;
12+
}
13+
.fakeMargin {
14+
position: absolute;
15+
background: white;
16+
}
17+
</style>
18+
<div style="margin:78px 78px 48px 56px;">
19+
There should be a white margin around this page. It should be larger on the
20+
top and on the right.
21+
</div>
22+
<div class="fakeMargin" style="left:0; top:0; bottom:0; width:48px;"></div>
23+
<div class="fakeMargin" style="left:0; top:0; right:0; height:70px;"></div>
24+
<div class="fakeMargin" style="right:0; top:0; bottom:0; width:70px;"></div>
25+
<div class="fakeMargin" style="left:0; bottom:0; right:0; height:48px;"></div>

‎css/css-page/tentative/safe-printable-inset-002-print.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<title>page-margin-safety: clamp</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/13190/files">
5+
<link rel="match" href="safe-printable-inset-002-print-ref.html">
6+
<meta name="safe-printable-inset" content="1.27">
7+
<style>
8+
@page {
9+
margin: 0;
10+
margin-top: 70px;
11+
margin-right: 70px;
12+
page-margin-safety: clamp;
13+
}
14+
:root {
15+
print-color-adjust: exact;
16+
}
17+
body {
18+
background: yellow;
19+
}
20+
</style>
21+
There should be a white margin around this page. It should be larger on the top
22+
and on the right.

‎css/css-page/tentative/safe-printable-inset-003-print-ref.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<style>
3+
@page {
4+
size: 400px 250px;
5+
margin: 0;
6+
}
7+
html, body {
8+
print-color-adjust: exact;
9+
margin: 0;
10+
height: 100%;
11+
}
12+
</style>
13+
<div style="display:grid; grid-template-rows:54px 1fr 54px; height:100%;">
14+
<div style="display:grid; grid-template-columns:54px 1fr 1fr 1fr 54px;">
15+
<div></div>
16+
<div style="margin-top:24px; background:blue;"></div>
17+
<div style="margin-top:34px; background:blue;"></div>
18+
<div style="margin-top:24px; background:blue;"></div>
19+
<div style="margin-top:34px; width:20px; height:20px; background:hotpink;"></div>
20+
</div>
21+
<div style="display:grid; grid-template-columns:54px 1fr 54px;">
22+
<div style="display:grid; grid-template-rows:1fr 1fr 1fr;">
23+
<div style="width:10px; margin-left:24px; background:gray;"></div>
24+
<div style="width:30px; margin-left:24px; background:gray;"></div>
25+
<div style="width:40px; margin-left:14px; background:gray;"></div>
26+
</div>
27+
<div style="border:1px solid;"></div>
28+
</div>
29+
<div style="display:grid; grid-template-columns:54px 1fr 1fr 1fr 54px;">
30+
<div style="margin-left:24px; margin-top:20px; width:10px; height:10px; background:hotpink;"></div>
31+
<div style="background:yellow;"></div>
32+
<div style="height:24px; background:yellow;"></div>
33+
<div style="margin-top:10px; height:20px; background:yellow;"></div>
34+
<div style="width:30px; height:30px; background:hotpink;"></div>
35+
</div>
36+
</div>

‎css/css-page/tentative/safe-printable-inset-003-print.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<!DOCTYPE html>
2+
<title>Page margin safety on page margin boxes</title>
3+
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/pull/13190/files">
5+
<link rel="match" href="safe-printable-inset-003-print-ref.html">
6+
<meta name="safe-printable-inset" content="0.635">
7+
<style>
8+
@page {
9+
size: 400px 250px;
10+
margin: 30px;
11+
border: 1px solid;
12+
page-margin-safety: add;
13+
14+
@top-left {
15+
page-margin-safety: add;
16+
content: "";
17+
background: blue;
18+
}
19+
@top-center {
20+
page-margin-safety: add;
21+
margin-top: 10px;
22+
content: "";
23+
background: blue;
24+
}
25+
@top-right {
26+
page-margin-safety: clamp;
27+
margin-top: 10px;
28+
content: "";
29+
background: blue;
30+
}
31+
32+
@bottom-left {
33+
content: "";
34+
background: yellow;
35+
}
36+
@bottom-center {
37+
page-margin-safety: clamp;
38+
margin-bottom: 30px;
39+
content: "";
40+
background: yellow;
41+
}
42+
@bottom-right {
43+
page-margin-safety: clamp;
44+
margin: auto;
45+
height: 20px;
46+
content: "";
47+
background: yellow;
48+
}
49+
50+
@left-top {
51+
page-margin-safety: clamp;
52+
margin: auto;
53+
width: 10px;
54+
content: "";
55+
background: gray;
56+
}
57+
@left-middle {
58+
page-margin-safety: clamp;
59+
margin: auto;
60+
width: 30px;
61+
content: "";
62+
background: gray;
63+
}
64+
@left-bottom {
65+
page-margin-safety: clamp;
66+
margin: auto;
67+
width: 40px;
68+
content: "";
69+
background: gray;
70+
}
71+
72+
@top-right-corner {
73+
page-margin-safety: add;
74+
margin-top: 10px;
75+
margin-right: 10px;
76+
content: "";
77+
background: hotpink;
78+
}
79+
@bottom-right-corner {
80+
page-margin-safety: clamp;
81+
content: "";
82+
background: hotpink;
83+
}
84+
@bottom-left-corner {
85+
page-margin-safety: clamp;
86+
content: "";
87+
margin: auto;
88+
width: 10px;
89+
height: 10px;
90+
background: hotpink;
91+
}
92+
}
93+
94+
:root {
95+
print-color-adjust: exact;
96+
}
97+
98+
body {
99+
margin: 0;
100+
}
101+
</style>

0 commit comments

Comments
 (0)