diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-page')
8 files changed, 181 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-page/fixedpos-009-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-009-print-ref.html new file mode 100644 index 0000000000..31a6a6724f --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-009-print-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + margin: 0; + } + .pencil { + background-color: black; + mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTMgMTcuMjVWMjFoMy43NUwxNy44MSA5Ljk0bC0zLjc1LTMuNzVMMyAxNy4yNXpNMjAuNzEgNy4wNGEuOTk2Ljk5NiAwIDAgMCAwLTEuNDFsLTIuMzQtMi4zNGEuOTk2Ljk5NiAwIDAgMC0xLjQxIDBsLTEuODMgMS44MyAzLjc1IDMuNzUgMS44My0xLjgzeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=); + mask-repeat: no-repeat; + width: 36px; + height: 36px; + } + .fakepage { + position: relative; + height: 100vh; + } +</style> +<div class="fakepage"> + <div style="position:absolute; bottom:0; right:0;"> + <div class="pencil"></div> + </div> + When printed, there should be two pages. There should be a black pencil in the + bottom right corner on both pages. +</div> + +<div class="fakepage"> + <div style="position:absolute; bottom:0; right:0;"> + <div class="pencil"></div> + </div> + Page 2. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-009-print.html b/testing/web-platform/tests/css/css-page/fixedpos-009-print.html new file mode 100644 index 0000000000..803a077c0a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-009-print.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="http://crbug.com/337791467"> +<link rel="match" href="fixedpos-009-print-ref.html"> +<style> + body { + margin: 0; + } + .pencil { + background-color: black; + mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZD0iTTMgMTcuMjVWMjFoMy43NUwxNy44MSA5Ljk0bC0zLjc1LTMuNzVMMyAxNy4yNXpNMjAuNzEgNy4wNGEuOTk2Ljk5NiAwIDAgMCAwLTEuNDFsLTIuMzQtMi4zNGEuOTk2Ljk5NiAwIDAgMC0xLjQxIDBsLTEuODMgMS44MyAzLjc1IDMuNzUgMS44My0xLjgzeiIvPjxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz48L3N2Zz4=); + mask-repeat: no-repeat; + width: 36px; + height: 36px; + } +</style> +<div style="position:fixed; bottom:0; right:0;"> + <div class="pencil"></div> +</div> +When printed, there should be two pages. There should be a black pencil in the +bottom right corner on both pages. +<div style="break-before:page;"> + Page 2. +</div> diff --git a/testing/web-platform/tests/css/css-page/fixedpos-010-print-ref.html b/testing/web-platform/tests/css/css-page/fixedpos-010-print-ref.html new file mode 100644 index 0000000000..90bd5e7fc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-010-print-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 400px; + margin: 0; + } + @page large { + size: 500px 400px; + } + body { + margin: 0; + } +</style> +This page should <em>not</em> have a blue box. +<div style="page:large;"> + <div style="float:right; margin-top:300px; width:100px; height:100px; background:blue;"></div> + <div style="width:400px;"> + This page should have a blue box in the bottom right corner. + </div> + <div style="break-before:page;"> + <div style="float:right; margin-top:300px; width:100px; height:100px; background:blue;"></div> + <div style="width:400px;"> + This page should have a blue box in the bottom right corner. + </div> + </div> +</div> +This page should <em>not</em> have a blue box. diff --git a/testing/web-platform/tests/css/css-page/fixedpos-010-print.html b/testing/web-platform/tests/css/css-page/fixedpos-010-print.html new file mode 100644 index 0000000000..cdd50828d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/fixedpos-010-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed"> +<link rel="match" href="fixedpos-010-print-ref.html"> +<style> + @page { + size: 400px; + margin: 0; + } + @page large { + size: 500px 400px; + } + body { + margin: 0; + } +</style> +<div style="position:fixed; right:-100px; bottom:0; width:100px; height:100px; background:blue;"></div> +This page should <em>not</em> have a blue box. +<div style="page:large; width:400px;"> + This page should have a blue box in the bottom right corner. + <div style="break-before:page;"> + This page should have a blue box in the bottom right corner. + </div> +</div> +This page should <em>not</em> have a blue box. diff --git a/testing/web-platform/tests/css/css-page/page-box-000-print-ref.html b/testing/web-platform/tests/css/css-page/page-box-000-print-ref.html new file mode 100644 index 0000000000..d39bd73850 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-box-000-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + html { + box-sizing: border-box; + display: grid; + place-items: center; + height: 100%; + border: 20px solid green; + } +</style> +This page should have a green border. diff --git a/testing/web-platform/tests/css/css-page/page-box-000-print.html b/testing/web-platform/tests/css/css-page/page-box-000-print.html new file mode 100644 index 0000000000..aee317ab97 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-box-000-print.html @@ -0,0 +1,15 @@ +<!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="match" href="page-box-000-print-ref.html"> +<style> + @page { + border: 20px solid green; + } + html { + display: grid; + place-items: center; + height: 100%; + } +</style> +This page should have a green border. diff --git a/testing/web-platform/tests/css/css-page/page-size-012-print-ref.html b/testing/web-platform/tests/css/css-page/page-size-012-print-ref.html new file mode 100644 index 0000000000..e85e5f0785 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-012-print-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 600px 400px; + margin: 0; + } + body { margin: 0; } +</style> +<div style="margin-left:auto; margin-right:50px; writing-mode:vertical-rl; height:400px; background:yellow;"> + 50px to the left of page box right edge.<br> + Page widths larger than heights.<br> +</div> +<div style="break-before:page;"></div> +<div style="margin-left:auto; margin-top:50px; writing-mode:vertical-rl; height:350px; background:yellow;"> + 50px below the page box top edge.<br> +</div> diff --git a/testing/web-platform/tests/css/css-page/page-size-012-print.html b/testing/web-platform/tests/css/css-page/page-size-012-print.html new file mode 100644 index 0000000000..737b37cbc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-012-print.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>Test vertical writing mode with specified page size and logical 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://www.w3.org/TR/css-page-3/#typedef-page-size-page-size"> +<link rel="match" href="page-size-012-print-ref.html"> +<style> + @page { + size: 600px 400px; + margin: 0; + margin-inline-start: 50px; + } + @page :first { + margin-inline-start: 0; + margin-block-start: 50px; + } + html { + writing-mode: vertical-rl; + } + body { margin: 0; } +</style> +<div style="background:yellow;"> + 50px to the left of page box right edge.<br> + Page widths larger than heights.<br> +</div> +<div style="break-before:page; background:yellow;"> + 50px below the page box top edge.<br> +</div> |