diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-page')
89 files changed, 2081 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-page/crashtests/root-element-remove-print.html b/testing/web-platform/tests/css/css-page/crashtests/root-element-remove-print.html new file mode 100644 index 0000000000..8497e8c4fd --- /dev/null +++ b/testing/web-platform/tests/css/css-page/crashtests/root-element-remove-print.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1491107"> +Nothing here. +<script> + var root = document.documentElement; + root.parentNode.removeChild(root); +</script> diff --git a/testing/web-platform/tests/css/css-page/crashtests/tall-inline-block-in-float-in-table-cell-print.html b/testing/web-platform/tests/css/css-page/crashtests/tall-inline-block-in-float-in-table-cell-print.html new file mode 100644 index 0000000000..c70dce2160 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/crashtests/tall-inline-block-in-float-in-table-cell-print.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1468664"> +<div style="display:table-cell; padding-bottom:2px;"> + <div style="float:left; padding-top:10px;"> + <div style="display:inline-block; height:150vh;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-001-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-001-print-ref.html new file mode 100644 index 0000000000..3d66305db0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-001-print-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-001-print.html b/testing/web-platform/tests/css/css-page/fixedpos-001-print.html new file mode 100644 index 0000000000..04feb96e84 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-001-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-001-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:fixed; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; height:300vh;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-002-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-002-print-ref.html new file mode 100644 index 0000000000..3d66305db0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-002-print-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-002-print.html b/testing/web-platform/tests/css/css-page/fixedpos-002-print.html new file mode 100644 index 0000000000..c23c6be7d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-002-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-002-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; height:300vh;"> + There should be three pages. + <div style="position:fixed; bottom:0;"> + This should repeat on every page. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-003-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-003-print-ref.html new file mode 100644 index 0000000000..3d66305db0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-003-print-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-003-print.html b/testing/web-platform/tests/css/css-page/fixedpos-003-print.html new file mode 100644 index 0000000000..1b06257175 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-003-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-003-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:300vh;"> + There should be three pages. +</div> +<div style="position:fixed; bottom:0;"> + This should repeat on every page. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-004-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-004-print-ref.html new file mode 100644 index 0000000000..3e3473bcb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-004-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:0;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-004-print.html b/testing/web-platform/tests/css/css-page/fixedpos-004-print.html new file mode 100644 index 0000000000..c138e9cd6a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-004-print.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-004-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:fixed; bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute;"> + There should be three pages. + <div style="position:absolute; top:0; height:300vh;"> + <div style="position:fixed; bottom:0;"> + This should also repeat on every page. + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-005-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-005-print-ref.html new file mode 100644 index 0000000000..e692ff8db3 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-005-print-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:0;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh;"> + This should also repeat on every page. +</div> +<div style="height:100vh;"> + There should be five pages. +</div> +<div style="height:300vh;"> + This should be on the second page. +</div> +This should be on the fifth page. diff --git a/testing/web-platform/tests/css/css-page/fixedpos-005-print.html b/testing/web-platform/tests/css/css-page/fixedpos-005-print.html new file mode 100644 index 0000000000..0a2edc7178 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-005-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-005-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:300vh;"> + There should be five pages. +</div> +<div style="position:fixed; bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be on the second page. + <div style="position:fixed; bottom:0;"> + This should also repeat on every page. + </div> + <div style="position:absolute; top:300vh;"> + This should be on the fifth page. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-006-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-006-print-ref.html new file mode 100644 index 0000000000..b03e1d78d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-006-print-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:0; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:0;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh;"> + Even this should repeat on every page. +</div> +<div style="height:100vh;"> + There should be five pages. +</div> +<div style="height:100vh;"> + This should be on the second page. +</div> +This should be on the third page. diff --git a/testing/web-platform/tests/css/css-page/fixedpos-006-print.html b/testing/web-platform/tests/css/css-page/fixedpos-006-print.html new file mode 100644 index 0000000000..2386c166c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-006-print.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-006-print-ref.html"> +<style> + body { margin: 0; } +</style> +There should be five pages. +<div style="position:fixed; bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be on the second page. + <div style="position:fixed; bottom:2em;"> + This should also repeat on every page. + </div> + <div style="position:absolute; top:100vh; height:300vh;"> + This should be on the third page. + <div style="position:fixed; bottom:0;"> + Even this should repeat on every page. + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-007-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-007-print-ref.html new file mode 100644 index 0000000000..f576c93771 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-007-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be three pages. +</div> +<div style="position:absolute; top:0;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:200vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:0; margin-top:2em;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; top:100vh; margin-top:2em;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; top:200vh; margin-top:2em;"> + This should also be repeated on every page. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-007-print.html b/testing/web-platform/tests/css/css-page/fixedpos-007-print.html new file mode 100644 index 0000000000..8dcb700b96 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-007-print.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-007-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be three pages. +</div> +<div style="position:absolute; top:50vh;"> + <div style="height:250vh;"></div> + <div style="position:fixed; top:0;"> + This should be repeated on every page. + </div> +</div> +<div style="position:fixed; top:2em;"> + This should also be repeated on every page. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-008-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-008-print-ref.html new file mode 100644 index 0000000000..6ed2528115 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-008-print-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be six pages. +</div> +<div style="position:absolute; top:0;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:200vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:300vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:400vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:500vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; bottom:0;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-300vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-400vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-500vh;"> + This should also be repeated on every page. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-008-print.html b/testing/web-platform/tests/css/css-page/fixedpos-008-print.html new file mode 100644 index 0000000000..02b5d63cc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-008-print.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-008-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be six pages. +</div> +<div style="position:fixed; top:0;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:50vh;"> + <div style="height:250vh;"></div> + <div style="position:absolute; top:0;"> + <div style="position:absolute; top:500vh; height:10px;"> + <div style="position:fixed; bottom:0;"> + This should also be repeated on every page. + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print-ref.html new file mode 100644 index 0000000000..000c05350b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + margin: 0; + } +</style> +<a href="/">This should be on every page (3 pages).<br>This too.</a> +<div style="break-before:page;"></div> +<a href="/">This should be on every page (3 pages).<br>This too.</a> +<div style="break-before:page;"></div> +<a href="/">This should be on every page (3 pages).<br>This too.</a> + diff --git a/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print.html b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print.html new file mode 100644 index 0000000000..057ddc9146 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-abspos-with-link-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402156"> +<link rel="match" href="fixedpos-with-abspos-with-link-print-ref.html"> +<style> + body { + margin: 0; + height: 250vh; + } +</style> +<div style="position:fixed;"> + <div style="position:absolute; width:max-content;"> + <a href="/">This should be on every page (3 pages).<br>This too.</a> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print-ref.html new file mode 100644 index 0000000000..5c17140450 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below.</p> +<div style="position:absolute; background:blue;"> + <iframe src="data:text/html,PASS" style="width:8em; height:3em; background:yellow;"></iframe> +</div> +<p style="break-before:page;"> + Apart from this text, there should be nothing on this page. +</p> + diff --git a/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print.html b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print.html new file mode 100644 index 0000000000..5102d045c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-iframe-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414873"> +<link rel="match" href="fixedpos-with-iframe-print-ref.html"> +<p>The word "PASS" should be seen below.</p> +<div style="position:fixed; background:blue;"> + <iframe src="data:text/html,PASS" style="width:8em; height:3em; background:yellow;"></iframe> +</div> +<p style="break-before:page; position:relative; z-index:1; height:8em; background:white;"> + Apart from this text, there should be nothing on this page. +</p> + diff --git a/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print-ref.html new file mode 100644 index 0000000000..f12d31acd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> + body { margin: 0; } +</style> +<div> + <a href="/">Link <span>should be seen</span> on both pages.</a> +</div> +<div style="break-before:page;"> + <a href="/">Link <span>should be seen</span> on both pages.</a> +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print.html b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print.html new file mode 100644 index 0000000000..694e5376cb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-with-link-with-inline-child-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1373172"> +<link rel="match" href="fixedpos-with-link-with-inline-child-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:fixed;"> + <a href="/">Link <span>should be seen</span> on both pages.</a> +</div> +<div style="break-before:page; height:10px;"></div> +<div style="break-before:page; height:10px;"></div> diff --git a/testing/web-platform/tests/css/css-page/media-queries-001-print-ref.html b/testing/web-platform/tests/css/css-page/media-queries-001-print-ref.html new file mode 100644 index 0000000000..35af04dc3c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/media-queries-001-print-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 10in; + margin: 2in; + } + body { + margin: 0; + background: green; + } +</style> +This page should have a green background. diff --git a/testing/web-platform/tests/css/css-page/media-queries-001-print.html b/testing/web-platform/tests/css/css-page/media-queries-001-print.html new file mode 100644 index 0000000000..01b2a00e47 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/media-queries-001-print.html @@ -0,0 +1,37 @@ +<!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; + } + 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. diff --git a/testing/web-platform/tests/css/css-page/media-queries-002-print.html b/testing/web-platform/tests/css/css-page/media-queries-002-print.html new file mode 100644 index 0000000000..5f71f3d17a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/media-queries-002-print.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1491643"> +<link rel="match" href="reference/filled-green-100px-square-print-ref.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<iframe src="resources/mq-frame-100px.html" style="display:block; border:none; width:100px; height:100px; background:red;"></iframe> diff --git a/testing/web-platform/tests/css/css-page/media-queries-003-print-ref.html b/testing/web-platform/tests/css/css-page/media-queries-003-print-ref.html new file mode 100644 index 0000000000..99642ca567 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/media-queries-003-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin-right: 108px; } +</style> +<div style="position:absolute; right:0; bottom:0; width:100px; height:100px; background:green;"></div> +There should be a green square in the bottom right corner. diff --git a/testing/web-platform/tests/css/css-page/media-queries-003-print.html b/testing/web-platform/tests/css/css-page/media-queries-003-print.html new file mode 100644 index 0000000000..2c125296ad --- /dev/null +++ b/testing/web-platform/tests/css/css-page/media-queries-003-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1491643"> +<link rel="match" href="media-queries-003-print-ref.html"> +<frameset cols="*,100" rows="*,100" frameborder="0"> + <frame src="data:text/html,There should be a green square in the bottom right corner."></frame> + <frame src="data:text/html,"></frame> + <frame src="data:text/html,"></frame> + <frame src="resources/mq-frame-100px.html"></frame> +</frameset> diff --git a/testing/web-platform/tests/css/css-page/page-margin-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-001-print-ref.html new file mode 100644 index 0000000000..12ebd76dc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-001-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + margin: 0; + } + body { + margin: 0; + } + .fullpager { + break-before: page; + margin-top: 10px; + margin-left: 40px; + width: calc(100vw - 60px); + height: calc(100vh - 40px); + } +</style> +<div class="fullpager" style="background:yellow;"> + first page +</div> +<div class="fullpager" style="background:cyan;"> + second page +</div> +<div class="fullpager" style="background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-001-print.html b/testing/web-platform/tests/css/css-page/page-margin-001-print.html new file mode 100644 index 0000000000..c59b3c6427 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-001-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="match" href="page-margin-001-print-ref.html"> +<style> + @page { + margin: 10px 20px 30px 40px; + } + body { + margin: 0; + } + .fullpager { + width: 100vw; + height: 100vh; + } +</style> +<div class="fullpager" style="background:yellow;"> + first page +</div> +<div class="fullpager" style="background:cyan;"> + second page +</div> +<div class="fullpager" style="background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-002-print-ref.html new file mode 100644 index 0000000000..2b56504855 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-002-print-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + margin: 0; + } + html { + writing-mode: vertical-rl; + } + body { + margin: 0; + } + .fullpager { + break-before: page; + margin-right: 20px; + margin-top: 10px; + width: calc(100vw - 60px); + height: calc(100vh - 40px); + } +</style> +<div class="fullpager" style="background:yellow;"> + first page +</div> +<div class="fullpager" style="background:cyan;"> + second page +</div> +<div class="fullpager" style="background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-002-print.html b/testing/web-platform/tests/css/css-page/page-margin-002-print.html new file mode 100644 index 0000000000..944d7efcfd --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-002-print.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="match" href="page-margin-002-print-ref.html"> +<style> + @page { + margin: 10px 20px 30px 40px; + } + html { + writing-mode: vertical-rl; + } + body { + margin: 0; + } + .fullpager { + width: 100vw; + height: 100vh; + } +</style> +<div class="fullpager" style="background:yellow;"> + first page +</div> +<div class="fullpager" style="background:cyan;"> + second page +</div> +<div class="fullpager" style="background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-003-print-ref.html new file mode 100644 index 0000000000..52bf736090 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-003-print-ref.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + margin: 0; + } + html { + writing-mode: vertical-lr; + } + body { + margin: 0; + } + .fullpager { + break-before: page; + margin-left: 40px; + margin-top: 10px; + width: calc(100vw - 60px); + height: calc(100vh - 40px); + } +</style> +<div class="fullpager" style="background:yellow;"> + first page +</div> +<div class="fullpager" style="background:cyan;"> + second page +</div> +<div class="fullpager" style="background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-003-print.html b/testing/web-platform/tests/css/css-page/page-margin-003-print.html new file mode 100644 index 0000000000..e7410c02e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-003-print.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="match" href="page-margin-003-print-ref.html"> +<style> + @page { + margin: 10px 20px 30px 40px; + } + html { + writing-mode: vertical-lr; + } + body { + margin: 0; + } + .fullpager { + width: 100vw; + height: 100vh; + } +</style> +<div class="fullpager" style="background:yellow;"> + first page +</div> +<div class="fullpager" style="background:cyan;"> + second page +</div> +<div class="fullpager" style="background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-004-print-ref.html new file mode 100644 index 0000000000..24549d4954 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-004-print-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Test Reference</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 300px; + margin: 10px 20px 30px 40px; + } + body { + margin: 0; + } +</style> +<div style="border:10px solid; background:yellow;"> + <div style="height:250px;">Page 1</div> + <div style="background:cyan;"> + Page 2 + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-004-print.html b/testing/web-platform/tests/css/css-page/page-margin-004-print.html new file mode 100644 index 0000000000..cb9343dcf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-004-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Test that a fragmented OOF is sized and posisitioned correctly within the containing block, which is the page box size minus the margins</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1486499"> +<link rel="match" href="page-margin-004-print-ref.html"> +<style> + @page { + size: 300px; + margin: 10px 20px 30px 40px; + } + body { + margin: 0; + } +</style> +<div style="position:absolute; box-sizing:border-box; width:100%; border:10px solid; background:yellow;"> + Page 1 + <div style="break-before:page; background:cyan;"> + Page 2 + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-005-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-005-print-ref.html new file mode 100644 index 0000000000..bd1829be38 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-005-print-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 600px 300px; + margin: 30px; + } + body { + margin: 0; + background: cyan; + } +</style> +The page margins should be the same on every side (30px).<br> +There's a 30px square in the bottom right corner. +<div style="position:fixed; right:0; bottom:0; width:30px; height:30px; background:hotpink;"></div> +<div style="break-before:page;"> + Same on the second page. +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-005-print.html b/testing/web-platform/tests/css/css-page/page-margin-005-print.html new file mode 100644 index 0000000000..8ca80bc697 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-005-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Percentage-based @page margins should resolve against the correct dimension</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-properties"> +<link rel="match" href="page-margin-005-print-ref.html"> +<style> + @page { + size: 600px 300px; + margin: 10% 5%; + } + body { + margin: 0; + background: cyan; + } +</style> +The page margins should be the same on every side (30px).<br> +There's a 30px square in the bottom right corner. +<div style="position:fixed; right:0; bottom:0; width:30px; height:30px; background:hotpink;"></div> +<div style="break-before:page;"> + Same on the second page. +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-006-print-ref.html b/testing/web-platform/tests/css/css-page/page-margin-006-print-ref.html new file mode 100644 index 0000000000..fe7a2c66db --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-006-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 6in; + margin: 0.5in; + } + html { + background: yellow; + margin: 0.5in; + } + body { + margin: 0; + background: cyan; + } +</style> +There should be a half-inch page margin on every side. The cyan box should be +inset by yet another half-inch, except at the bottom. +<div style="break-before:page;"> + Second page. +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-006-print.html b/testing/web-platform/tests/css/css-page/page-margin-006-print.html new file mode 100644 index 0000000000..43621acf80 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-006-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>Percentage-based @page margins should resolve against the correct dimension</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-properties"> +<link rel="match" href="page-margin-006-print-ref.html"> +<style> + @page { + size: 6in; + margin: 13px; + margin: inherit; + } + html { + background: yellow; + margin: 0.5in; + } + body { + margin: 0; + background: cyan; + } +</style> +There should be a half-inch page margin on every side. The cyan box should be +inset by yet another half-inch, except at the bottom. +<div style="break-before:page;"> + Second page. +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-negative-print-ref.tentative.html b/testing/web-platform/tests/css/css-page/page-margin-negative-print-ref.tentative.html new file mode 100644 index 0000000000..9e816c12fb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-negative-print-ref.tentative.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 300px; + margin: 0; + } + body { + margin: 0; + background: green; + } +</style> +<div> + Green background, no red / yellow. +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-negative-print.tentative.html b/testing/web-platform/tests/css/css-page/page-margin-negative-print.tentative.html new file mode 100644 index 0000000000..205a13f7a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-negative-print.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-properties"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8508"> +<link rel="match" href="page-margin-negative-print-ref.tentative.html"> +<style> + @page { + size: 300px; + margin: -20px; + } + body { + margin: 0; + background: yellow; + } + .fullpager { + width: 300px; + height: 300px; + border: 20px solid red; + background: green; + } +</style> +<div class="fullpager"> + Green background, no red / yellow. +</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-000-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-000-print-ref.html new file mode 100644 index 0000000000..69c5c37b5a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-000-print-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<div style="float:left;">First page</div> +<div style="clear:both;">Also first page</div> +<div style="break-before:page;">Second page</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-000-print.html b/testing/web-platform/tests/css/css-page/page-name-000-print.html new file mode 100644 index 0000000000..f01d5cac48 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-000-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#using-named-pages"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414718"> +<link rel="match" href="page-name-000-print-ref.html"> +<div style="page:foo;"> + <div style="float:left;">First page</div> + <div style="clear:both;">Also first page</div> + <div style="page:bar;">Second page</div> +</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-002-print-ref.html new file mode 100644 index 0000000000..17ecc93e57 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-002-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +1st page +<div style="break-before:page;"> + 2nd page +</div> +<div style="break-before:page;"> + 3rd page<br> + Also 3rd page +</div> +<div style="break-before:page;"> + 4th page +</div> +<div style="break-before:page;"> + 5th page +</div> +<div style="break-before:page;"> + 6th page +</div> +<div style="break-before:page;"> + 7th page<br> + Also 7th page<br> +</div> +<div style="break-before:page;"> + 8th page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-002-print.html b/testing/web-platform/tests/css/css-page/page-name-002-print.html new file mode 100644 index 0000000000..060b93b0bf --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-002-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#using-named-pages"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1421421"> +<link rel="match" href="page-name-002-print-ref.html"> +<div style="page:a;">1st page</div> +<div style="page:a;"> + <div style="page:b;">2nd page</div> + 3rd page +</div> +<div style="page:a;">Also 3rd page</div> +4th page +<div style="page:a;">5th page</div> +<div style="page:a;"> + <div> + <div style="page:b;">6th page</div> + 7th page + </div> + Also 7th page +</div> +8th page diff --git a/testing/web-platform/tests/css/css-page/page-name-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-003-print-ref.html new file mode 100644 index 0000000000..52ea6bfffc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-003-print-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +1st page +<div style="break-before:page;"> + 2nd page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-003-print.html b/testing/web-platform/tests/css/css-page/page-name-003-print.html new file mode 100644 index 0000000000..9ef4db8c75 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-003-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#using-named-pages"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1428011"> +<link rel="match" href="page-name-003-print-ref.html"> +<div style="position:absolute;"> + <div style="page:a;">1st page</div> + <div style="page:b;">2nd page</div> +</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-and-break-001-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-001-print.html new file mode 100644 index 0000000000..04de5f7073 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-001-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <title>CSS page name change and break-after: page at the same point.</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <link rel="match" href="page-name-and-break-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-page-3/#page-breaks"/> + <meta name="assert" content="Ensure CSS page name change and break-after: page at the same point only causes one page break."/> + <style> +.a { + page: a; + break-after: page; +} +.b { + page: b; +} + </style> + <body> + <div class="a">AAA</div> + <div class="b">BBB</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-and-break-002-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-002-print.html new file mode 100644 index 0000000000..3dd755b027 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-002-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <title>CSS page name change and break-before: page at the same point.</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <link rel="match" href="page-name-and-break-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-page-3/#page-breaks"/> + <meta name="assert" content="Ensure CSS page name change and break-before: page at the same point only causes one page break."/> + <style> +.a { + page: a; +} +.b { + break-before: page; + page: b; +} + </style> + <body> + <div class="a">AAA</div> + <div class="b">BBB</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-and-break-003-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-003-print.html new file mode 100644 index 0000000000..b7e8a20e1d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-003-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <title>CSS page name change and break-after: page in a nested element.</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <link rel="match" href="page-name-and-break-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-page-3/#page-breaks"/> + <meta name="assert" content="Ensure CSS page name change and break-after: page at the same point only causes one page break."/> + <body> + <div style="page: a"> + <div style="break-after: page">AAA</div> + </div> + <div style="page: b">BBB</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-and-break-004-print.html b/testing/web-platform/tests/css/css-page/page-name-and-break-004-print.html new file mode 100644 index 0000000000..2e252ea4eb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-004-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <title>CSS page name change and break-before: page in a nested frame.</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <link rel="match" href="page-name-and-break-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-page-3/#page-breaks"/> + <meta name="assert" content="Ensure CSS page name change and break-before: page at the same point only causes one page break."/> + <body> + <div style="page: a">AAA</div> + <div style="page: b"> + <div style="break-before: page">BBB</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-and-break-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-and-break-print-ref.html new file mode 100644 index 0000000000..e3f73e41e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-and-break-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <title>Reference: CSS page name change and break-after: page at the same point.</title> + <link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/> + <body> + <div style="break-after: page">AAA</div> + <div>BBB</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-size-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-001-print-ref.html new file mode 100644 index 0000000000..b016d8949f --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-001-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + /* Assuming a default page margin of 0.5in (48px) on each side. */ + @page { size: 300px 400px; } + body { margin: 0; } +</style> +<div style="height:304px;">Page 1</div> +<div style="height:304px;">Page 2</div> +<div style="height:304px;">Page 3</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-001-print.html b/testing/web-platform/tests/css/css-page/page-size-001-print.html new file mode 100644 index 0000000000..19d72b0231 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-001-print.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-size-prop"> +<link rel="match" href="page-size-001-print-ref.html"> +<style> + @page { size: 300px 400px; } + body { margin: 0; } +</style> +<div style="break-before:page;">Page 1</div> +<div style="break-before:page;">Page 2</div> +<div style="break-before:page;">Page 3</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-002-print-ref.html new file mode 100644 index 0000000000..78a1646943 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-002-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 300px 50px; + margin: 0; + } + body { margin: 0; } +</style> +<div style="height:50px;">Page 1</div> +<div style="height:50px;">Page 2</div> +<div style="height:50px;">Page 3</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-002-print.html b/testing/web-platform/tests/css/css-page/page-size-002-print.html new file mode 100644 index 0000000000..243c382ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-002-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-size-prop"> +<link rel="match" href="page-size-002-print-ref.html"> +<style> + @page { + size: 300px 50px; + margin: 0; + } + body { margin: 0; } +</style> +<div style="break-before:page;">Page 1</div> +<div style="break-before:page;">Page 2</div> +<div style="break-before:page;">Page 3</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-003-print-ref.html new file mode 100644 index 0000000000..38ea150878 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-003-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 300px 100px; + margin: 25px; + } + body { margin: 0; } +</style> +<div style="height:50px;">Page 1</div> +<div style="height:50px;">Page 2</div> +<div style="height:50px;">Page 3</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-003-print.html b/testing/web-platform/tests/css/css-page/page-size-003-print.html new file mode 100644 index 0000000000..805ff0e568 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-003-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-size-prop"> +<link rel="match" href="page-size-003-print-ref.html"> +<style> + @page { + size: 300px 100px; + margin: 25px; + } + body { margin: 0; } +</style> +<div style="break-before:page;">Page 1</div> +<div style="break-before:page;">Page 2</div> +<div style="break-before:page;">Page 3</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-004-print-ref.html new file mode 100644 index 0000000000..0468a745b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-004-print-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 320px 200px; + margin: 0; + } + @page :first { + size: 100px; + } + body { + margin: 0; + } +</style> +<div style="width:50px; height:100px; background:yellow;"> + first page +</div> +<div style="break-before:page; width:160px; height:200px; background:cyan;"> + second page +</div> +<div style="break-before:page; width:160px; height:200px; background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-004-print.html b/testing/web-platform/tests/css/css-page/page-size-004-print.html new file mode 100644 index 0000000000..125d7636d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-004-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="match" href="page-size-004-print-ref.html"> +<style> + @page { + size: 320px 200px; + margin: 0; + } + @page :first { + size: 100px; + } + body { + margin: 0; + } +</style> +<div style="width:50%; height:100px; background:yellow;"> + first page +</div> +<div style="width:50%; height:200px; background:cyan;"> + second page +</div> +<div style="width:50%; height:200px; background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-005-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-005-print-ref.html new file mode 100644 index 0000000000..c2e07daa29 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-005-print-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 320px 200px; + margin: 0; + } + @page :first { + size: 500px; + } + body { + margin: 0; + } +</style> +<div style="width:250px; height:500px; background:yellow;"> + first page +</div> +<div style="break-before:page; width:160px; height:200px; background:cyan;"> + second page +</div> +<div style="break-before:page; width:160px; height:200px; background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-005-print.html b/testing/web-platform/tests/css/css-page/page-size-005-print.html new file mode 100644 index 0000000000..37876ae230 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-005-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="match" href="page-size-005-print-ref.html"> +<style> + @page { + size: 320px 200px; + margin: 0; + } + @page :first { + size: 500px; + } + body { + margin: 0; + } +</style> +<div style="width:50%; height:500px; background:yellow;"> + first page +</div> +<div style="width:50%; height:200px; background:cyan;"> + second page +</div> +<div style="width:50%; height:200px; background:pink;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-006-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-006-print-ref.html new file mode 100644 index 0000000000..7167da2ac2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-006-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 200px 320px; + margin: 0; + } + div { + height: 304px; + padding-left: 18px; + padding-top: 10px; + box-sizing: border-box; + } + body { + margin: 0; + } +</style> +<div style="padding-top:108px;"> + first page +</div> +<div> + second page +</div> +<div> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-006-print.html b/testing/web-platform/tests/css/css-page/page-size-006-print.html new file mode 100644 index 0000000000..1da29d334d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-006-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="match" href="page-size-006-print-ref.html"> +<style> + @page { + size: 200px 320px; + margin: 10px; + } + @page :first { + margin-top: 100px; + } + body { + margin: 8px; + } +</style> +<div style="height:202px;"> + first page +</div> +<div style="break-before:page; height:300px;"> + second page +</div> +<div style="break-before:page; height:300px;"> + third page +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-007-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-007-print-ref.html new file mode 100644 index 0000000000..9498e2c17b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-007-print-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 200px 160px; + margin: 0; + } + @page smaller { + size: 160px 100px; + } + @page larger { + size: 640px 400px; + } + body { + margin: 0; + } + .container { + display: flow-root; + } + .smaller { + page: smaller; + } + .larger { + page: larger; + } + .float { + float: left; + width: 50px; + height: 80px; + } + .smaller .float { + width: 40px; + height: 50px; + } + .larger .float { + width: 160px; + height: 200px; + } +</style> +<div class="container" style="width:200px; background:yellow;"> + <div style="break-after:page;">first</div> + <div class="float"></div> + second +</div> +<div class="container smaller" style="width:160px; background:cyan;"> + <div style="break-after:page;">third</div> + <div class="float"></div> + fourth +</div> +<div class="container larger" style="width:640px; background:pink;"> + <div style="break-after:page;">fifth</div> + <div class="float"></div> + sixth +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-007-print.html b/testing/web-platform/tests/css/css-page/page-size-007-print.html new file mode 100644 index 0000000000..50ab2f4d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-007-print.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"> +<link rel="match" href="page-size-007-print-ref.html"> +<style> + @page { + size: 200px 160px; + margin: 0; + } + @page smaller { + size: 160px 100px; + } + @page larger { + size: 640px 400px; + } + body { + margin: 0; + } + .container { + display: flow-root; + } + .smaller { + page: smaller; + } + .larger { + page: larger; + } + .float { + float: left; + width: 50px; + height: 80px; + } + .smaller .float { + width: 40px; + height: 50px; + } + .larger .float { + width: 160px; + height: 200px; + } +</style> +<!-- 9 floats should be take us from the start of the current page to the top of + the next page, with the last float placed there. --> +<div class="container" style="background:yellow;"> + <div style="height:0;">first</div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + second +</div> +<div class="container smaller" style="background:cyan;"> + <div style="height:0;">third</div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + fourth +</div> +<div class="container larger" style="background:pink;"> + <div style="height:0;">fifth</div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + sixth +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-008-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-008-print-ref.html new file mode 100644 index 0000000000..f50ad3531e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-008-print-ref.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 200px 160px; + margin: 0; + } + @page smaller { + size: 160px 100px; + } + @page larger { + size: 640px 400px; + } + body { + margin: 0; + } + .container { + display: flow-root; + } + .smaller { + page: smaller; + } + .larger { + page: larger; + } + .float { + float: left; + width: 50px; + height: 80px; + } + .smaller .float { + width: 40px; + height: 50px; + } + .larger .float { + width: 160px; + height: 200px; + } +</style> +<div class="container larger" style="width:640px; background:pink;"> + <div style="break-after:page;">first</div> + <div class="float"></div> + second +</div> +<div class="container" style="width:200px; background:yellow;"> + <div style="break-after:page;">third</div> + <div class="float"></div> + fourth +</div> +<div class="container smaller" style="width:160px; background:cyan;"> + <div style="break-after:page;">fifth</div> + <div class="float"></div> + sixth +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-008-print.html b/testing/web-platform/tests/css/css-page/page-size-008-print.html new file mode 100644 index 0000000000..683bdc3a50 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-008-print.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"> +<link rel="match" href="page-size-008-print-ref.html"> +<style> + @page { + size: 200px 160px; + margin: 0; + } + @page smaller { + size: 160px 100px; + } + @page larger { + size: 640px 400px; + } + body { + margin: 0; + } + .container { + display: flow-root; + } + .smaller { + page: smaller; + } + .larger { + page: larger; + } + .float { + float: left; + width: 50px; + height: 80px; + } + .smaller .float { + width: 40px; + height: 50px; + } + .larger .float { + width: 160px; + height: 200px; + } +</style> +<!-- 9 floats should be take us from the start of the current page to the top of + the next page, with the last float placed there. --> +<div class="container larger" style="background:pink;"> + <div style="height:0;">first</div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + second +</div> +<div class="container" style="background:yellow;"> + <div style="height:0;">third</div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + fourth +</div> +<div class="container smaller" style="background:cyan;"> + <div style="height:0;">fifth</div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + <div class="float"></div> + sixth +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-009-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-009-print-ref.html new file mode 100644 index 0000000000..86ffa278c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-009-print-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 300px 400px; + margin: 0; + } + @page :first { + size: 200px; + } + body { + margin: 0; + } +</style> +There should be a 200x200 square on the next page. +<div style="break-before:page; width:200px; height:200px; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-page/page-size-009-print.html b/testing/web-platform/tests/css/css-page/page-size-009-print.html new file mode 100644 index 0000000000..48ead4eab3 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-009-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"> +<link rel="match" href="page-size-009-print-ref.html"> +<style> + @page { + size: 300px 400px; + margin: 0; + } + @page smaller { + size: 200px; + } + body { + margin: 0; + } +</style> +<div style="page:smaller;"> + There should be a 200x200 square on the next page. +</div> +<div style="width:100vw; height:100vh; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-page/page-size-010-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-010-print-ref.html new file mode 100644 index 0000000000..27cbe4435c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-010-print-ref.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + margin: 96px; + } + @page letter { + size: 816px 1056px; + } + @page letter-landscape { + size: 1056px 816px; + } + @page legal { + size: 816px 1344px; + } + @page legal-landscape { + size: 1344px 816px; + } + @page ledger { + size: 1056px 1632px; + } + @page ledger-landscape { + size: 1632px 1056px; + } + body { margin: 0; } +</style> +<div style="page:letter;"> + Page size: letter + <p style="width:624px;">Tenderloin ham boudin tongue sausage venison short + ribs sirloin, kielbasa beef ribs. Strip steak shank bresaola salami spare + ribs kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly + ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank corned + beef short loin, speck turkey pancetta shankle frankfurter. Pancetta tail + fatback, ground round brisket biltong frankfurter turkey. Ham hock chicken + strip steak, salami short ribs beef ribs pork sirloin pastrami pork loin + turducken rump brisket andouille.</p> +</div> +<div style="page:letter-landscape;"> + Page size: letter landscape + <p style="width:864px;">Tenderloin ham boudin tongue sausage venison short + ribs sirloin, kielbasa beef ribs. Strip steak shank bresaola salami spare + ribs kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly + ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank corned + beef short loin, speck turkey pancetta shankle frankfurter. Pancetta tail + fatback, ground round brisket biltong frankfurter turkey. Ham hock chicken + strip steak, salami short ribs beef ribs pork sirloin pastrami pork loin + turducken rump brisket andouille.</p> +</div> +<div style="page:legal;"> + Page size: legal + <p style="width:624px;">Tenderloin ham boudin tongue sausage venison short + ribs sirloin, kielbasa beef ribs. Strip steak shank bresaola salami spare + ribs kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly + ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank corned + beef short loin, speck turkey pancetta shankle frankfurter. Pancetta tail + fatback, ground round brisket biltong frankfurter turkey. Ham hock chicken + strip steak, salami short ribs beef ribs pork sirloin pastrami pork loin + turducken rump brisket andouille.</p> +</div> +<div style="page:legal-landscape;"> + Page size: legal landscape + <p style="width:1152px;">Tenderloin ham boudin tongue sausage venison short + ribs sirloin, kielbasa beef ribs. Strip steak shank bresaola salami spare + ribs kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly + ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank corned + beef short loin, speck turkey pancetta shankle frankfurter. Pancetta tail + fatback, ground round brisket biltong frankfurter turkey. Ham hock chicken + strip steak, salami short ribs beef ribs pork sirloin pastrami pork loin + turducken rump brisket andouille.</p> +</div> +<div style="page:ledger;"> + Page size: ledger + <p style="width:864px;">Tenderloin ham boudin tongue sausage venison short + ribs sirloin, kielbasa beef ribs. Strip steak shank bresaola salami spare + ribs kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly + ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank corned + beef short loin, speck turkey pancetta shankle frankfurter. Pancetta tail + fatback, ground round brisket biltong frankfurter turkey. Ham hock chicken + strip steak, salami short ribs beef ribs pork sirloin pastrami pork loin + turducken rump brisket andouille.</p> +</div> +<div style="page:ledger-landscape;"> + Page size: ledger landscape + <p style="width:1440px;">Tenderloin ham boudin tongue sausage venison short + ribs sirloin, kielbasa beef ribs. Strip steak shank bresaola salami spare + ribs kielbasa fatback, cow t-bone flank leberkas sirloin. Jowl pork belly + ribeye, corned beef sirloin chicken salami tail. Rump swine ham shank corned + beef short loin, speck turkey pancetta shankle frankfurter. Pancetta tail + fatback, ground round brisket biltong frankfurter turkey. Ham hock chicken + strip steak, salami short ribs beef ribs pork sirloin pastrami pork loin + turducken rump brisket andouille.</p> +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-010-print.html b/testing/web-platform/tests/css/css-page/page-size-010-print.html new file mode 100644 index 0000000000..21205e06a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-010-print.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<title>Test predefined American (inches) page sizes.</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#typedef-page-size-page-size"> +<link rel="match" href="page-size-010-print-ref.html"> +<style> + @page { + margin: 1in; + } + @page letter { + size: letter; + } + @page letter-landscape { + size: letter landscape; + } + @page legal { + size: legal; + } + @page legal-landscape { + size: legal landscape; + } + @page ledger { + size: ledger; + } + @page ledger-landscape { + size: ledger landscape; + } + body { margin: 0; } +</style> +<div style="page:letter;"> + Page size: letter + <p>Tenderloin ham boudin tongue sausage venison short ribs sirloin, kielbasa + beef ribs. Strip steak shank bresaola salami spare ribs kielbasa fatback, + cow t-bone flank leberkas sirloin. Jowl pork belly ribeye, corned beef + sirloin chicken salami tail. Rump swine ham shank corned beef short loin, + speck turkey pancetta shankle frankfurter. Pancetta tail fatback, ground + round brisket biltong frankfurter turkey. Ham hock chicken strip steak, + salami short ribs beef ribs pork sirloin pastrami pork loin turducken rump + brisket andouille.</p> +</div> +<div style="page:letter-landscape;"> + Page size: letter landscape + <p>Tenderloin ham boudin tongue sausage venison short ribs sirloin, kielbasa + beef ribs. Strip steak shank bresaola salami spare ribs kielbasa fatback, + cow t-bone flank leberkas sirloin. Jowl pork belly ribeye, corned beef + sirloin chicken salami tail. Rump swine ham shank corned beef short loin, + speck turkey pancetta shankle frankfurter. Pancetta tail fatback, ground + round brisket biltong frankfurter turkey. Ham hock chicken strip steak, + salami short ribs beef ribs pork sirloin pastrami pork loin turducken rump + brisket andouille.</p> +</div> +<div style="page:legal;"> + Page size: legal + <p>Tenderloin ham boudin tongue sausage venison short ribs sirloin, kielbasa + beef ribs. Strip steak shank bresaola salami spare ribs kielbasa fatback, + cow t-bone flank leberkas sirloin. Jowl pork belly ribeye, corned beef + sirloin chicken salami tail. Rump swine ham shank corned beef short loin, + speck turkey pancetta shankle frankfurter. Pancetta tail fatback, ground + round brisket biltong frankfurter turkey. Ham hock chicken strip steak, + salami short ribs beef ribs pork sirloin pastrami pork loin turducken rump + brisket andouille.</p> +</div> +<div style="page:legal-landscape;"> + Page size: legal landscape + <p>Tenderloin ham boudin tongue sausage venison short ribs sirloin, kielbasa + beef ribs. Strip steak shank bresaola salami spare ribs kielbasa fatback, + cow t-bone flank leberkas sirloin. Jowl pork belly ribeye, corned beef + sirloin chicken salami tail. Rump swine ham shank corned beef short loin, + speck turkey pancetta shankle frankfurter. Pancetta tail fatback, ground + round brisket biltong frankfurter turkey. Ham hock chicken strip steak, + salami short ribs beef ribs pork sirloin pastrami pork loin turducken rump + brisket andouille.</p> +</div> +<div style="page:ledger;"> + Page size: ledger + <p>Tenderloin ham boudin tongue sausage venison short ribs sirloin, kielbasa + beef ribs. Strip steak shank bresaola salami spare ribs kielbasa fatback, + cow t-bone flank leberkas sirloin. Jowl pork belly ribeye, corned beef + sirloin chicken salami tail. Rump swine ham shank corned beef short loin, + speck turkey pancetta shankle frankfurter. Pancetta tail fatback, ground + round brisket biltong frankfurter turkey. Ham hock chicken strip steak, + salami short ribs beef ribs pork sirloin pastrami pork loin turducken rump + brisket andouille.</p> +</div> +<div style="page:ledger-landscape;"> + Page size: ledger landscape + <p>Tenderloin ham boudin tongue sausage venison short ribs sirloin, kielbasa + beef ribs. Strip steak shank bresaola salami spare ribs kielbasa fatback, + cow t-bone flank leberkas sirloin. Jowl pork belly ribeye, corned beef + sirloin chicken salami tail. Rump swine ham shank corned beef short loin, + speck turkey pancetta shankle frankfurter. Pancetta tail fatback, ground + round brisket biltong frankfurter turkey. Ham hock chicken strip steak, + salami short ribs beef ribs pork sirloin pastrami pork loin turducken rump + brisket andouille.</p> +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-011-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-011-print-ref.html new file mode 100644 index 0000000000..945f105ef4 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-011-print-ref.html @@ -0,0 +1,93 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + margin: 10mm; + } + @page a5 { + size: 148mm 210mm; + } + @page a5-landscape { + size: 210mm 148mm; + } + @page a4 { + size: 210mm 297mm; + } + @page a4-landscape { + size: 297mm 210mm; + } + @page a3 { + size: 297mm 420mm; + } + @page a3-landscape { + size: 420mm 297mm; + } + @page b5 { + size: 176mm 250mm; + } + @page b5-landscape { + size: 250mm 176mm; + } + @page b4 { + size: 250mm 353mm; + } + @page b4-landscape { + size: 353mm 250mm; + } + @page jis-b5 { + size: 182mm 257mm; + } + @page jis-b5-landscape { + size: 257mm 182mm; + } + @page jis-b4 { + size: 257mm 364mm; + } + @page jis-b4-landscape { + size: 364mm 257mm; + } + body { margin: 0; } + div { border: solid; } +</style> +<div style="page:a5;"> + Page size: a5 +</div> +<div style="page:a5-landscape;"> + Page size: a5 landscape +</div> +<div style="page:a4;"> + Page size: a4 +</div> +<div style="page:a4-landscape;"> + Page size: a4 landscape +</div> +<div style="page:a3;"> + Page size: a3 +</div> +<div style="page:a3-landscape;"> + Page size: a3 landscape +</div> +<div style="page:b5;"> + Page size: b5 +</div> +<div style="page:b5-landscape;"> + Page size: b5 landscape +</div> +<div style="page:b4;"> + Page size: b4 +</div> +<div style="page:b4-landscape;"> + Page size: b4 landscape +</div> +<div style="page:jis-b5;"> + Page size: jis-b5 +</div> +<div style="page:jis-b5-landscape;"> + Page size: jis-b5 landscape +</div> +<div style="page:jis-b4;"> + Page size: jis-b4 +</div> +<div style="page:jis-b4-landscape;"> + Page size: jis-b4 landscape +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-011-print.html b/testing/web-platform/tests/css/css-page/page-size-011-print.html new file mode 100644 index 0000000000..2747605806 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-011-print.html @@ -0,0 +1,97 @@ +<!DOCTYPE html> +<title>Test predefined millimeter-based page sizes.</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#at-page-rule"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#typedef-page-size-page-size"> +<link rel="match" href="page-size-011-print-ref.html"> +<style> + @page { + margin: 10mm; + } + @page a5 { + size: a5; + } + @page a5-landscape { + size: a5 landscape; + } + @page a4 { + size: a4; + } + @page a4-landscape { + size: a4 landscape; + } + @page a3 { + size: a3; + } + @page a3-landscape { + size: a3 landscape; + } + @page b5 { + size: b5; + } + @page b5-landscape { + size: b5 landscape; + } + @page b4 { + size: b4; + } + @page b4-landscape { + size: b4 landscape; + } + @page jis-b5 { + size: jis-b5; + } + @page jis-b5-landscape { + size: jis-b5 landscape; + } + @page jis-b4 { + size: jis-b4; + } + @page jis-b4-landscape { + size: jis-b4 landscape; + } + body { margin: 0; } + div { border: solid; } +</style> +<div style="page:a5;"> + Page size: a5 +</div> +<div style="page:a5-landscape;"> + Page size: a5 landscape +</div> +<div style="page:a4;"> + Page size: a4 +</div> +<div style="page:a4-landscape;"> + Page size: a4 landscape +</div> +<div style="page:a3;"> + Page size: a3 +</div> +<div style="page:a3-landscape;"> + Page size: a3 landscape +</div> +<div style="page:b5;"> + Page size: b5 +</div> +<div style="page:b5-landscape;"> + Page size: b5 landscape +</div> +<div style="page:b4;"> + Page size: b4 +</div> +<div style="page:b4-landscape;"> + Page size: b4 landscape +</div> +<div style="page:jis-b5;"> + Page size: jis-b5 +</div> +<div style="page:jis-b5-landscape;"> + Page size: jis-b5 landscape +</div> +<div style="page:jis-b4;"> + Page size: jis-b4 +</div> +<div style="page:jis-b4-landscape;"> + Page size: jis-b4 landscape +</div> diff --git a/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print-ref.html new file mode 100644 index 0000000000..24d3806eb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + border: solid transparent; + } +</style> +This text should be visible. diff --git a/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print.html b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print.html new file mode 100644 index 0000000000..0de5c5ae82 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-visibility-hidden-001-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Test that visibility:hidden affects the page context, but not the actual contents on the page.</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-properties"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-model"> +<link rel="match" href="page-visibility-hidden-001-print-ref.html"> +<style> + @page { + visibility: hidden; + border: solid red; + } +</style> +This text should be visible. diff --git a/testing/web-platform/tests/css/css-page/reference/blank-print-ref.html b/testing/web-platform/tests/css/css-page/reference/blank-print-ref.html new file mode 100644 index 0000000000..ad73420cdb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/reference/blank-print-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> diff --git a/testing/web-platform/tests/css/css-page/reference/filled-green-100px-square-print-ref.html b/testing/web-platform/tests/css/css-page/reference/filled-green-100px-square-print-ref.html new file mode 100644 index 0000000000..d4834d1358 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/reference/filled-green-100px-square-print-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; height:100px; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-page/remote-origin-iframe-print-ref.html b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print-ref.html new file mode 100644 index 0000000000..f632519cd6 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below.</p> +<div style="padding-top:50px;">PASS</div> diff --git a/testing/web-platform/tests/css/css-page/remote-origin-iframe-print.html b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print.html new file mode 100644 index 0000000000..73b3878386 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/remote-origin-iframe-print.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1486995"> +<link rel="match" href="remote-origin-iframe-print-ref.html"> +<style> + iframe { + display: block; + width: 100px; + height: 100px; + border: none; + } +</style> +<script src="/common/get-host-info.sub.js"></script> +<p>The word "PASS" should be seen below.</p> +<script> + const iframe = document.createElement("iframe"); + iframe.src = get_host_info().REMOTE_ORIGIN + "/css/css-page/resources/iframe-with-abspos.html"; + document.body.appendChild(iframe); +</script> diff --git a/testing/web-platform/tests/css/css-page/resources/iframe-with-abspos.html b/testing/web-platform/tests/css/css-page/resources/iframe-with-abspos.html new file mode 100644 index 0000000000..27de3aad5e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/resources/iframe-with-abspos.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; top:50px;">PASS</div> diff --git a/testing/web-platform/tests/css/css-page/resources/mq-frame-100px.html b/testing/web-platform/tests/css/css-page/resources/mq-frame-100px.html new file mode 100644 index 0000000000..ed823c09e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/resources/mq-frame-100px.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +body { + margin: 0; +} +div { + background: red; +} +@media (width: 100px) and (height: 100px) { + div { + background: green; + } +} +</style> +<div style="height:100px;"></div> diff --git a/testing/web-platform/tests/css/css-page/root-element-display-none-print.html b/testing/web-platform/tests/css/css-page/root-element-display-none-print.html new file mode 100644 index 0000000000..d6802f6225 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/root-element-display-none-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>display:none on root should produce a blank page</title> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-properties"> +<link rel="match" href="reference/blank-print-ref.html"> +<style> + @page { + border: solid red; + background: hotpink; + } + html { + display: none; + } +</style> +FAIL, this page should be blank. diff --git a/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print-ref.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print-ref.html new file mode 100644 index 0000000000..cf59f2be37 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } + @page { + size: 400px 123.9px; + margin: 0; + } +</style> +There should be no red. diff --git a/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print.html new file mode 100644 index 0000000000..9054cd4513 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-001-print.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-size-prop"> +<link rel="match" href="subpixel-page-size-001-print-ref.html"> +<meta name=reftest-pages content="2"> +<style> + body { margin: 0; } + @page { + size: 400px 123.9px; + margin: 0; + } +</style> +<div style="height:123.9px; background:red;"> + This page should not be printed. +</div> +There should be no red. diff --git a/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print-ref.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print-ref.html new file mode 100644 index 0000000000..4ed4bdb5ff --- /dev/null +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } + @page { + size: 400px 123.1px; + margin: 0; + } +</style> +There should be no red. diff --git a/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print.html b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print.html new file mode 100644 index 0000000000..463cb21f25 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/subpixel-page-size-002-print.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#page-size-prop"> +<link rel="match" href="subpixel-page-size-002-print-ref.html"> +<meta name=reftest-pages content="2"> +<style> + body { margin: 0; } + @page { + size: 400px 123.1px; + margin: 0; + } +</style> +<div style="height:123.1px; background:red;"> + This page should not be printed. +</div> +There should be no red. |