diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-page | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-page')
245 files changed, 3880 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-page/META.yml b/testing/web-platform/tests/css/css-page/META.yml new file mode 100644 index 0000000000..2f9e29e278 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.csswg.org/css-page/ +suggested_reviewers: + - plinss + - fantasai diff --git a/testing/web-platform/tests/css/css-page/crashtests/match-media-listener-relayout-inside-fixed-size-overflow-hidden-print.html b/testing/web-platform/tests/css/css-page/crashtests/match-media-listener-relayout-inside-fixed-size-overflow-hidden-print.html new file mode 100644 index 0000000000..77f9dc335f --- /dev/null +++ b/testing/web-platform/tests/css/css-page/crashtests/match-media-listener-relayout-inside-fixed-size-overflow-hidden-print.html @@ -0,0 +1,14 @@ +<!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=1507840"> +<div style="position:relative; overflow:hidden; width:100px; height:100px;"> + <div style="position:absolute; width:100px; height:100px; background:green;"> + <div id="trouble"></div> + </div> +</div> +<script> + var mediaQuery = window.matchMedia("print"); + mediaQuery.addListener(function() { + trouble.style.width = "100px"; + }); +</script> diff --git a/testing/web-platform/tests/css/css-page/crashtests/match-media-listener-shrink-content-print.html b/testing/web-platform/tests/css/css-page/crashtests/match-media-listener-shrink-content-print.html new file mode 100644 index 0000000000..dc8e691224 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/crashtests/match-media-listener-shrink-content-print.html @@ -0,0 +1,16 @@ +<!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=1503093"> +<style> + @page { + size: 500px; + margin: 0; + } +</style> +<div id="shrinkme" style="height:5000px;"></div> +<script> + var mediaQuery = window.matchMedia("print"); + mediaQuery.addListener(function() { + shrinkme.style.height = "2000px"; + }); +</script> diff --git a/testing/web-platform/tests/css/css-page/cssom/page-001.html b/testing/web-platform/tests/css/css-page/cssom/page-001.html new file mode 100644 index 0000000000..2f6b4dde05 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/cssom/page-001.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/cssom/#the-csspagerule-interface"> +<title>Basic CSSPageRule CSSOM test</title> +<style id="sheet"> + @page {} + @page :left {} + @page named { margin: 10px 20px; } +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + var sheet = document.getElementById("sheet").sheet; + test(()=> { + assert_not_equals(sheet, null); + assert_equals(sheet.rules.length, 3); + }, "There should be 3 @page rules."); + + test(()=> { + assert_equals(sheet.rules[0].constructor.name, "CSSPageRule"); + assert_equals(sheet.rules[0].selectorText, ""); + assert_equals(sheet.rules[0].style.length, 0); + }, "Rule #0"); + + test(()=> { + assert_equals(sheet.rules[1].constructor.name, "CSSPageRule"); + assert_equals(sheet.rules[1].selectorText, ":left"); + assert_equals(sheet.rules[1].style.length, 0); + }, "Rule #1"); + + test(()=> { + assert_equals(sheet.rules[2].constructor.name, "CSSPageRule"); + assert_equals(sheet.rules[2].selectorText, "named"); + var style = sheet.rules[2].style; + assert_equals(style.length, 4); + assert_equals(style.marginTop, "10px"); + assert_equals(style.marginRight, "20px"); + assert_equals(style.marginBottom, "10px"); + assert_equals(style.marginLeft, "20px"); + }, "Rule #2"); +</script> diff --git a/testing/web-platform/tests/css/css-page/cssom/page-002.html b/testing/web-platform/tests/css/css-page/cssom/page-002.html new file mode 100644 index 0000000000..0060d295b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/cssom/page-002.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/cssom/#the-csspagerule-interface"> +<title>Add / remove declarations inside CSSPageRule</title> +<style id="sheet"> + @page {} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + var sheet = document.getElementById("sheet").sheet; + var pageRule = sheet.rules[0]; + var style = pageRule.style; + test(()=> { + assert_equals(style.length, 0); + style.setProperty("widows", "7"); + assert_equals(style.length, 1); + assert_equals(style.widows, "7"); + style.setProperty("margin-left", "50%"); + assert_equals(style.length, 2); + assert_equals(style.marginLeft, "50%"); + style.setProperty("margin-left", "100px"); + assert_equals(style.length, 2); + assert_equals(style.marginLeft, "100px"); + style.setProperty("margin", "auto"); + assert_equals(style.length, 5); + assert_equals(style.marginLeft, "auto"); + }, "Add declarations"); + + test(()=> { + assert_equals(style.length, 5); + style.removeProperty("widows"); + assert_equals(style.length, 4); + style.removeProperty("margin"); + assert_equals(style.length, 0); + }, "Remove declarations"); +</script> diff --git a/testing/web-platform/tests/css/css-page/forced-page-breaks-002.xht b/testing/web-platform/tests/css/css-page/forced-page-breaks-002.xht new file mode 100644 index 0000000000..971dff0bd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/forced-page-breaks-002.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: forced page breaks for different page values</title> +<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> +<link rel="help" href="http://www.w3.org/TR/CSS21/page.html#page-break-props"/> +<meta name="assert" content="A page break MUST occur in the vertical margin between block boxes if the last line box above this margin and the first one below it do not have the same value for 'page'."/> +<meta name="flags" content="paged" /> +<style type="text/css"> + @page {size: portrait;} + @page breaker {size: portrait;} + * {margin: 0;} + div {page: breaker;} +</style> +</head> +<body> + <p>When printed, this test requires two pages.</p> + <div>This sentence must appear on a new page.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-page/inheritance.html b/testing/web-platform/tests/css/css-page/inheritance.html new file mode 100644 index 0000000000..565287bce5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/inheritance.html @@ -0,0 +1,12 @@ +<!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/"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +<div id="container"> + <div id="target"></div> +</div> +<script> + assert_not_inherited("page", "auto", "koko"); +</script> diff --git a/testing/web-platform/tests/css/css-page/layers-001-print-ref.html b/testing/web-platform/tests/css/css-page/layers-001-print-ref.html new file mode 100644 index 0000000000..b2dae651d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-001-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <style> +@page { + margin: 0; +} +.block { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="padding: 0; break-after: page"> + <div class="block" style="border-color: lightblue"></div> + </div> + <div style="padding: 0"> + <div class="block" style="border-color: pink"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/layers-001-print.html b/testing/web-platform/tests/css/css-page/layers-001-print.html new file mode 100644 index 0000000000..b097fbb8fc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-001-print.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="layers-001-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"/> + <style> +@layer layer1, layer2; +@page b{ + margin: 0; +} +@layer layer1 { + @page { + margin: 1cm; + } +} +@layer layer2 { + @page { + margin: 0; + } +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="border-color: lightblue"></div> + <div style="page: b; border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/layers-002-print-ref.html b/testing/web-platform/tests/css/css-page/layers-002-print-ref.html new file mode 100644 index 0000000000..b8b5fc1d15 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-002-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <style> +@page { + margin: 0; +} +.block { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="padding: 1cm; break-after: page"> + <div class="block" style="border-color: lightblue"></div> + </div> + <div style="padding: 0"> + <div class="block" style="border-color: pink"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/layers-002-print.html b/testing/web-platform/tests/css/css-page/layers-002-print.html new file mode 100644 index 0000000000..fb30ba9eb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-002-print.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="layers-002-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"/> + <style> +@layer layer2, layer1; +@page b{ + margin: 0; +} +@layer layer1 { + @page { + margin: 1cm; + } +} +@layer layer2 { + @page { + margin: 0; + } +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="border-color: lightblue"></div> + <div style="page: b; border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/layers-003-print-ref.html b/testing/web-platform/tests/css/css-page/layers-003-print-ref.html new file mode 100644 index 0000000000..70e43fb6f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-003-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <style> +@page { + margin: 0; +} +.block { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="padding: 2cm; break-after: page"> + <div class="block" style="border-color: lightblue"></div> + </div> + <div style="padding: 3cm"> + <div class="block" style="border-color: pink"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/layers-003-print.html b/testing/web-platform/tests/css/css-page/layers-003-print.html new file mode 100644 index 0000000000..ace3d5c8c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-003-print.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="layers-003-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"/> + <style> +@layer layer1, layer2; +@page b{ + margin: 3cm; +} +@layer layer1 { + @page b { + margin: 1cm; + } + @page :first { + margin: 0; + } +} +@layer layer2 { + @page b { + margin: 0; + } + @page a:first { + margin: 2cm; + } +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="page: a; border-color: lightblue"></div> + <div style="page: b; border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/layers-004-print-ref.html b/testing/web-platform/tests/css/css-page/layers-004-print-ref.html new file mode 100644 index 0000000000..a779b263c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-004-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <style> +@page { + margin: 0; +} +.block { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="padding: 0; break-after: page"> + <div class="block" style="border-color: lightblue"></div> + </div> + <div style="padding: 3cm"> + <div class="block" style="border-color: pink"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/layers-004-print.html b/testing/web-platform/tests/css/css-page/layers-004-print.html new file mode 100644 index 0000000000..5e84d2a322 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/layers-004-print.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="layers-004-print-ref.html"/> + <link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering"> + <style> +@layer layer2, layer1; +@page b{ + margin: 3cm; +} +@layer layer1 { + @page b { + margin: 1cm; + } + @page :first { + margin: 0cm; + } +} +@layer layer2 { + @page b { + margin: 0; + } + @page a:first { + margin: 2cm; + } +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="page: a; border-color: lightblue"></div> + <div style="page: b; border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-001-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-001-print-ref.html new file mode 100644 index 0000000000..9edc5d9ed0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-001-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="height:150vh;"></div> +This text should be at the middle of the second page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-001-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-001-print.html new file mode 100644 index 0000000000..f4121c3422 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-001-print.html @@ -0,0 +1,9 @@ +<!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=1402540"> +<link rel="match" href="monolithic-overflow-001-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:150vh; contain:size;"></div> +This text should be at the middle of the second page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-002-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-002-print-ref.html new file mode 100644 index 0000000000..5478362b06 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-002-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="height:250vh;"></div> +This text should be at the middle of the third page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-002-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-002-print.html new file mode 100644 index 0000000000..8f76af16a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-002-print.html @@ -0,0 +1,9 @@ +<!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=1402540"> +<link rel="match" href="monolithic-overflow-002-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:250vh; contain:size;"></div> +This text should be at the middle of the third page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-003-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-003-print.html new file mode 100644 index 0000000000..76905b180a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-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://bugs.chromium.org/p/chromium/issues/detail?id=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="background:yellow;"> + <div style="contain:size; width:50px; height:350vh; background:hotpink;"></div> + Yellow background, page 4. +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-004-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-004-print.html new file mode 100644 index 0000000000..ea5a659bd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-004-print.html @@ -0,0 +1,16 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:390vh;"> + <div style="background:yellow;"> + <div style="contain:size; width:50px; height:350vh; background:hotpink;"></div> + Yellow background, page 4. + </div> + White background, page 4. There should be a hotpink rectangle inside a yellow + block, starting at the first page, and ending right before the first piece of + text. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-005-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-005-print.html new file mode 100644 index 0000000000..bb0fc212fc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-005-print.html @@ -0,0 +1,14 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:flex; flex-flow:column; background:yellow;"> + <div style="contain:size; height:350vh; width:50px; background:hotpink;"></div> + Yellow background, page 4. +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-006-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-006-print.html new file mode 100644 index 0000000000..1cbcdbbe1e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-006-print.html @@ -0,0 +1,16 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:flex; flex-flow:column; background:yellow;"> + <div> + <div style="contain:size; height:350vh; width:50px; background:hotpink;"></div> + Yellow background, page 4. + </div> +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-007-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-007-print.html new file mode 100644 index 0000000000..14a6f051fe --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-007-print.html @@ -0,0 +1,14 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:grid; background:yellow;"> + <div style="contain:size; height:350vh; width:50px; background:hotpink;"></div> + Yellow background, page 4. +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-008-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-008-print.html new file mode 100644 index 0000000000..ff302dc30c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-008-print.html @@ -0,0 +1,16 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:grid; background:yellow;"> + <div> + <div style="contain:size; height:350vh; width:50px; background:hotpink;"></div> + Yellow background, page 4. + </div> +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-009-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-009-print.html new file mode 100644 index 0000000000..bdff66e791 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-009-print.html @@ -0,0 +1,14 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:table; width:100%; background:yellow;"> + <div style="contain:size; height:350vh; width:50px; background:hotpink;"></div> + Yellow background, page 4. +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-010-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-010-print.html new file mode 100644 index 0000000000..a75c932d30 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-010-print.html @@ -0,0 +1,16 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:table; width:100%; background:yellow;"> + <div style="display:table-row;"> + <div style="contain:size; height:350vh; width:50px; background:hotpink;"></div> + </div> + Yellow background, page 4. +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-011-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-011-print.html new file mode 100644 index 0000000000..973a3aff4d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-011-print.html @@ -0,0 +1,16 @@ +<!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=1402540"> +<link rel="match" href="reference/monolithic-overflow-4-pages-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:table; width:100%; background:yellow;"> + <div style="display:table-row-group;"> + <div style="contain:size; height:350vh; width:50px; background:hotpink;"></div> + </div> + Yellow background, page 4. +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-012-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-012-print-ref.html new file mode 100644 index 0000000000..e47ca880f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-012-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="background:yellow;"> + <div style="width:50px; height:350vh; background:hotpink;"></div> + This text should be at the middle of the fourth page. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-012-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-012-print.html new file mode 100644 index 0000000000..53ed74bc72 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-012-print.html @@ -0,0 +1,11 @@ +<!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=1402540"> +<link rel="match" href="monolithic-overflow-012-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="float:left; width:100%; background:yellow;"> + <div style="contain:size; width:50px; height:350vh; background:hotpink;"></div> + This text should be at the middle of the fourth page. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-013-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-013-print-ref.html new file mode 100644 index 0000000000..e47ca880f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-013-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="background:yellow;"> + <div style="width:50px; height:350vh; background:hotpink;"></div> + This text should be at the middle of the fourth page. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-013-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-013-print.html new file mode 100644 index 0000000000..b9a174879d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-013-print.html @@ -0,0 +1,11 @@ +<!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=1402540"> +<link rel="match" href="monolithic-overflow-013-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; width:100%; background:yellow;"> + <div style="contain:size; width:50px; height:350vh; background:hotpink;"></div> + This text should be at the middle of the fourth page. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-014-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-014-print-ref.html new file mode 100644 index 0000000000..a74e0d19a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-014-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="display:flow-root; background:yellow;"> + <div style="float:left; width:50px; height:350vh; background:hotpink;"></div> + On the first page +</div> +This text should be at the middle of the fourth page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-014-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-014-print.html new file mode 100644 index 0000000000..d12ddf4c68 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-014-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=1402540"> +<link rel="match" href="monolithic-overflow-014-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="background:yellow;"> + <div style="display:inline-block; vertical-align:top; width:50px; height:350vh; background:hotpink;"></div> + On the first page +</div> +This text should be at the middle of the fourth page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-015-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-015-print-ref.html new file mode 100644 index 0000000000..db44a3ee21 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-015-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="width:50px; height:350vh; background:hotpink;"></div> +This text should be at the middle of the fourth page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-015-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-015-print.html new file mode 100644 index 0000000000..d52605605c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-015-print.html @@ -0,0 +1,9 @@ +<!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=1402540"> +<link rel="match" href="monolithic-overflow-015-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:inline-block; vertical-align:top; width:50px; height:350vh; background:hotpink;"></div><br> +This text should be at the middle of the fourth page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-016-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-016-print-ref.html new file mode 100644 index 0000000000..a675fb966c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-016-print-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + margin: 0; + line-height: 20px; + } +</style> +<div style="position:absolute; top:100vh;">header</div> +<div style="position:absolute; top:200vh;">header</div> +<div style="position:absolute; top:300vh;">header</div> +<div style="position:absolute; bottom:0;">footer</div> +<div style="position:absolute; bottom:-100vh;">footer</div> +<div style="position:absolute; bottom:-200vh;">footer</div> +<div style="width:80%; padding-bottom:5px; background:hotpink;"> + header + <div style="height:320vh; padding:3px; background:cyan;"></div> + On the fourth page, right after a cyan box.<br> + footer +</div> +Right after the hotpink box. Still fourth page.<br> +Each page should have a header and footer. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-016-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-016-print.html new file mode 100644 index 0000000000..029523e924 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-016-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=1402540"> +<link rel="match" href="monolithic-overflow-016-print-ref.html"> +<style> + body { + margin: 0; + line-height: 20px; + } +</style> +<div style="display:table; width:80%; padding-bottom:5px; background:hotpink;"> + <div style="display:table-header-group; break-inside:avoid;">header</div> + <div style="display:table-footer-group; break-inside:avoid;">footer</div> + <div style="contain:size; height:320vh; padding:3px; background:cyan;"></div> + On the fourth page, right after a cyan box. +</div> +Right after the hotpink box. Still fourth page.<br> +Each page should have a header and footer. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-017-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-017-print-ref.html new file mode 100644 index 0000000000..45f839787e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-017-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="line-height:20px;"> + <div style="position:absolute; width:100%; bottom:0; background:hotpink;">footer</div> + <div style="position:absolute; width:100%; bottom:-100vh; background:hotpink;">footer</div> + <div style="position:absolute; width:100%; bottom:-200vh; background:hotpink;">footer</div> + <div style="height:calc(300vh - 25px); background:black;"></div> + <div style="break-before:page;">PASS</div> + <div style="background:hotpink;"> + footer + </div> +</div> +There should be a footer on every page, and the word PASS should be seen here, +on the fourth page, just above the final footer.<br> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-017-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-017-print.html new file mode 100644 index 0000000000..c8ce9060ff --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-017-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=1402540"> +<link rel="match" href="monolithic-overflow-017-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="display:table; width:100%; line-height:20px;"> + <div style="display:table-footer-group; break-inside:avoid; background:hotpink;">footer</div> + <!-- Monolithic content that ends 5px above the table footer on the third page. --> + <div style="contain:size; height:calc(300vh - 25px); background:black;"></div> + PASS +</div> +There should be a footer on every page, and the word PASS should be seen here, +on the fourth page, just above the final footer. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-018-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-018-print-ref.html new file mode 100644 index 0000000000..cf31737d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-018-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="width:20px; height:280vh; background:blue;"></div> +<div style="break-before:page; width:50vh; height:50vh; background:green;"></div> +There should be four pages. There should be something blue on the first three, +and a green square on the fourth. No red anywhere. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-018-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-018-print.html new file mode 100644 index 0000000000..93da11dc62 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-018-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=1402540"> +<link rel="match" href="monolithic-overflow-018-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="contain:size; width:20px; height:280vh; background:blue;"></div> +<div style="width:50vh; background:red;"> + <div style="contain:size; height:50vh; background:green;"></div> +</div> +There should be four pages. There should be something blue on the first three, +and a green square on the fourth. No red anywhere. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-019-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-019-print-ref.html new file mode 100644 index 0000000000..f37740ae7e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-019-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="height:50vh; border:solid; background:yellow;"> + <div style="width:50%; height:350vh; background:cyan;"></div> + This text should be at the middle of the fourth page. +</div> +This text should be at the middle of the first page, overlapping with stuff. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-019-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-019-print.html new file mode 100644 index 0000000000..3740b5d5b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-019-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=1402540"> +<link rel="match" href="monolithic-overflow-019-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:50vh; border:solid; background:yellow;"> + <div style="contain:size; width:50%; height:350vh; background:cyan;"></div> + This text should be at the middle of the fourth page. +</div> +This text should be at the middle of the first page, overlapping with stuff. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-020-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-020-print-ref.html new file mode 100644 index 0000000000..528c4980de --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-020-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="float:right; width:20%; border:3px solid;"> + <div style="width:50%; height:calc(100vh - 3px); background:brown;"></div> + <div style="width:50%; height:100vh; background:blue;"></div> + <div style="width:50%; height:50vh; background:cyan;"></div> +</div> +<div style="background:yellow;"> + <div style="width:20%; height:225vh; background:hotpink;"></div> + <div style="height:75vh;"></div> +</div> +This text should start on the fourth page. The first three pages should have a +yellow background. On the left hand side there should be a hotpink rectangle, +starting at the beginning on the first page, and ending 25% from the top of the +third page. On the right hand side there should a figure with a black border. It +should end around the middle of the third page. Inside there should be a brown +rectangle on the first page, a blue rectangle on the second page, and a cyan +rectangle on the third page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-020-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-020-print.html new file mode 100644 index 0000000000..403d932d64 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-020-print.html @@ -0,0 +1,25 @@ +<!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=1402540"> +<link rel="match" href="monolithic-overflow-020-print-ref.html"> +<style> + body { margin: 0; } +</style> +<!-- Check that monolithic overflow doesn't disrupt layout of a sibling + float. --> +<div style="float:right; width:20%; border:3px solid;"> + <div style="width:50%; height:calc(100vh - 3px); background:brown;"></div> + <div style="width:50%; height:100vh; background:blue;"></div> + <div style="width:50%; height:50vh; background:cyan;"></div> +</div> +<div style="background:yellow;"> + <div style="contain:size; width:20%; height:225vh; background:hotpink;"></div> + <div style="height:75vh;"></div> +</div> +This text should start on the fourth page. The first three pages should have a +yellow background. On the left hand side there should be a hotpink rectangle, +starting at the beginning on the first page, and ending 25% from the top of the +third page. On the right hand side there should a figure with a black border. It +should end around the middle of the third page. Inside there should be a brown +rectangle on the first page, a blue rectangle on the second page, and a cyan +rectangle on the third page. diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-021-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-021-print-ref.html new file mode 100644 index 0000000000..112b1ebdcc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-021-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + margin: 0; + } +</style> +<div style="height:200vh; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-021-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-021-print.html new file mode 100644 index 0000000000..584c4943dc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-021-print.html @@ -0,0 +1,14 @@ +<!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=1451760"> +<link rel="match" href="monolithic-overflow-021-print-ref.html"> +<style> + body { + margin: 0; + } +</style> +<div style="break-before:page; background:red;"> + <div style="border-bottom:50vh solid green; background:red;"> + <div style="contain:size; height:150vh; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-022-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-022-print-ref.html new file mode 100644 index 0000000000..64572dd639 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-022-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + margin: 0; + } +</style> +<div style="height:350vh; background:cyan;"> + There should be four pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-022-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-022-print.html new file mode 100644 index 0000000000..d37c74ad8a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-022-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="monolithic-overflow-022-print-ref.html"> +<style> + body { + margin: 0; + } +</style> +<div style="contain:size; height:350vh; background:cyan;"> + There should be four pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-023-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-023-print-ref.html new file mode 100644 index 0000000000..bdc4eb1ab0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-023-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 600px; + margin: 0; + } + body { + margin: 0; + } +</style> +<div style="width:100px; height:100px; background:green;"></div> +<div> + There should be two pages. A green square should be on each page. Nothing + should overlap with the square. +</div> +<div style="break-before:page; width:100px; height:100px; background:green;"></div> +<div style="height:100px; border:solid;"> + This text should go on the second page, right below the green square. It + should NOT be placed on top of the square. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-023-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-023-print.html new file mode 100644 index 0000000000..c047d48657 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-023-print.html @@ -0,0 +1,30 @@ +<!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=1458850"> +<link rel="match" href="monolithic-overflow-023-print-ref.html"> +<style> + @page { + size: 600px; + margin: 0; + } + body { + margin: 0; + } +</style> +<div style="display:table;"> + <div style="display:table-header-group; break-inside:avoid;"> + <div style="width:100px; height:100px; background:green;"></div> + </div> + <div style="display:table-row;"> + <div style="height:530px; contain:size;"> + There should be two pages. A green square should be on each page. Nothing + should overlap with the square. + </div> + </div> + <div style="display:table-row;"> + <div style="height:100px; border:solid;"> + This text should go on the second page, right below the green square. It + should NOT be placed on top of the square. + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-024-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-024-print-ref.html new file mode 100644 index 0000000000..fc964fde32 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-024-print-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 100px; + margin: 0; + } + body { + margin: 0; + } + div { + width: 60px; + } +</style> +<div style="height:70px;"></div> +<div style="height:60px; background:black;"></div> +<div style="height:140px;"></div> +<div style="height:60px; background:black;"></div> +<div style="height:140px;"></div> +<div style="height:60px; background:black;"></div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-024-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-024-print.html new file mode 100644 index 0000000000..6153bc98ae --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-024-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-break-3/#possible-breaks"> +<link rel="match" href="monolithic-overflow-024-print-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> + @page { + size: 100px; + margin: 0; + } + body { + margin: 0; + font: 60px/200px Ahem; + } +</style> +x x x diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-025-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-025-print-ref.html new file mode 100644 index 0000000000..edbb9ac011 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-025-print-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 100px; + margin: 0; + } + body { + margin: 0; + } + div { + width: 60px; + margin-left: 40px; + } +</style> +<div style="height:70px;"></div> +<div style="height:60px; background:black;"></div> +<div style="height:140px;"></div> +<div style="height:60px; background:black;"></div> +<div style="height:140px;"></div> +<div style="height:60px; background:black;"></div> +<div style="height:140px;"></div> +<div style="height:60px; background:black;"></div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-025-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-025-print.html new file mode 100644 index 0000000000..3fefbc37e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-025-print.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href=""> +<link rel="match" href="monolithic-overflow-025-print-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + @page { + size: 100px; + margin: 0; + } + body { + margin: 0; + font: 60px/200px Ahem; + } +</style> +<span style="position:relative; left:40px;"> + x x x x +</span> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-026-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-026-print-ref.html new file mode 100644 index 0000000000..b543a58248 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-026-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin:0; } +</style> +<div style="height:410vh;"> + There should be five pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-026-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-026-print.html new file mode 100644 index 0000000000..966391e43b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-026-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-break-3/#possible-breaks"> +<link rel="match" href="monolithic-overflow-026-print-ref.html"> +<style> + body { margin:0; } +</style> +<div style="contain:size; height:210vh;"> + <div style="height:410vh;"> + There should be five pages. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-027-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-027-print-ref.html new file mode 100644 index 0000000000..560f137bf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-027-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + color: white; + margin: 0; + } +</style> +<div style="height:400vh; background:green;"> + There should be four green pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-027-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-027-print.html new file mode 100644 index 0000000000..c7cfd37e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-027-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://issues.chromium.org/41496759"> +<link rel="match" href="monolithic-overflow-027-print-ref.html"> +<style> + body { + color: white; + margin: 0; + } +</style> +<div style="position:absolute; width:100%; contain:size; height:4in; background:red;"> + <div style="height:8in; background:green;"> + There should be four green pages. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-028-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-028-print-ref.html new file mode 100644 index 0000000000..560f137bf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-028-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + color: white; + margin: 0; + } +</style> +<div style="height:400vh; background:green;"> + There should be four green pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-028-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-028-print.html new file mode 100644 index 0000000000..c549db6410 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-028-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://issues.chromium.org/41496759"> +<link rel="match" href="monolithic-overflow-028-print-ref.html"> +<style> + body { + color: white; + margin: 0; + } +</style> +<div style="position:absolute; overflow-y:clip; width:100%; contain:size; height:8in; background:red;"> + <div style="height:23in; background:green;"> + There should be four green pages. + </div> +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-029-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-029-print-ref.html new file mode 100644 index 0000000000..560f137bf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-029-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + color: white; + margin: 0; + } +</style> +<div style="height:400vh; background:green;"> + There should be four green pages. +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-029-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-029-print.html new file mode 100644 index 0000000000..c869d87d68 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-029-print.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://issues.chromium.org/41496759"> +<link rel="match" href="monolithic-overflow-029-print-ref.html"> +<style> + body { + color: white; + margin: 0; + } +</style> +<div style="position:absolute; width:100%; contain:size; height:4in; background:green;"> + There should be four green pages. +</div> +<div style="position:absolute; width:100%; top:2in; contain:size; height:2in; background:red;"> + <div style="height:6in; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-030-print-ref.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-030-print-ref.html new file mode 100644 index 0000000000..d8468e3b14 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-030-print-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + margin: 0; + } +</style> +<div style="break-after:page;"> + <div style="display:flow-root; height:1.5in;"> + <p> + There should be four pages, and each one should have a green square in the + bottom right corner. + </p> + </div> + <div style="margin-left:auto; width:0.5in; height:0.5in; background:green;"></div> +</div> +<div style="break-after:page;"> + <div style="height:1.5in;"></div> + <div style="margin-left:auto; width:0.5in; height:0.5in; background:green;"></div> +</div> +<div style="break-after:page;"> + <div style="height:1.5in;"></div> + <div style="margin-left:auto; width:0.5in; height:0.5in; background:green;"></div> +</div> +<div style="break-after:page;"> + <div style="height:1.5in;"></div> + <div style="margin-left:auto; width:0.5in; height:0.5in; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-page/monolithic-overflow-030-print.html b/testing/web-platform/tests/css/css-page/monolithic-overflow-030-print.html new file mode 100644 index 0000000000..e36f25434d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/monolithic-overflow-030-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://issues.chromium.org/41496759"> +<link rel="match" href="monolithic-overflow-030-print-ref.html"> +<style> + body { + margin: 0; + } +</style> +<p> + There should be four pages, and each one should have a green square in the + bottom right corner. +</p> +<div style="position:absolute; top:0; width:100%; contain:size; height:8in;"></div> +<div style="position:fixed; right:0; bottom:0; width:0.5in; height:0.5in; background:green;"></div> diff --git a/testing/web-platform/tests/css/css-page/page-background-000.xht b/testing/web-platform/tests/css/css-page/page-background-000.xht new file mode 100644 index 0000000000..4a4ffdee59 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-background-000.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: Page Box Background Coverage</title> +<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> +<link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> +<meta name="flags" content="paged" /> +<meta name="assert" content="The page background covers the entire page box, including the page margins."/> +<style type="text/css"> + @page { + background-color:#ccffcc; + margin:25%; + border: 2pt solid; + } +</style> +</head> +<body> + <div>This page must be covered by a pale green background. The background either completely covers the page, or leaves only a small strip of white where the printer can't reach.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-borders-000.xht b/testing/web-platform/tests/css/css-page/page-borders-000.xht new file mode 100644 index 0000000000..5bc3b3f596 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-borders-000.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page border shorthand (absolute units)</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A border declaration within the @page context applies to the page box."/> + <style type="text/css"><![CDATA[ + @page { + border: 1in solid green; + } + ]]></style> + </head> + <body> + <div>This paragraph must appear inside a box with a 1in thick green border.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-counters-000.xht b/testing/web-platform/tests/css/css-page/page-counters-000.xht new file mode 100644 index 0000000000..a03b712fa8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-counters-000.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: margin box referencing document counters</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#populating-margin-boxes"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The value of the counter at the beginning of page processing must be used by default. "/> + <style type="text/css"><![CDATA[ + body {counter-reset: chapter;} + div.chapter {counter-increment: chapter;} + @page { + @top-center { content: "Chapter " counter(chapter); } + } + div.section {page-break-before: always;} + ]]></style> + </head> + <body> + <div class="chapter">This paragaraph should appear on the first page, which should say "Chapter 0" at the top. A second page with "Chapter 4" at the top should also print.</div> + <div class="chapter"></div> + <div class="chapter"></div> + + <div class="section chapter">This paragaraph should appear on the second page, which should say "Chapter 4" at the top.</div> + <div class="chapter"></div> + <div class="chapter"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-left-right-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-left-right-001-print-ref.html new file mode 100644 index 0000000000..1eb011bed8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-left-right-001-print-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 600px 300px; + margin: 0; + } + body { + margin: 0; + } + div { + break-after: page; + width: 100px; + height: 100px; + overflow: clip; /* Depending on font, glyphs may overflow. */ + background: yellow; + } + div:nth-child(odd) { + margin-top: 200px; + } + div:nth-child(even) { + margin-left: 500px; + } +</style> +<div> + bottom left corner +</div> +<div> + top right corner +</div> +<div> + bottom left corner +</div> +<div> + top right corner +</div> diff --git a/testing/web-platform/tests/css/css-page/page-left-right-001-print.html b/testing/web-platform/tests/css/css-page/page-left-right-001-print.html new file mode 100644 index 0000000000..044696fcca --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-left-right-001-print.html @@ -0,0 +1,38 @@ +<!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/#spread-pseudos"> +<link rel="match" href="page-left-right-001-print-ref.html"> +<style> + @page { + size: 600px 300px; + margin: 0; + } + @page :left { + margin-left: 500px; + margin-bottom: 200px; + } + @page :right { + margin-right: 500px; + margin-top: 200px; + } + body { + margin: 0; + background: yellow; + } + div { + break-after: page; + } +</style> +<!-- The first page is a right page. --> +<div> + bottom left corner +</div> +<div> + top right corner +</div> +<div> + bottom left corner +</div> +<div> + top right corner +</div> diff --git a/testing/web-platform/tests/css/css-page/page-left-right-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-left-right-002-print-ref.html new file mode 100644 index 0000000000..3480039046 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-left-right-002-print-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + @page { + size: 600px 300px; + margin: 0; + } + html { + direction: rtl; + } + body { + margin: 0; + } + div { + break-after: page; + width: 100px; + height: 100px; + overflow: clip; /* Depending on font, glyphs may overflow. */ + background: yellow; + } + div:nth-child(odd) { + margin-right: 500px; + } + div:nth-child(even) { + margin-top: 200px; + } +</style> +<div> + top left corner +</div> +<div> + bottom right corner +</div> +<div> + top left corner +</div> +<div> + bottom right corner +</div> diff --git a/testing/web-platform/tests/css/css-page/page-left-right-002-print.html b/testing/web-platform/tests/css/css-page/page-left-right-002-print.html new file mode 100644 index 0000000000..59e23479e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-left-right-002-print.html @@ -0,0 +1,41 @@ +<!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/#spread-pseudos"> +<link rel="match" href="page-left-right-002-print-ref.html"> +<style> + @page { + size: 600px 300px; + margin: 0; + } + @page :left { + margin-right: 500px; + margin-bottom: 200px; + } + @page :right { + margin-left: 500px; + margin-top: 200px; + } + html { + direction: rtl; + } + body { + margin: 0; + background: yellow; + } + div { + break-after: page; + } +</style> +<!-- The first page is a left page. --> +<div> + top left corner +</div> +<div> + bottom right corner +</div> +<div> + top left corner +</div> +<div> + bottom right corner +</div> diff --git a/testing/web-platform/tests/css/css-page/page-margin-003.xht b/testing/web-platform/tests/css/css-page/page-margin-003.xht new file mode 100644 index 0000000000..de4f894968 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-margin-003.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page margin shorthand using ems</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="A margin declaration within the @page context applies to the page box."/> + <meta name="assert" content="A margin expressed in ems uses the page context's font."/> + <style type="text/css"><![CDATA[ + @page { + font-size: 18pt; + margin: 2em; + } + html, body {background: #ccc;} + ]]></style> + </head> + <body> + <p>This paragraph must appear inside a grey box. The box should be 0.5in from the page edge on all sides.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-000.xht b/testing/web-platform/tests/css/css-page/page-name-000.xht new file mode 100644 index 0000000000..0044d5ac3d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-000.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Page Selector Grammar - @page auto</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#syntax-page-selector"/> + <meta name="flags" content="paged invalid" /> + <style type="text/css"><![CDATA[ + @page { size: portrait; } + @page auto { size: landscape; } + div { page: auto } + ]]></style> + </head> + <body> + <div>This paragraph should be printed in portrait layout: the short sides of the page should be top and bottom.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-name-001-print.html b/testing/web-platform/tests/css/css-page/page-name-001-print.html new file mode 100644 index 0000000000..9427db4fe7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-001-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: @page size descriptor with named page</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1874947"> +<link rel="match" href="page-name-001-ref.html"> +<style> +@page a { + size: 2in 3in; + margin: 0.1in; +} +html { + height: 100%; + box-sizing: border-box; + border: 5px solid black; +} +</style> +<div style="page: a"> +Text +</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-001-ref.html b/testing/web-platform/tests/css/css-page/page-name-001-ref.html new file mode 100644 index 0000000000..4e1a499968 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference Case</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<style> +@page { + size: 2in 3in; + margin: 0.1in; +} +html { + height: 100%; + box-sizing: border-box; + border: 5px solid black; +} +</style> +<div> +Text +</div> diff --git a/testing/web-platform/tests/css/css-page/page-name-abspos-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-abspos-001-print-ref.html new file mode 100644 index 0000000000..dc61a55078 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-abspos-001-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="position: absolute; right: 0; top: 0;">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-abspos-001-print.html b/testing/web-platform/tests/css/css-page/page-name-abspos-001-print.html new file mode 100644 index 0000000000..df2f614935 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-abspos-001-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-abspos-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div>a</div> + <div style="page: b; position: absolute; right: 0; top: 0;">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-abspos-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-abspos-002-print-ref.html new file mode 100644 index 0000000000..c93ee0a31d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-abspos-002-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <div style="position: absolute; left: 0; top: 0;"> + <div>a</div> + <div>b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-abspos-002-print.html b/testing/web-platform/tests/css/css-page/page-name-abspos-002-print.html new file mode 100644 index 0000000000..f0accb36c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-abspos-002-print.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-abspos-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="position: absolute; left: 0; top: 0;"> + <div style="page: a">a</div> + <div style="page: b">b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-abspos-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-abspos-003-print-ref.html new file mode 100644 index 0000000000..d920fd974a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-abspos-003-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <div style="page: a">a</div> + <div style="page: b; position: absolute; left: 0; top: 0;">b</div> + <div style="page: c; break-before: page;">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-abspos-003-print.html b/testing/web-platform/tests/css/css-page/page-name-abspos-003-print.html new file mode 100644 index 0000000000..0361f669ca --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-abspos-003-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-abspos-003-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a">a</div> + <div style="page: b; position: absolute; left: 0; top: 0;">b</div> + <div style="page: c">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-canvas-001-print-ref.html new file mode 100644 index 0000000000..ab232feb1c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-001-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <canvas height="1" style="border: 1px solid black;"></canvas> + <div style="break-before: page;">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-001-print.html b/testing/web-platform/tests/css/css-page/page-name-canvas-001-print.html new file mode 100644 index 0000000000..64b879efbb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-001-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-canvas-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <canvas height="1" style="page:b; border: 1px solid black"></canvas> + <div style="page:b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-canvas-002-print-ref.html new file mode 100644 index 0000000000..76c3f718cd --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-002-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <div style="break-after: page">a</div> + <canvas height="1" style="border: 1px solid black"></canvas> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-002-print.html b/testing/web-platform/tests/css/css-page/page-name-canvas-002-print.html new file mode 100644 index 0000000000..7a1bc7d9a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-002-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-canvas-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <div style="page:b">a</div> + <canvas height="1" style="page:b; border: 1px solid black"></canvas> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-canvas-003-print-ref.html new file mode 100644 index 0000000000..2aaa9915fa --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-003-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <canvas height="1" style="display: block; border: 1px solid black"></canvas> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-003-print.html b/testing/web-platform/tests/css/css-page/page-name-canvas-003-print.html new file mode 100644 index 0000000000..cbebc42153 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-003-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-canvas-003-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <canvas height="1" style="display: block; page: b; border: 1px solid black"></canvas> + <div style="page:b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-canvas-004-print-ref.html new file mode 100644 index 0000000000..26a5072789 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-004-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body style="page:a"> + <canvas height="1" style="display: block; break-after: page; border: 1px solid black"></canvas> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-canvas-004-print.html b/testing/web-platform/tests/css/css-page/page-name-canvas-004-print.html new file mode 100644 index 0000000000..6343a50926 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-canvas-004-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-canvas-004-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <canvas height="1" style="display: block; page: b; border: 1px solid black"></canvas> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-display-none-child-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-display-none-child-print-ref.html new file mode 100644 index 0000000000..b7044e0776 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-display-none-child-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <div style="break-after: page">a</div> + <!-- This should match the test case, even if page-breaks are being coalesced --> + <div style="break-after: page"></div> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-display-none-child-print.html b/testing/web-platform/tests/css/css-page/page-name-display-none-child-print.html new file mode 100644 index 0000000000..f42aae35c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-display-none-child-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-display-none-child-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page:a">a</div> + <div style="page:c"> + <div style="display: none">c</div> + </div> + <div style="page:b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-fixed-pos-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-fixed-pos-001-print-ref.html new file mode 100644 index 0000000000..5c1e91ea85 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-fixed-pos-001-print-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> + <style> +div { + width: 1in; + height: 1in; + border: 1px solid black; +} +.fixed { + position: fixed; + left: 0.5in; + top: 0.5in; + border-color: blue; +} + </style> + <body> + <div class="fixed">fixed</div> + <div style="break-after: page">a</div> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-fixed-pos-001-print.html b/testing/web-platform/tests/css/css-page/page-name-fixed-pos-001-print.html new file mode 100644 index 0000000000..495c66ce2e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-fixed-pos-001-print.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-fixed-pos-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <style> +div { + width: 1in; + height: 1in; + border: 1px solid black; +} +.fixed { + position: fixed; + display: flex; + left: 0.5in; + top: 0.5in; + border-color: blue; +} + </style> + <body> + <div class="fixed">fixed</div> + <div style="page: a">a</div> + <div class="page: b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-flex-001-print-ref.html new file mode 100644 index 0000000000..8cd606f804 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-001-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="display:flex; flex-direction:column"> + <div>b</div> + <div>c</div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-001-print.html b/testing/web-platform/tests/css/css-page/page-name-flex-001-print.html new file mode 100644 index 0000000000..9b932e69d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-001-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-flex-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div>a</div> + <div style="display:flex; flex-direction:column"> + <div style="page:b">b</div> + <div style="page:c">c</div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-flex-002-print-ref.html new file mode 100644 index 0000000000..dbd9bca9eb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-002-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="display:flex"> + <div>b</div> + <div>c</div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-002-print.html b/testing/web-platform/tests/css/css-page/page-name-flex-002-print.html new file mode 100644 index 0000000000..a25e22d6fb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-002-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-flex-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div>a</div> + <div style="display:flex"> + <div style="page:b">b</div> + <div style="page:c">c</div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-flex-003-print-ref.html new file mode 100644 index 0000000000..6d33db527b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-003-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="break-before: page; break-after: page; display:flex; flex-direction:column"> + <div>b</div> + <div>c</div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-003-print.html b/testing/web-platform/tests/css/css-page/page-name-flex-003-print.html new file mode 100644 index 0000000000..2cfbb6fb7c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-003-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-flex-003-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <div>a</div> + <div style="page:b; display:flex; flex-direction:column"> + <div>b</div> + <div>c</div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-flex-004-print-ref.html new file mode 100644 index 0000000000..85524dfb22 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-004-print-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="display:flex; flex-direction:column"> + <div> + <div style="break-after: page">b</div> + <div>c</div> + </div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-flex-004-print.html b/testing/web-platform/tests/css/css-page/page-name-flex-004-print.html new file mode 100644 index 0000000000..aa20ad1cb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-flex-004-print.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-flex-004-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div>a</div> + <div style="display:flex; flex-direction:column"> + <div> + <div> + <div style="page:a">b</div> + <div style="page:b">c</div> + </div> + </div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-float-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-float-001-print-ref.html new file mode 100644 index 0000000000..15ae3b76eb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-float-001-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <div style="float: left;">a</div> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-float-001-print.html b/testing/web-platform/tests/css/css-page/page-name-float-001-print.html new file mode 100644 index 0000000000..4233bac5c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-float-001-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-float-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a; float: left;">a</div> + <div style="page: b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-float-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-float-002-print-ref.html new file mode 100644 index 0000000000..e703746e55 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-float-002-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="float: left;">b</div> + <div style="break-before: page;">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-float-002-print.html b/testing/web-platform/tests/css/css-page/page-name-float-002-print.html new file mode 100644 index 0000000000..db4f0b28ce --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-float-002-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-float-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a">a</div> + <div style="page: b; float: left;">b</div> + <div style="page: c">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-img-001-print-ref.html new file mode 100644 index 0000000000..93e94759f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-001-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + <div style="break-before: page">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-001-print.html b/testing/web-platform/tests/css/css-page/page-name-img-001-print.html new file mode 100644 index 0000000000..7864b869d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-001-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-img-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <img style="page:b" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + <div style="page:b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-img-002-print-ref.html new file mode 100644 index 0000000000..83cf77bf71 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-002-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <div style="break-after: page">a</div> + <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-002-print.html b/testing/web-platform/tests/css/css-page/page-name-img-002-print.html new file mode 100644 index 0000000000..3857986ca9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-002-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-img-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <div style="page:b">a</div> + <img style="page:b" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-img-003-print-ref.html new file mode 100644 index 0000000000..43a7cc43be --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-003-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <img style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-003-print.html b/testing/web-platform/tests/css/css-page/page-name-img-003-print.html new file mode 100644 index 0000000000..26790f0e7a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-003-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-img-003-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <img style="display: block; page: b" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + <div style="page:b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-img-004-print-ref.html new file mode 100644 index 0000000000..fe55758bc0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-004-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <img style="display: block;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-img-004-print.html b/testing/web-platform/tests/css/css-page/page-name-img-004-print.html new file mode 100644 index 0000000000..13fbeb01b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-img-004-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-img-004-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <div style="page: b">a</div> + <img style="display: block; page: b" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAIAAAABc2X6AAAAa0lEQVR42u3QMREAAAwCMfybbl3AEu4NhCQ3abUAAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwOXwbunRwEDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDA3d78VrQ4ODmDDUAAAAASUVORK5CYII="> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-inline-block-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-inline-block-001-print-ref.html new file mode 100644 index 0000000000..ffcf2c8964 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-inline-block-001-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <div style="display: inline-block"> + <div>a</div> + <div>b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-inline-block-001-print.html b/testing/web-platform/tests/css/css-page/page-name-inline-block-001-print.html new file mode 100644 index 0000000000..365a24146a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-inline-block-001-print.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-inline-block-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="display: inline-block"> + <div style="page: a">a</div> + <div style="page: b">b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-inline-block-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-inline-block-002-print-ref.html new file mode 100644 index 0000000000..0cbd721e4c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-inline-block-002-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <body> + <div style="display: inline-block"> + <div>a</div> + <div>b</div> + </div> + <div style="break-before: page">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-inline-block-002-print.html b/testing/web-platform/tests/css/css-page/page-name-inline-block-002-print.html new file mode 100644 index 0000000000..cb65afa924 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-inline-block-002-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-inline-block-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: c; display: inline-block"> + <div style="page: a">a</div> + <div style="page: b">b</div> + </div> + <div style="page: c">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-inline-block-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-inline-block-003-print-ref.html new file mode 100644 index 0000000000..35db44b14e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-inline-block-003-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html> + <body> + <div style="display: inline-block">a</div> + <div style="display: inline-block">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-inline-block-003-print.html b/testing/web-platform/tests/css/css-page/page-name-inline-block-003-print.html new file mode 100644 index 0000000000..994f506999 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-inline-block-003-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-inline-block-003-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a; display: inline-block">a</div> + <div style="page: b; display: inline-block">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-margin-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-margin-001-print-ref.html new file mode 100644 index 0000000000..60726e6e15 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-margin-001-print-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> + <style> +@page { + margin: 0; +} +.block { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="padding: 0; break-after: page"> + <div class="block" style="border-color: lightblue"></div> + </div> + <div style="padding: 1cm; break-after: page"> + <div class="block" style="border-color: pink"></div> + </div> + <div style="padding: 2cm"> + <div class="block" style="border-color: gray"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-margin-001-print.html b/testing/web-platform/tests/css/css-page/page-name-margin-001-print.html new file mode 100644 index 0000000000..9514339e45 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-margin-001-print.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-margin-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <style> +@page a { + margin: 0; +} +@page b { + margin: 1cm; +} +@page c { + margin: 2cm; +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="page: a; border-color: lightblue"></div> + <div style="page: b; border-color: pink"></div> + <div style="page: c; border-color: gray"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-margin-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-margin-002-print-ref.html new file mode 100644 index 0000000000..0e28b4c8b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-margin-002-print-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> + <style> +@page { + margin: 0; +} +.block { + width: 1cm; + height: 1cm; + border: 2px solid blue; +} + </style> + <body> + <div class="block" style="break-after: page"></div> + <div style="padding: 1in"> + <div class="block"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-margin-002-print.html b/testing/web-platform/tests/css/css-page/page-name-margin-002-print.html new file mode 100644 index 0000000000..0ab67f3069 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-margin-002-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-margin-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <style> +@page a { + margin: 1in; +} +@page { + margin: 0; +} +div { + width: 1cm; + height: 1cm; + border: 2px solid blue; +} + </style> + <body> + <div></div> + <div style="page: a"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-001-print-ref.html new file mode 100644 index 0000000000..60218fbb47 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-001-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html style="writing-mode: vertical-rl"> + <body> + <div style="writing-mode: horizontal-tb"> + <div>a</div> + <div>b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-001-print.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-001-print.html new file mode 100644 index 0000000000..c84b3e5ee9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-001-print.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html style="writing-mode: vertical-rl"> + <link rel="match" href="page-name-orthogonal-writing-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="writing-mode: horizontal-tb"> + <div style="page: a">a</div> + <div style="page: b">b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-002-print-ref.html new file mode 100644 index 0000000000..176d5abda5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-002-print-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<html style="writing-mode: vertical-rl"> + <body> + <div style="margin-block-end: 999in">a</div> + <div>b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-002-print.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-002-print.html new file mode 100644 index 0000000000..a720090ba6 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-002-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html style="writing-mode: vertical-rl"> + <link rel="match" href="page-name-orthogonal-writing-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a">a</div> + <div style="page: b">b</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-003-print-ref.html new file mode 100644 index 0000000000..cae1f8d7d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-003-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html style="writing-mode: horizontal-tb"> + <body> + <div style="writing-mode: vertical-rl"> + <div>a</div> + <div>b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-003-print.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-003-print.html new file mode 100644 index 0000000000..6d24c32408 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-003-print.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html style="writing-mode: horizontal-tb"> + <link rel="match" href="page-name-orthogonal-writing-003-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="writing-mode: vertical-rl"> + <div style="page: a">a</div> + <div style="page: b">b</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-004-print-ref.html new file mode 100644 index 0000000000..6d69497386 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-004-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body> + <div style="writing-mode: vertical-rl"> + <div style="writing-mode: horizontal-tb"> + <div style="break-after: page">a</div> + <div>b</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-004-print.html b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-004-print.html new file mode 100644 index 0000000000..8e6176584d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-orthogonal-writing-004-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-orthogonal-writing-004-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="writing-mode: vertical-rl"> + <div style="writing-mode: horizontal-tb"> + <div style="page: a">a</div> + <div style="page: b">b</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-001-print-ref.html new file mode 100644 index 0000000000..7cd7b54c23 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-001-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div> + <div> + <div>b</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-001-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-001-print.html new file mode 100644 index 0000000000..3efaf7695b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-001-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a">a</div> + <div style="page: b"> + <div style="page: c"> + <div style="page: a">b</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-002-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-002-print-ref.html new file mode 100644 index 0000000000..d4191ae70c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-002-print-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div> + <div> + <div>b</div> + </div> + <div style="break-before: page">c</div> + </div> + <div style="break-before: page">d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-002-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-002-print.html new file mode 100644 index 0000000000..d88596c122 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-002-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-002-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a">a</div> + <div style="page: b"> + <div style="page: e"> + <div style="page: a">b</div> + </div> + <div style="page: c">c</div> + </div> + <div style="page: d">d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-003-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-003-print-ref.html new file mode 100644 index 0000000000..2394a1d093 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-003-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="position: absolute; left: 100px">b</div> + <div>c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-003-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-003-print.html new file mode 100644 index 0000000000..969bbe6e2d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-003-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-003-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a">a</div> + <div style="page: b"> + <div style="page: c"> + <div style="position: absolute; left: 100px">b</div> + <div style="page: a">c</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-004-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-004-print-ref.html new file mode 100644 index 0000000000..c405886644 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-004-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body> + <div style="break-after: page">a</div> + <div> + <div> + <div style="position: absolute; left: 100px">b</div> + <div>c</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-004-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-004-print.html new file mode 100644 index 0000000000..49600ef6d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-004-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-004-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: a">a</div> + <div style="page: b"> + <div style="page: c"> + <div style="position: absolute; left: 100px">b</div> + <div style="page: x">c</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-005-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-005-print-ref.html new file mode 100644 index 0000000000..05cad793c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-005-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body> + <div> + <div> + <div>a</div> + <div style="position: absolute; left: 100px">b</div> + </div> + </div> + <div>c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-005-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-005-print.html new file mode 100644 index 0000000000..12bd274f2f --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-005-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-005-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: b"> + <div style="page: c"> + <div style="page: a">a</div> + <div style="position: absolute; left: 100px">b</div> + </div> + </div> + <div style="page: a">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-006-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-006-print-ref.html new file mode 100644 index 0000000000..5b45ace9fe --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-006-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <body> + <div> + <div> + <div>a</div> + <div style="position: absolute; left: 100px">b</div> + </div> + </div> + <div style="break-before: page">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-006-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-006-print.html new file mode 100644 index 0000000000..18be3827ce --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-006-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-006-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page: b"> + <div style="page: c"> + <div style="page: x">a</div> + <div style="position: absolute; left: 100px">b</div> + </div> + </div> + <div style="page: a">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-007-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-007-print-ref.html new file mode 100644 index 0000000000..f51d28a574 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-007-print-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="break-after: page">b</div> + <div style="break-after: page">c</div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-007-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-007-print.html new file mode 100644 index 0000000000..c27ad9f326 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-007-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-007-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div>a</div> + <div> + <div>b</div> + <div style="page: x">c</div> + </div> + <div>d</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-008-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-008-print-ref.html new file mode 100644 index 0000000000..dd53a0586a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-008-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <div style="break-after: page">a</div> + <div style="break-after: page">b</div> + <div>c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-008-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-008-print.html new file mode 100644 index 0000000000..3f7fab4caa --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-008-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-008-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div> + <div style="page: a">a</div> + <div>b</div> + </div> + <div style="page: a">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-009-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-propagated-009-print-ref.html new file mode 100644 index 0000000000..5faa6ea5c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-009-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <div style="break-after: page">a</div> + <div>b</div> + <div>c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-propagated-009-print.html b/testing/web-platform/tests/css/css-page/page-name-propagated-009-print.html new file mode 100644 index 0000000000..eb0d1dbe89 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-propagated-009-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-propagated-009-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div> + <div style="page: a">a</div> + <div>b</div> + </div> + <div>c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-siblings-001-print.html b/testing/web-platform/tests/css/css-page/page-name-siblings-001-print.html new file mode 100644 index 0000000000..b4fa8457e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-siblings-001-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-siblings-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page:b">a</div> + <div style="page:b">b</div> + <div>c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-siblings-002-print.html b/testing/web-platform/tests/css/css-page/page-name-siblings-002-print.html new file mode 100644 index 0000000000..28f5e0b571 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-siblings-002-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-siblings-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page:a">a</div> + <div style="page:b"> + <div style="page:a">b</div> + <div>c</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-siblings-003-print.html b/testing/web-platform/tests/css/css-page/page-name-siblings-003-print.html new file mode 100644 index 0000000000..44346a649f --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-siblings-003-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-siblings-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div style="page:a"> + <div>a</div> + </div> + <div style="page:a">b</div> + <div style="page:b">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-siblings-004-print.html b/testing/web-platform/tests/css/css-page/page-name-siblings-004-print.html new file mode 100644 index 0000000000..51e12ba251 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-siblings-004-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-siblings-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body> + <div>a</div> + <div style="page:auto">b</div> + <div style="page:b">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-siblings-005-print.html b/testing/web-platform/tests/css/css-page/page-name-siblings-005-print.html new file mode 100644 index 0000000000..9ad77ad5dc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-siblings-005-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-siblings-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <body style="page:a"> + <div style="page:a">a</div> + <div style="page:auto">b</div> + <div style="page:b">c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-siblings-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-siblings-print-ref.html new file mode 100644 index 0000000000..fefe86d8b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-siblings-print-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + <div style="break-after: page">b</div> + <div>c</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-zero-height-001-print-ref.html b/testing/web-platform/tests/css/css-page/page-name-zero-height-001-print-ref.html new file mode 100644 index 0000000000..e78cb65df9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-zero-height-001-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<html> + <style>div { line-height: 1.5; }</style> + <body> + <div style="break-after: page">a</div> + <div style="height: 0">b</div> + <div style="height: 0; padding-left: 2em">c</div> + <div style="height: 0; padding-left: 4em">d</div> + <div style="padding-left: 6em;">e</div> + <div style="break-before: page">f</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-name-zero-height-001-print.html b/testing/web-platform/tests/css/css-page/page-name-zero-height-001-print.html new file mode 100644 index 0000000000..8a108c9b45 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-name-zero-height-001-print.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="page-name-zero-height-001-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#using-named-pages"/> + <style>div { line-height: 1.5; }</style> + <body> + <div style="page: a">a</div> + <div style="page: b; height: 0">b</div> + <div style="page: c; height: 0; padding-left: 2em">c</div> + <div style="page: d; height: 0; padding-left: 4em">d</div> + <div style="page: e; padding-left: 6em;">e</div> + <div style="page: f">f</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-landscape-ref.html b/testing/web-platform/tests/css/css-page/page-orientation-landscape-ref.html new file mode 100644 index 0000000000..caa7542dac --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-landscape-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> + <style> + +@page { + size: landscape; +} +div { + box-sizing: border-box; + width: 4in; + height: 2in; + border-top: none; + border-right: 15px solid orange; + border-bottom: none; + border-left: 15px solid blue; +} +body { + margin: 0; +} + + </style> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-on-landscape-001-print.html b/testing/web-platform/tests/css/css-page/page-orientation-on-landscape-001-print.html new file mode 100644 index 0000000000..6832a5537d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-on-landscape-001-print.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> + <link rel="help" href="https://drafts.csswg.org/css-page/#page-orientation-prop"> + <meta name="assert" content="page-orientation rotates landscape page to match portrait ref"> + <link rel="match" href="page-orientation-portrait-ref.html"> + <meta name="reftest-pages" content="2"> + <style> + +@page second-page { + size: landscape; + page-orientation: rotate-right; +} +div:nth-of-type(2) { + page: second-page; + break-before: page; + + box-sizing: border-box; + width: 4in; + height: 2in; + border-top: 15px solid orange; + border-right: none; + border-bottom: 15px solid blue; + border-left: none; +} +body { + margin: 0; +} + + </style> + <body> + <div>Page 1. Not compared. Just bumps testing to page 2.</div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-001-print.html b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-001-print.html new file mode 100644 index 0000000000..5ab3e1edfd --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-001-print.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> + <link rel="help" href="https://drafts.csswg.org/css-page/#page-orientation-prop"> + <meta name="assert" content="page-orientation rotates portrait page to match landscape ref"> + <link rel="match" href="page-orientation-landscape-ref.html"> + <meta name="reftest-pages" content="2"> + <style> + +@page second-page { + size: portrait; + page-orientation: rotate-right; +} +div:nth-of-type(2) { + page: second-page; + break-before: page; + + box-sizing: border-box; + width: 2in; + height: 4in; + border-top: 15px solid orange; + border-right: none; + border-bottom: 15px solid blue; + border-left: none; +} +body { + margin: 0; +} + + </style> + <body> + <div>Page 1. Not compared. Just bumps testing to page 2.</div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-002-notref.html b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-002-notref.html new file mode 100644 index 0000000000..503fd42d58 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-002-notref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Not-reference Case</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-page/#page-orientation-prop"> +<style> +@page { + margin: 0; + size: 200px 300px; +} +@page rotated { + page-orientation: rotate-left; +} +body { + margin: 0; +} +.filler { + box-sizing: border-box; + width: 200px; + height: 300px; + border: 10px solid black; +} +</style> +<div class="filler">Page 1</div> +<div class="filler" style="page: rotated">Page 2</div> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-002-print.html b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-002-print.html new file mode 100644 index 0000000000..51b4a980fb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-002-print.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Differing border color at the end of a rotate-left page + should produce a reftest mismatch result</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-page/#page-orientation-prop"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1875182"> +<link rel="mismatch" href="page-orientation-on-portrait-002-notref.html"> +<style> +@page { + margin: 0; + size: 200px 300px; +} +@page rotated { + page-orientation: rotate-left; +} +body { + margin: 0; +} +.filler { + box-sizing: border-box; + width: 200px; + height: 300px; + border: 10px solid black; +} +.specialborder { + border-bottom-color: cyan; +} +</style> +<div class="filler">Page 1</div> +<!-- Page 2 gets a special border at the end which should make it + compare as a "mismatch" against the reference case, if things are + working properly. --> +<div class="filler specialborder" style="page: rotated">Page 2</div> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-003-notref.html b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-003-notref.html new file mode 100644 index 0000000000..f6f415df97 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-003-notref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Not-reference Case</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-page/#page-orientation-prop"> +<style> +@page { + margin: 0; + size: 200px 300px; +} +@page rotated { + page-orientation: rotate-right; +} +body { + margin: 0; +} +.filler { + box-sizing: border-box; + width: 200px; + height: 300px; + border: 10px solid black; +} +</style> +<div class="filler">Page 1</div> +<div class="filler" style="page: rotated">Page 2</div> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-003-print.html b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-003-print.html new file mode 100644 index 0000000000..9cf505bbd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-on-portrait-003-print.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: Differing border color at the start of a rotate-right page + should produce a reftest mismatch result</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-page/#page-orientation-prop"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1875182"> +<link rel="mismatch" href="page-orientation-on-portrait-003-notref.html"> +<style> +@page { + margin: 0; + size: 200px 300px; +} +@page rotated { + page-orientation: rotate-right; +} +body { + margin: 0; +} +.filler { + box-sizing: border-box; + width: 200px; + height: 300px; + border: 10px solid black; +} +.specialborder { + border-top-color: cyan; +} +</style> +<div class="filler">Page 1</div> +<!-- Page 2 gets a special border at the start which should make it + compare as a "mismatch" against the reference case, if things are + working properly. --> +<div class="filler specialborder" style="page: rotated">Page 2</div> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-on-square-001-print.html b/testing/web-platform/tests/css/css-page/page-orientation-on-square-001-print.html new file mode 100644 index 0000000000..06e4f00d3c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-on-square-001-print.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> + <link rel="help" href="https://drafts.csswg.org/css-page/#page-orientation-prop"> + <meta name="assert" content="page-orientation rotates square page"> + <link rel="match" href="page-orientation-square-ref.html"> + <meta name="reftest-pages" content="2"> + <style> + +@page { + size: 3in 3in; + margin: 0.5in; +} +@page second-page { + page-orientation: rotate-right; +} +div:nth-of-type(2) { + page: second-page; + break-before: page; + + box-sizing: border-box; + width: 2in; + height: 2in; + border-top: 15px solid orange; + border-right: none; + border-bottom: 15px solid blue; + border-left: none; +} +body { + margin: 0; +} + + </style> + <body> + <div>Page 1. Not compared. Just bumps testing to page 2.</div> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-portrait-ref.html b/testing/web-platform/tests/css/css-page/page-orientation-portrait-ref.html new file mode 100644 index 0000000000..c545c3163c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-portrait-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> + <style> + +@page { + size: portrait; +} +div { + box-sizing: border-box; + width: 2in; + height: 4in; + border-top: none; + border-right: 15px solid orange; + border-bottom: none; + border-left: 15px solid blue; +} +body { + margin: 0; +} + + </style> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-orientation-square-ref.html b/testing/web-platform/tests/css/css-page/page-orientation-square-ref.html new file mode 100644 index 0000000000..9eacc3e092 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation-square-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"> + <style> + +@page { + size: 3in 3in; + margin: 0.5in; +} +div { + box-sizing: border-box; + width: 2in; + height: 2in; + border-top: none; + border-right: 15px solid orange; + border-bottom: none; + border-left: 15px solid blue; +} +body { + margin: 0; +} + + </style> + <body> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-orientation.tentative.html b/testing/web-platform/tests/css/css-page/page-orientation.tentative.html new file mode 100644 index 0000000000..6725aa88e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-orientation.tentative.html @@ -0,0 +1,81 @@ +<!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-orientation-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @page { + page-orientation: rotate-right; + } + @page :left { + page-orientation: rotate-left; + } + @page :right { + page-orientation: rotate-right; + } + @page :first { + page-orientation: rotate-left; + } + @page named1 { + page-orientation: upright; + } + @page named2 { + page-orientation: hotpink; + } + @page named3 { + page-orientation: rotate-right; + } + @page named4 { + page-orientation: rotate-right; + page-orientation: rotate-left; + } + @page named5 { + page-orientation: hotpink; + page-orientation: rotate-right; + } + @page named6 { + page-orientation: rotate-right; + page-orientation: inherit; + page-orientation: initial; + page-orientation: none; + page-orientation: hotpink; + } + h5 { + page-orientation: rotate-right; + display: block; + } +</style> +<script> + let pageRuleExpectations = { + "" : "page-orientation: rotate-right;", + ":left" : "page-orientation: rotate-left;", + ":right" : "page-orientation: rotate-right;", + ":first" : "page-orientation: rotate-left;", + "named1" : "page-orientation: upright;", + "named2" : "", + "named3" : "page-orientation: rotate-right;", + "named4" : "page-orientation: rotate-left;", + "named5" : "page-orientation: rotate-right;", + "named6" : "page-orientation: rotate-right;", + }; + let styleRuleExpectations = { + "h5" : "display: block;" + }; + let styleSheets = document.styleSheets; + for (let i = 0; i < styleSheets.length; i++) { + let rules = styleSheets[i].cssRules; + for (let rule of rules) { + if (rule.type == CSSRule.PAGE_RULE) { + let expected = pageRuleExpectations[rule.selectorText]; + test(function() { + assert_equals(rule.style.cssText, expected, "unexpected @page contents"); + }, "contents for selector ['" + rule.selectorText + "']"); + } else if (rule.type == CSSRule.STYLE_RULE) { + let expected = styleRuleExpectations[rule.selectorText]; + test(function() { + assert_equals(rule.style.cssText, expected, "unexpected style rule contents"); + }, "contents for selector ['" + rule.selectorText + "']"); + } + } + } +</script> diff --git a/testing/web-platform/tests/css/css-page/page-properties-000.xht b/testing/web-platform/tests/css/css-page/page-properties-000.xht new file mode 100644 index 0000000000..a69907ea06 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-properties-000.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page width and height</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-box-page-rule"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-properties"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'width' and 'height' properties do not apply to a page box."/> + <style type="text/css"><![CDATA[ + @page { + width: 1in; + height: 1in; + border: 2pt solid black; + } + div.biggerBox { + width: 2in; + height: 2in; + border: 1pt solid black; + } + ]]></style> + </head> + <body> + <div>This page should have a black border. The area inside the border should be larger than 1in×1in. The box below should be 2in×2in; and fit on the page.</div> + <div class="biggerBox"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-rule-declarations-000.html b/testing/web-platform/tests/css/css-page/page-rule-declarations-000.html new file mode 100644 index 0000000000..cbe53855a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-declarations-000.html @@ -0,0 +1,122 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Paged Media: parsing @page declarations</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> +<link rel="help" href="https://drafts.csswg.org/css-page/#at-page-rule"/> +<meta name="assert" content="Test that @page declarations are parsed correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style type="text/css"> + + @page :visited { /* :visited is invalid for @page */ + color: red; + } + @page a_page_name:visited { /* :visited is invalid for @page */ + background-color: red; + } + @page { + margin-top:5cm; + margin-bottom:10cm; + } + @page :left { + margin-right:3cm; + } + @page :right { + margin-left:3cm; + } + @page :first { + border-width:1px; + } + @page hello { + color:green; + } + @page world:right { + background-color:green; + } + @page auto_page { + size: auto; + } + @page square_page { + size: 4in; + } + @page letter_page { + size: letter; + } + @page page_width_height { + size: 10cm 15cm; + } + @page page_size_orientation { + size: ledger landscape; + } + @page page_orientation_size { + size: portrait a4; + } + @page page_jis_size_orientation { + size: jis-b5 portrait; + } + @page page_orientation_jis_size { + size: landscape jis-b4; + } + @page err_empty_size { + size:; + } + @page err_unknow_page_size { + size: yotsugiri; + } + @page err_length_and_page_size { + size: 10cm letter; + } + @page err_length_and_orientation { + size: 10cm landscape; + } + @page err_orientations { + size: portrait landscape; + } + @page err_too_many_params { + size: a5 landscape auto; + } + +</style> +<script type="text/javascript"> + + let expectedForSelector = { + "" : "margin-top: 5cm; margin-bottom: 10cm;", + ":left" : "margin-right: 3cm;", + ":right" : "margin-left: 3cm;", + ":first" : "border-width: 1px;", + "hello" : "color: green;", + "world:right" : "background-color: green;", + "auto_page" : "size: auto;", + "square_page" : "size: 4in;", + "letter_page" : "size: letter;", + "page_width_height" : "size: 10cm 15cm;", + "page_size_orientation" : "size: ledger landscape;", + "page_orientation_size" : "size: a4 portrait;", + "page_jis_size_orientation" : "size: jis-b5 portrait;", + "page_orientation_jis_size" : "size: jis-b4 landscape;", + "err_empty_size" : "", + "err_unknow_page_size" : "", + "err_length_and_page_size" : "", + "err_length_and_orientation" : "", + "err_orientations" : "", + "err_too_many_params" : "" + }; + let styleSheets = document.styleSheets; + for (let i = 0; i < styleSheets.length; i++) { + let rules = styleSheets[i].cssRules; + for (let rule of rules) { + if (rule.type == CSSRule.PAGE_RULE) { + let expected = expectedForSelector[rule.selectorText]; + test(function(){ + assert_equals(rule.style.cssText, expected, "unexpected @page contents"); + }, "unexpected contents for selector ['" + rule.selectorText + "']"); + delete expectedForSelector[rule.selectorText]; + } + } + } + test(function() { + assert_equals(Object.keys(expectedForSelector).length, 0, "missing @page selectors"); + }); + +</script> diff --git a/testing/web-platform/tests/css/css-page/page-rule-declarations-001.html b/testing/web-platform/tests/css/css-page/page-rule-declarations-001.html new file mode 100644 index 0000000000..dc225b5abd --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-declarations-001.html @@ -0,0 +1,57 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Paged Media: parsing @page declarations inside @media</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> +<link rel="help" href="https://drafts.csswg.org/css-page/#at-page-rule"/> +<meta name="assert" content="Test that @page declarations inside @media are parsed correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style type="text/css"> + + @media print { + @page { + margin: 3cm; + } + @page :first { + margin-top: 6cm; + } + @page :left { + color: red; + } + @page :right { + color: blue; + } + } + +</style> +<script type="text/javascript"> + + let expectedForSelector = { + "" : "margin: 3cm;", + ":first" : "margin-top: 6cm;", + ":left" : "color: red;", + ":right" : "color: blue;" + }; + let styleSheets = document.styleSheets; + for (let i = 0; i < styleSheets.length; i++) { + let rules = styleSheets[i].cssRules; + for (let rule of rules) { + if (rule.type == CSSRule.MEDIA_RULE && rule.conditionText == 'print') { + for (let mediaRule of rule.cssRules) { + if (mediaRule.type == CSSRule.PAGE_RULE) { + let expected = expectedForSelector[mediaRule.selectorText]; + test(function(){ + assert_equals(mediaRule.style.cssText, expected, "unexpected @page contents"); + }, "unexpected contents for selector ['" + mediaRule.selectorText + "']"); + delete expectedForSelector[mediaRule.selectorText]; + } + } + } + } + } + test(function() { + assert_equals(Object.keys(expectedForSelector).length, 0, "missing @page selectors in @media"); + }); + +</script> diff --git a/testing/web-platform/tests/css/css-page/page-rule-declarations-002.html b/testing/web-platform/tests/css/css-page/page-rule-declarations-002.html new file mode 100644 index 0000000000..b35fa29244 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-declarations-002.html @@ -0,0 +1,34 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Paged Media: parsing page properties inside HTML elements</title> +<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> +<link rel="help" href="https://drafts.csswg.org/css-page/#using-named-pages"/> +<meta name="assert" content="Test that page properties of HTML elements are parsed correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> + +<style type="text/css"> + + @page { + size: a4; + } + @page small_page { + size: a5 portrait; + } + @page large_page { + size: a3 landscape; + } + +</style> +<script type="text/javascript"> + + test_valid_value("page", "auto"); + test_valid_value("page", "small_page"); + test_valid_value("page", "large_page"); + test_invalid_value("page", "auto small_page"); + test_invalid_value("page", "large_page auto"); + test_invalid_value("page", "small_page large_page"); + test_invalid_value("page", "1cm"); + +</script> diff --git a/testing/web-platform/tests/css/css-page/page-rule-declarations-003.html b/testing/web-platform/tests/css/css-page/page-rule-declarations-003.html new file mode 100644 index 0000000000..aaf0bbb1a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-declarations-003.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Paged Media: parsing @page selectors</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"/> +<link rel="help" href="https://drafts.csswg.org/css-page/#page-selectors"/> +<meta name="assert" content="Test that @page selectors are parsed correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + @page a, B { + size: 1in; + } + @page A,b,C { + size: 2in; + } + @page auto { + size: 3in; + } + @page something, auto { + size: 4in; + } + @page auto, other_thing { + size: 5in; + } + @page _a, Z { + size: 6in; + } + @page -b, y { + size: 7in; + } + @page _abcd { + size: 8in; + } + @page n,-XYZ { + size: 9in; + } +</style> + +<script> + let expectedForSelector = { + "a, B" : "size: 1in;", + "A, b, C" : "size: 2in;", + "auto" : "size: 3in;", + "something, auto" : "size: 4in;", + "auto, other_thing" : "size: 5in;", + "_a, Z" : "size: 6in;", + "-b, y" : "size: 7in;", + "_abcd" : "size: 8in;", + "n, -XYZ" : "size: 9in;" + }; + let styleSheets = document.styleSheets; + for (let sheet of styleSheets) { + let rules = sheet.cssRules; + for (let rule of rules) { + if (rule.type == CSSRule.PAGE_RULE) { + let expected = expectedForSelector[rule.selectorText]; + test(function(){ + assert_equals(rule.style.cssText, expected, "unexpected @page contents"); + }, "contents for selector ['" + rule.selectorText + "']"); + delete expectedForSelector[rule.selectorText]; + } + } + } + // Validate that we can assign an empty selector + test(function() { + let rule = styleSheets[0].cssRules[0]; + assert_equals(rule.type, CSSRule.PAGE_RULE, "expected first rule to be @page"); + rule.selectorText = ""; + assert_equals(rule.selectorText, "", "unexpected selector when assigning blank string"); + }, "expected empty selector when assigning blank string"); + test(function() { + assert_equals(Object.keys(expectedForSelector).length, 0, "missing @page selectors"); + }); +</script> diff --git a/testing/web-platform/tests/css/css-page/page-rule-declarations-004.html b/testing/web-platform/tests/css/css-page/page-rule-declarations-004.html new file mode 100644 index 0000000000..94d0f8291d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-declarations-004.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Paged Media: parsing invalid @page selectors</title> +<link rel="author" title="Mozilla" href="https://mozilla.org"/> +<link rel="help" href="https://drafts.csswg.org/css-page/#page-selectors"/> +<meta name="assert" content="Test that @page selectors are parsed correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<style> + @page 1 { + size: 1in; + } + @page -3 { + size: 2in; + } + @page --a { + size: 3in; + } + @page 7cm { + size: 4in; + } + @page 0.17 { + size: 5in; + } + @page a, 123 { + size: 6in; + } +</style> + +<script> + const invalidSelectorTexts = [ + "1", + "-3", + "--a", + "7cm", + "0.17", + "a, 123", + ]; + + let styleSheets = document.styleSheets; + for (let sheet of styleSheets) { + for (let rule of sheet.cssRules) { + test(function(){ + assert_not_equals(rule.type, CSSRule.PAGE_RULE, + "no @page rule should have been parsed"); + }, "rule with invalid selector ['" + rule.selectorText + "']"); + } + } + + let ruleIndex = styleSheets[0].insertRule("@page{}"); + let rule = styleSheets[0].cssRules[ruleIndex]; + test(function() { + assert_equals(rule.selectorText, "", "Initial selector text should have been empty"); + assert_equals(rule.type, CSSRule.PAGE_RULE, "unexpected rule type (not @page)"); + }, "adding a blank @page rule"); + for (let selectorText of invalidSelectorTexts){ + test(function() { + // Clear the selector first + rule.selectorText = ""; + rule.selectorText = selectorText; + assert_equals(rule.selectorText, "", + "should not be able to assign an invalid selector"); + }, "assigning invalid selector text ['" + selectorText + "']"); + } +</script> diff --git a/testing/web-platform/tests/css/css-page/page-rule-specificity-001-print.html b/testing/web-platform/tests/css/css-page/page-rule-specificity-001-print.html new file mode 100644 index 0000000000..dc28ad75db --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-specificity-001-print.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Paged Media: @page without selector provides defaults</title> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"/> + <link rel="help" href="https://drafts.csswg.org/css-page/#cascading-and-page-context"/> + <meta name="assert" content="@page with a selector should not apply to non-matched pages"> + <link rel="match" href="page-rule-specificity-print-landscape-ref.html"/> + <meta name="reftest-pages" content="2"> + <style> + +/* WPT Print Reftest default size is 5x3in - this should only change that for the first page */ +@page :first { + size: portrait; +} +div:first-of-type { + break-after: page; +} +body { + margin: 0; +} + + </style> + <body> + <div>Portrait</div> + <div>Landscape</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-rule-specificity-002-print.html b/testing/web-platform/tests/css/css-page/page-rule-specificity-002-print.html new file mode 100644 index 0000000000..01d9b2b92d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-specificity-002-print.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Paged Media: @page without selector provides defaults</title> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"/> + <link rel="help" href="https://drafts.csswg.org/css-page/#cascading-and-page-context"/> + <meta name="assert" content="@page rule without a selector list should apply to pages not matched by rules with selectors"> + <link rel="match" href="page-rule-specificity-print-landscape-ref.html"/> + <meta name="reftest-pages" content="2"> + <style> + +@page :first { + size: portrait; +} +@page { + size: landscape; +} +div:first-of-type { + break-after: page; +} +body { + margin: 0; +} + + </style> + <body> + <div>Portrait</div> + <div>Landscape</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-rule-specificity-003-print.html b/testing/web-platform/tests/css/css-page/page-rule-specificity-003-print.html new file mode 100644 index 0000000000..eda6c7ee51 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-specificity-003-print.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Paged Media: @page without selector provides defaults</title> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"/> + <link rel="help" href="https://drafts.csswg.org/css-page/#cascading-and-page-context"/> + <meta name="assert" content="@page rule without a selector list should apply to pages not matched by rules with selectors"> + <link rel="match" href="page-rule-specificity-print-portrait-ref.html"/> + <meta name="reftest-pages" content="2"> + <style> + +@page :first { + size: landscape; +} +@page { + size: portrait; +} +div:first-of-type { + break-after: page; +} +body { + margin: 0; +} + + </style> + <body> + <div>Landscape</div> + <div>Portrait</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-rule-specificity-print-landscape-ref.html b/testing/web-platform/tests/css/css-page/page-rule-specificity-print-landscape-ref.html new file mode 100644 index 0000000000..0e39390e8e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-specificity-print-landscape-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"/> + <style> + +body { + margin: 0; +} + + </style> + <body> + <div>Landscape</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-rule-specificity-print-portrait-ref.html b/testing/web-platform/tests/css/css-page/page-rule-specificity-print-portrait-ref.html new file mode 100644 index 0000000000..76ccfed10a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-rule-specificity-print-portrait-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <link rel="author" title="Jonathan Watt" href="mailto:jwatt@jwatt.org"/> + <style> + +@page :first { + size: portrait; +} +body { + margin: 0; +} + + </style> + <body> + <div>Portrait</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-size-000.xht b/testing/web-platform/tests/css/css-page/page-size-000.xht new file mode 100644 index 0000000000..568e127fe8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-000.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: Page Size - landscape</title> +<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> +<link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-page/#page-size"/> +<meta name="flags" content="paged" /> +<meta name="assert" content="The 'landscape' value of the 'size' property specifies that the page's content be printed in landscape orientation: the longer sides of the page box are horizontal."/> +<style type="text/css"> + + @page { + size:landscape; + } + +</style> +</head> +<body> + <div>This page must be printed in landscape orientation: the longer edges of the page must be horizontal.</div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-001.xht b/testing/web-platform/tests/css/css-page/page-size-001.xht new file mode 100644 index 0000000000..1b7ddb2d03 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-001.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: Page Size - portrait</title> +<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> +<link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-page/#page-size"/> +<meta name="flags" content="paged" /> +<meta name="assert" content="The 'portrait' value of the 'size' property specifies that the page's content be printed in portrait orientation: the shorter sides of the page box are horizontal."/> +<style type="text/css"> + + @page { + size:portrait; + } + +</style> +</head> +<body> + <div>This page must be printed in portrait orientation: the shorter edges of the page must be horizontal.</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-size-002.xht b/testing/web-platform/tests/css/css-page/page-size-002.xht new file mode 100644 index 0000000000..a96cd764bb --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-002.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size A5</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'A5' value of the 'size' property specifies that the page box's width be 148mm and its height 210mm."/> + <style type="text/css"><![CDATA[ + @page { + size: A5; + border: 2pt solid black; + margin: 20mm; + } + ]]></style> + </head> + <body> + <div>If A5 (148mm x 210mm) or larger paper is available, this content should be printed in a black box that has a width of 108mm and a height of 170mm.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-003.xht b/testing/web-platform/tests/css/css-page/page-size-003.xht new file mode 100644 index 0000000000..03d633c639 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-003.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size A4</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'A4' value of the 'size' property specifies that the page box's width be 210m and its height 297mm."/> + <style type="text/css"><![CDATA[ + @page { + size: A4; + border: 2pt solid black; + margin: 20mm; + } + ]]></style> + </head> + <body> + <div>If A4 (210mm x 297mm) or larger paper is available, this content should be printed in a black box that has a width of 170mm and a height of 257mm.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-004.xht b/testing/web-platform/tests/css/css-page/page-size-004.xht new file mode 100644 index 0000000000..205588eefa --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-004.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size A3</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'A3' value of the 'size' property specifies that the page box's width be 297mm and its height 420mm."/> + <style type="text/css"><![CDATA[ + @page { + size: A3; + border: 2pt solid black; + margin: 20mm; + } + ]]></style> + </head> + <body> + <div>If A3 (297mm x 420mm) or larger paper is available, this content should be printed in a black box that has a width of 257mm and a height of 380mm.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-005.xht b/testing/web-platform/tests/css/css-page/page-size-005.xht new file mode 100644 index 0000000000..1288f1c462 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-005.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size B5</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'B5' value of the 'size' property specifies that the page box's width be 176mm and its height 250mm."/> + <style type="text/css"><![CDATA[ + @page { + size: B5; + border: 2pt solid black; + margin: 20mm; + } + ]]></style> + </head> + <body> + <div>If B5 (176mm x 250mm) or larger paper is available, this content should be printed in a black box that has a width of 136mm and a height of 210mm.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-size-006.xht b/testing/web-platform/tests/css/css-page/page-size-006.xht new file mode 100644 index 0000000000..6488cc0efc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-006.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size B4</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'B4' value of the 'size' property specifies that the page box's width be 250mm and its height 353mm."/> + <style type="text/css"><![CDATA[ + @page { + size: B4; + border: 2pt solid black; + margin: 20mm; + } + ]]></style> + </head> + <body> + <div>If B4 (250mm x 353mm) or larger paper is available, this content should be printed in a black box that has a width of 210mm and a height of 313mm.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-007.xht b/testing/web-platform/tests/css/css-page/page-size-007.xht new file mode 100644 index 0000000000..fa1a72ea1e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-007.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size Letter</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'letter' value of the 'size' property specifies that the page box's width be 8.5in and its height 11in."/> + <style type="text/css"><![CDATA[ + @page { + size: letter; + border: 2pt solid black; + margin: 1in; + } + ]]></style> + </head> + <body> + <div>If letter-sized (8.5in x 11in) or larger paper is available, this content should be printed in a black box that has a width of 6.5 inches and a height of 9 inches.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-008.xht b/testing/web-platform/tests/css/css-page/page-size-008.xht new file mode 100644 index 0000000000..9903fb6c9e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-008.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size Legal</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'legal' value of the 'size' property specifies that the page box's width be 8.5in and its height 14in."/> + <style type="text/css"><![CDATA[ + @page { + size: legal; + border: 2pt solid black; + margin: 1in; + } + ]]></style> + </head> + <body> + <div>If legal-sized (8.5in x 14in) or larger paper is available, this content should be printed in a black box that has a width of 6.5 inches and a height of 12 inches.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-009.xht b/testing/web-platform/tests/css/css-page/page-size-009.xht new file mode 100644 index 0000000000..fb56cb6f2a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-009.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size Ledger</title> + <link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> + <link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> + <link rel="help" href="http://www.w3.org/TR/css3-page/#page-size-prop"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'ledger' value of the 'size' property specifies that the page box's width be 11in and its height 17in."/> + <style type="text/css"><![CDATA[ + @page { + size: ledger; + border: 2pt solid black; + margin: 2in; + } + ]]></style> + </head> + <body> + <div>If ledger-sized (11in x 17in) or larger paper is available, this content should be printed in a black box that has a width of 7 inches and a height of 13 inches.</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/page-size-010.xht b/testing/web-platform/tests/css/css-page/page-size-010.xht new file mode 100644 index 0000000000..27d21cc874 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-010.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Test: @page size smaller than paper</title> +<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com"/> +<link rel="author" title="Hewlett-Packard Company" href="http://www.hp.com/"/> +<link rel="help" href="http://www.w3.org/TR/css3-page/#page-size"/> +<meta name="flags" content="paged" /> +<meta name="assert" content="The computed value of the 'size' property is its specified value."/> +<meta name="assert" content="If the page box is smaller than the page size the user agent SHOULD either center the page box on the sheet or position the page box in the upper left corner of the page sheet." /> +<style type="text/css"> + @page { + margin: 0.5in; + border: 2pt solid black; + size: 3in 3in; + } +</style> +</head> +<body> + <p>When printed on paper 3 inches x 3 inches or larger, this content should appear in a box whose exterior dimensions are 2 inches x 2 inches. The box should either be centered on the page or positioned in the upper left corner.</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-size-011.xht b/testing/web-platform/tests/css/css-page/page-size-011.xht new file mode 100644 index 0000000000..6c9e3bcb11 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-011.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size JIS-B5</title> + <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#typedef-page-size-page-size"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'JIS-B5' value of the 'size' property specifies that the page box's width be 182mm and its height 257mm."/> + <style type="text/css"><![CDATA[ + @page { + size: JIS-B5; + border: 2pt solid black; + margin: 20mm; + } + ]]></style> + </head> + <body> + <div>If JIS B5 (182mm x 257mm) or larger paper is available, this content should be printed in a black box that has a width of 142mm and a height of 217mm.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/page-size-012.xht b/testing/web-platform/tests/css/css-page/page-size-012.xht new file mode 100644 index 0000000000..0def30ae45 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/page-size-012.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: @page size JIS-B4</title> + <link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#typedef-page-size-page-size"/> + <meta name="flags" content="paged" /> + <meta name="assert" content="The 'JIS-B4' value of the 'size' property specifies that the page box's width be 257mm and its height 364mm."/> + <style type="text/css"><![CDATA[ + @page { + size: JIS-B4; + border: 2pt solid black; + margin: 20mm; + } + ]]></style> + </head> + <body> + <div>If JIS B4 (257mm x 364mm) or larger paper is available, this content should be printed in a black box that has a width of 217mm and a height of 324mm.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/parsing/margin-rules-001.html b/testing/web-platform/tests/css/css-page/parsing/margin-rules-001.html new file mode 100644 index 0000000000..c4270fe606 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/margin-rules-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#margin-at-rules"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<style> +#test{ } +</style> +<script> +'use strict'; +test(t => { + const ruleTypes = [ + "@top-left-corner", + "@top-left", + "@top-center", + "@top-right", + "@top-right-corner", + "@bottom-left-corner", + "@bottom-left", + "@bottom-center", + "@bottom-right", + "@bottom-right-corner", + "@left-top", + "@left-middle", + "@left-bottom", + "@right-top", + "@right-middle", + "@right-bottom" + ]; + // Test that margin-rules are not valid at a top-level. + for(let t in ruleTypes){ + test_invalid_rule(ruleTypes[t] + "{ }"); + } + // Test that margin-rules are not valid in style rules. + assert_equals(document.styleSheets.length, 1); + let styleSheet = document.styleSheets[0]; + assert_equals(styleSheet.rules.length, 1); + let rule = styleSheet.rules[0]; + for(let t in ruleTypes){ + assert_throws_dom( + DOMException.SYNTAX_ERR, + () => rule.insertRule(ruleTypes[t] + "{ }"), + "Should not be able to add " + ruleTypes[t] + " to a style rule"); + } + // Test that margin-rules are valid inside page-rules. + for(let t in ruleTypes){ + test_valid_rule("@page { " + ruleTypes[t] + " { } }"); + } +}, "margin-rules-001"); +</script> diff --git a/testing/web-platform/tests/css/css-page/parsing/nested-rules-001.html b/testing/web-platform/tests/css/css-page/parsing/nested-rules-001.html new file mode 100644 index 0000000000..23c8eb0894 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/nested-rules-001.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#syntax-page-selector"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@page p0{ + @page a{ size: letter; } +} +@page p1{ + @namespace svg url(http://www.w3.org/2000/svg); +} +@page p2{ + @font-face{} +} +@page p3{ + @font-feature-values font one{} +} +@page p4{ + @font-palette-values --alternate{} +} +@page p5{ + @counter-style x{} +} +@page p6{ + @keyframes y{} +} +@page p7{ + @property z{ + syntax: "<color>"; + inherits: false; + initial-value: #c0ffee; + } +} +@page p8{ + @import url("style.css") screen; +} +</style> + +<script> +'use strict'; +test(t => { + assert_equals(document.styleSheets.length, 1); + let styleSheet = document.styleSheets[0]; + const ruleTypes = [ + "page", + "namespace", + "font-face", + "font-feature-values", + "font-palette-values", + "counter-style", + "keyframes", + "property", + "import" + ]; + assert_equals(styleSheet.rules.length, ruleTypes.length); + for(let i = 0; i < styleSheet.rules.length; i++){ + // Just test that this is the right rule first. + assert_equals(styleSheet.rules[i].selectorText, "p" + i, + "@page p" + i + " was not parsed at all"); + // Test that the nested rule was not valid. + assert_equals(styleSheet.rules[i].cssText, "@page p" + i + " { }", + "@" + ruleTypes[i] + " rules should not be allowed in @page rules"); + } +}, "nested-rules-001"); +</script> diff --git a/testing/web-platform/tests/css/css-page/parsing/page-computed.html b/testing/web-platform/tests/css/css-page/parsing/page-computed.html new file mode 100644 index 0000000000..0accba0574 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/page-computed.html @@ -0,0 +1,15 @@ +<!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/#using-named-pages"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="target"></div> +<script> + test_computed_value("page", "auto"); + test_computed_value("page", "AUTO", "auto"); + test_computed_value("page", "blablabla"); + test_computed_value("page", "BLABLABLA"); + test_computed_value("page", "table"); + test_computed_value("page", "TABLE"); +</script> diff --git a/testing/web-platform/tests/css/css-page/parsing/page-invalid.html b/testing/web-platform/tests/css/css-page/parsing/page-invalid.html new file mode 100644 index 0000000000..2c373a7d7f --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/page-invalid.html @@ -0,0 +1,13 @@ +<!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/#using-named-pages"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + test_invalid_value("page", "not valid"); + test_invalid_value("page", "not,valid"); + test_invalid_value("page", "123px"); + test_invalid_value("page", "calc(10%+1px)"); + test_invalid_value("page", "default"); +</script> diff --git a/testing/web-platform/tests/css/css-page/parsing/page-orientation-computed.tentative.html b/testing/web-platform/tests/css/css-page/parsing/page-orientation-computed.tentative.html new file mode 100644 index 0000000000..c9dd155f8c --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/page-orientation-computed.tentative.html @@ -0,0 +1,12 @@ +<!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-orientation-prop"> +<div id="elm" style="page-orientation:rotate-right;"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + assert_equals(getComputedStyle(elm).pageOrientation, ""); + }, "page-orientation is not a property (only a descriptor)"); +</script> + diff --git a/testing/web-platform/tests/css/css-page/parsing/page-orientation-invalid.tentative.html b/testing/web-platform/tests/css/css-page/parsing/page-orientation-invalid.tentative.html new file mode 100644 index 0000000000..e89b1f0917 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/page-orientation-invalid.tentative.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-orientation-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + // page-orientation is not a property. test_invalid_value() tries to specify + // it on an element, and this should fail, even when using a valid + // value. page-orientation is only valid as a descriptor inside an @page rule. + test_invalid_value("page-orientation", "hotpink"); + test_invalid_value("page-orientation", "upright"); + test_invalid_value("page-orientation", "rotate-left"); + test_invalid_value("page-orientation", "rotate-right"); +</script> diff --git a/testing/web-platform/tests/css/css-page/parsing/page-valid.html b/testing/web-platform/tests/css/css-page/parsing/page-valid.html new file mode 100644 index 0000000000..a4c31f5766 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/page-valid.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/#using-named-pages"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + test_valid_value("page", "auto"); + test_valid_value("page", "table"); + test_valid_value("page", "xyzabc"); +</script> diff --git a/testing/web-platform/tests/css/css-page/parsing/size-001.html b/testing/web-platform/tests/css/css-page/parsing/size-001.html new file mode 100644 index 0000000000..885a7b8530 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/size-001.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-size-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@page{ + size: 640px 480px; +} +@page{ + size: 8.5in 11in; +} +@page{ + size: A4; +} +@page{ + size: 3in 10in; +} +@page{ + size: jis-B5; +} +@page{ + size: auto; +} +@page{ + size: landscape; +} +@page{ + size: letter portrait; +} +@page{ + size: legal landscape; +} +</style> + +<script> +'use strict'; + +const expectedSizes = [ + "640px 480px", + "8.5in 11in", + "a4", + "3in 10in", + "jis-b5", + "auto", + "landscape", + "letter", + "legal landscape" +]; +const sizePrefix = "size: "; + +test(t => { + assert_equals(document.styleSheets.length, 1); + let styleSheet = document.styleSheets[0]; + assert_equals(styleSheet.rules.length, expectedSizes.length); + for(let i = 0; i < expectedSizes.length; i++){ + let cssText = styleSheet.cssRules[i].style.cssText; + assert_true(cssText.startsWith(sizePrefix)); + cssText = cssText.slice(sizePrefix.length); + assert_equals(cssText, expectedSizes[i] + ";", "for rule " + i); + } +}, "size-001"); +</script> diff --git a/testing/web-platform/tests/css/css-page/parsing/size-invalid.html b/testing/web-platform/tests/css/css-page/parsing/size-invalid.html new file mode 100644 index 0000000000..6e7c4a222d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/parsing/size-invalid.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#page-orientation-prop"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + // size is not a property, but a descriptor. test_invalid_value() tries to specify + // it on an element, and this should fail, even when using a valid + // value. size is only valid as a descriptor inside an @page rule. + test_invalid_value("size", "initial"); + test_invalid_value("size", "inherit"); + test_invalid_value("size", "revert"); + test_invalid_value("size", "revert-layer"); + test_invalid_value("size", "unset"); + test_invalid_value("size", "640px 480px"); + test_invalid_value("size", "8.5in 11in"); + test_invalid_value("size", "a4"); + test_invalid_value("size", "3in 10in"); + test_invalid_value("size", "jis-b5"); + test_invalid_value("size", "auto"); + test_invalid_value("size", "landscape"); + test_invalid_value("size", "letter"); + test_invalid_value("size", "legal landscape"); +</script> diff --git a/testing/web-platform/tests/css/css-page/pseudo-first-margin-001-print.html b/testing/web-platform/tests/css/css-page/pseudo-first-margin-001-print.html new file mode 100644 index 0000000000..c2c04514f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/pseudo-first-margin-001-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="pseudo-first-margin-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#first-pseudo"/> + <style> +@page :first { + margin: 1cm; +} +@page { + margin: 0; +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="page: a; border-color: lightblue"></div> + <div style="page: b; border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/pseudo-first-margin-002-print.html b/testing/web-platform/tests/css/css-page/pseudo-first-margin-002-print.html new file mode 100644 index 0000000000..a453b6ba32 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/pseudo-first-margin-002-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="pseudo-first-margin-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#first-pseudo"/> + <style> +@page b { + margin: 0; +} +@page a:first { + margin: 1cm; +} +@page :first { + margin: 2cm; +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="page: a; border-color: lightblue"></div> + <div style="page: b; border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/pseudo-first-margin-003-print.html b/testing/web-platform/tests/css/css-page/pseudo-first-margin-003-print.html new file mode 100644 index 0000000000..9bb953bfa0 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/pseudo-first-margin-003-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="pseudo-first-margin-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#first-pseudo"/> + <style> +@page :first { + margin: 2cm; +} +@page a { + margin: 1cm; +} +@page { + margin: 0; +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="page: a; border-color: lightblue"></div> + <div style="border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/pseudo-first-margin-004-print.html b/testing/web-platform/tests/css/css-page/pseudo-first-margin-004-print.html new file mode 100644 index 0000000000..34183e3b0e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/pseudo-first-margin-004-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <link rel="match" href="pseudo-first-margin-print-ref.html"/> + <link rel="help" href="https://www.w3.org/TR/css-page-3/#first-pseudo"/> + <style> +@page :first { + margin: 1cm; +} +@page a { + margin: 0; +} +div { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="border-color: lightblue"></div> + <div style="page: a; border-color: pink"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-page/pseudo-first-margin-print-ref.html b/testing/web-platform/tests/css/css-page/pseudo-first-margin-print-ref.html new file mode 100644 index 0000000000..a9c11c23f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/pseudo-first-margin-print-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> + <style> +@page { + margin: 0; +} +.block { + width: 1cm; + height: 1cm; + border: 2px solid red; +} + </style> + <body> + <div style="padding: 1cm; break-after: page"> + <div class="block" style="border-color: lightblue"></div> + </div> + <div style="padding: 0"> + <div class="block" style="border-color: pink"></div> + </div> + </body> +</html> + diff --git a/testing/web-platform/tests/css/css-page/reference/monolithic-overflow-4-pages-print-ref.html b/testing/web-platform/tests/css/css-page/reference/monolithic-overflow-4-pages-print-ref.html new file mode 100644 index 0000000000..c115782d6a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/reference/monolithic-overflow-4-pages-print-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="background:yellow;"> + <div style="width:50px; height:350vh; background:hotpink;"></div> + Yellow background, page 4. +</div> +White background, page 4. There should be a hotpink rectangle inside a yellow +block, starting at the first page, and ending right before the first piece of +text. diff --git a/testing/web-platform/tests/css/css-page/support/1x1-green.png b/testing/web-platform/tests/css/css-page/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/1x1-green.png diff --git a/testing/web-platform/tests/css/css-page/support/1x1-lime.png b/testing/web-platform/tests/css/css-page/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/css-page/support/1x1-maroon.png b/testing/web-platform/tests/css/css-page/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/css-page/support/1x1-navy.png b/testing/web-platform/tests/css/css-page/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/css-page/support/1x1-red.png b/testing/web-platform/tests/css/css-page/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-page/support/1x1-white.png b/testing/web-platform/tests/css/css-page/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/1x1-white.png diff --git a/testing/web-platform/tests/css/css-page/support/60x60-gg-rr.png b/testing/web-platform/tests/css/css-page/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/css-page/support/60x60-green.png b/testing/web-platform/tests/css/css-page/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/60x60-green.png diff --git a/testing/web-platform/tests/css/css-page/support/a-green.css b/testing/web-platform/tests/css/css-page/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/css-page/support/b-green.css b/testing/web-platform/tests/css/css-page/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/support/c-red.css b/testing/web-platform/tests/css/css-page/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-page/support/cat.png b/testing/web-platform/tests/css/css-page/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/cat.png diff --git a/testing/web-platform/tests/css/css-page/support/import-green.css b/testing/web-platform/tests/css/css-page/support/import-green.css new file mode 100644 index 0000000000..537104e663 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/import-green.css @@ -0,0 +1 @@ +.import { color: green; } diff --git a/testing/web-platform/tests/css/css-page/support/import-red.css b/testing/web-platform/tests/css/css-page/support/import-red.css new file mode 100644 index 0000000000..9945ef4711 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/import-red.css @@ -0,0 +1 @@ +.import { color: red; } diff --git a/testing/web-platform/tests/css/css-page/support/intrinsic-size.jpg b/testing/web-platform/tests/css/css-page/support/intrinsic-size.jpg Binary files differnew file mode 100644 index 0000000000..b634fd1821 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/intrinsic-size.jpg diff --git a/testing/web-platform/tests/css/css-page/support/intrinsic-size.png b/testing/web-platform/tests/css/css-page/support/intrinsic-size.png Binary files differnew file mode 100644 index 0000000000..833e6e36cd --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/intrinsic-size.png diff --git a/testing/web-platform/tests/css/css-page/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/css-page/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..6fcfeb4883 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/css-page/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/css-page/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/css-page/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/css-page/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..db8ed5cf7b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/css-page/support/pattern-tr.png b/testing/web-platform/tests/css/css-page/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/css-page/support/square-purple.png b/testing/web-platform/tests/css/css-page/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/square-purple.png diff --git a/testing/web-platform/tests/css/css-page/support/square-teal.png b/testing/web-platform/tests/css/css-page/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/square-teal.png diff --git a/testing/web-platform/tests/css/css-page/support/square-white.png b/testing/web-platform/tests/css/css-page/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/square-white.png diff --git a/testing/web-platform/tests/css/css-page/support/swatch-blue.png b/testing/web-platform/tests/css/css-page/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/css-page/support/swatch-green.png b/testing/web-platform/tests/css/css-page/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/swatch-green.png diff --git a/testing/web-platform/tests/css/css-page/support/swatch-lime.png b/testing/web-platform/tests/css/css-page/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/css-page/support/swatch-orange.png b/testing/web-platform/tests/css/css-page/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/css-page/support/swatch-red.png b/testing/web-platform/tests/css/css-page/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/swatch-red.png diff --git a/testing/web-platform/tests/css/css-page/support/swatch-white.png b/testing/web-platform/tests/css/css-page/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/swatch-white.png diff --git a/testing/web-platform/tests/css/css-page/support/swatch-yellow.png b/testing/web-platform/tests/css/css-page/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/css-page/support/test-bl.png b/testing/web-platform/tests/css/css-page/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/test-bl.png diff --git a/testing/web-platform/tests/css/css-page/support/test-br.png b/testing/web-platform/tests/css/css-page/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/test-br.png diff --git a/testing/web-platform/tests/css/css-page/support/test-outer.png b/testing/web-platform/tests/css/css-page/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/test-outer.png diff --git a/testing/web-platform/tests/css/css-page/support/test-tl.png b/testing/web-platform/tests/css/css-page/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/test-tl.png diff --git a/testing/web-platform/tests/css/css-page/support/test-tr.png b/testing/web-platform/tests/css/css-page/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/css-page/support/test-tr.png diff --git a/testing/web-platform/tests/css/css-page/trailing-declaration-crash.html b/testing/web-platform/tests/css/css-page/trailing-declaration-crash.html new file mode 100644 index 0000000000..54b9a13220 --- /dev/null +++ b/testing/web-platform/tests/css/css-page/trailing-declaration-crash.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>CSS Page: Crash with trailing declarations</title> +<style> + @page { + @top-center {} + size: 500px; + } +</style> |
