diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 17:32:43 +0000 |
| commit | 6bf0a5cb5034a7e684dcc3500e841785237ce2dd (patch) | |
| tree | a68f146d7fa01f0134297619fbe7e33db084e0aa /testing/web-platform/tests/css/printing | |
| parent | Initial commit. (diff) | |
| download | thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.tar.xz thunderbird-6bf0a5cb5034a7e684dcc3500e841785237ce2dd.zip | |
Adding upstream version 1:115.7.0.upstream/1%115.7.0upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/printing')
94 files changed, 1512 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/printing/animated-image-print-image-orientation-none.html b/testing/web-platform/tests/css/printing/animated-image-print-image-orientation-none.html new file mode 100644 index 0000000000..d5ec1a8e23 --- /dev/null +++ b/testing/web-platform/tests/css/printing/animated-image-print-image-orientation-none.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>Printing animated image</title> +<link rel="help" href="https://html.spec.whatwg.org/#the-img-element"> +<link rel="mismatch" href="/css/reference/blank.html"> +<img style="image-orientation: none" src="/images/anim-gr.gif"> diff --git a/testing/web-platform/tests/css/printing/animated-image-print.html b/testing/web-platform/tests/css/printing/animated-image-print.html new file mode 100644 index 0000000000..7c7665366d --- /dev/null +++ b/testing/web-platform/tests/css/printing/animated-image-print.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>Printing animated image</title> +<link rel="help" href="https://html.spec.whatwg.org/#the-img-element"> +<link rel="mismatch" href="/css/reference/blank.html"> +<img src="/images/anim-gr.gif"> diff --git a/testing/web-platform/tests/css/printing/animations-print-ref.html b/testing/web-platform/tests/css/printing/animations-print-ref.html new file mode 100644 index 0000000000..8830913084 --- /dev/null +++ b/testing/web-platform/tests/css/printing/animations-print-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<title>Static CSS animation</title> +<style> + +p { + color: blue; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/testing/web-platform/tests/css/printing/animations-print.html b/testing/web-platform/tests/css/printing/animations-print.html new file mode 100644 index 0000000000..8839fd971e --- /dev/null +++ b/testing/web-platform/tests/css/printing/animations-print.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<link rel="help" href="https://drafts.csswg.org/css-animations/"> +<link rel="match" href="animations-print-ref.html"> +<title>Static CSS animation</title> +<style> + +@keyframes a { + from, to { color: blue } +} + +p { + color: olive; + animation: a 1s infinite; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/testing/web-platform/tests/css/printing/animations-shadow-print-ref.html b/testing/web-platform/tests/css/printing/animations-shadow-print-ref.html new file mode 100644 index 0000000000..60daae78bf --- /dev/null +++ b/testing/web-platform/tests/css/printing/animations-shadow-print-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE HTML> +<html> +<title>Static CSS animation in Shadow DOM</title> +<p style="color: blue">blue with animation support; olive without</p> +<p style="color: orange">orange with animation support; olive without</p> diff --git a/testing/web-platform/tests/css/printing/animations-shadow-print.html b/testing/web-platform/tests/css/printing/animations-shadow-print.html new file mode 100644 index 0000000000..0e80e9c45c --- /dev/null +++ b/testing/web-platform/tests/css/printing/animations-shadow-print.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html> +<link rel="help" href="https://drafts.csswg.org/css-animations/"> +<link rel="match" href="animations-shadow-print-ref.html"> +<title>Static CSS animation in Shadow DOM</title> +<style> + +@keyframes a { + from, to { color: blue } +} + +.anim { + color: olive; + animation: a 1s infinite; +} + +</style> +<p class="anim">blue with animation support; olive without</p> +<div id="holder"></div> +<script> +let shadow_style = style = document.createElement("style"); +shadow_style.textContent = "@keyframes shadow_a { from, to { color: orange } }"; + +let shadow = document.getElementById("holder").attachShadow({mode:"open"}); +let shadow_p = document.createElement("p"); + +shadow_p.style.color = "olive"; +shadow_p.style.animation = "shadow_a 1s infinite"; +shadow_p.innerHTML = "orange with animation support; olive without"; +shadow.appendChild(shadow_style); +shadow.appendChild(shadow_p); +</script> diff --git a/testing/web-platform/tests/css/printing/background-image-print-ref.html b/testing/web-platform/tests/css/printing/background-image-print-ref.html new file mode 100644 index 0000000000..305aa2fce2 --- /dev/null +++ b/testing/web-platform/tests/css/printing/background-image-print-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1769429"> +<style> + body { + font-family: century; + font-weight: bold; + color: black; + print-color-adjust: exact; + } + .tile { + width: 16px; + height: 16px; + background-repeat: no-repeat; + } + .white { background: white } + .magenta { background: magenta } + .lime { background: lime } + .cyan { background: cyan } + .blue { background: blue } + .red { background: red } + .green { background: green } + .gray { background: gray } + .yellow { background: yellow } +</style> +</head> +<body> + <div class="tile white"></div> + <div class="tile magenta"></div> + <div class="tile lime"></div> + <div class="tile cyan"></div> + <div class="tile blue"></div> + <div class="tile red"></div> + <div class="tile green"></div> + <div class="tile gray"></div> + <div class="tile yellow"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/printing/background-image-print.html b/testing/web-platform/tests/css/printing/background-image-print.html new file mode 100644 index 0000000000..8d29410740 --- /dev/null +++ b/testing/web-platform/tests/css/printing/background-image-print.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>test-case.html</title> +<link rel="match" href="background-image-print-ref.html"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1769429"> +<meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-400"> +<style> + body { + font-family: century; + font-weight: bold; + color: black; + print-color-adjust: exact; + } + .tile { + width: 16px; + height: 16px; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gcMEDohgdlcwAAAAL1JREFUeNrt29ENgCAMRdFi2Ns6eR1CkxfjuQtAegJfsGZmKtmq7PKT3cBRAgBAAAAIAAABACAAAAQAgAAAEAAAAgBAAAAIAAABACAAAAQAgAAA0OP2+vkAwt8DnABXEAABACAAAAQAgAAAEAAAAgBAAAAIAAABACAAAAQAgAAAEAAAAgBAb7Tryj6Q7+7sBE4nwBUkAAAEAIAAABAAAAIAQAAACAAAAQAgAAAEAIAAABAAAAIAQAAACMDnuwGcQwlEUW+eJgAAAABJRU5ErkJggg=="); + background-repeat: no-repeat; + } + .white { background-position: -2px -2px } + .magenta { background-position: -34px -2px } + .lime { background-position: -66px -2px } + .cyan { background-position: -2px -34px } + .blue { background-position: -34px -34px } + .red { background-position: -66px -34px } + .green { background-position: -2px -66px } + .gray { background-position: -34px -66px } + .yellow { background-position: -66px -66px } +</style> +</head> +<body> + <div class="tile white"></div> + <div class="tile magenta"></div> + <div class="tile lime"></div> + <div class="tile cyan"></div> + <div class="tile blue"></div> + <div class="tile red"></div> + <div class="tile green"></div> + <div class="tile gray"></div> + <div class="tile yellow"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/printing/emoji-print.html b/testing/web-platform/tests/css/printing/emoji-print.html new file mode 100644 index 0000000000..689c337acb --- /dev/null +++ b/testing/web-platform/tests/css/printing/emoji-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>test that emoji are not blank in print output</title> + <meta name="assert" content="emoji characters should be visible when printed"> + <link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1723787"> + <link rel="mismatch" href="/css/reference/blank.html"> +</head> +<body> + <p> + <span>😀😁😂😃</span> + </p> +</body> +</html> diff --git a/testing/web-platform/tests/css/printing/existing-transition-in-media-print.tentative.html b/testing/web-platform/tests/css/printing/existing-transition-in-media-print.tentative.html new file mode 100644 index 0000000000..3b83bdd5b0 --- /dev/null +++ b/testing/web-platform/tests/css/printing/existing-transition-in-media-print.tentative.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>Printing with a transition that could trigger as a result of @media print</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8012"> +<link rel="match" href="transition-in-media-print-ref.html"> +<style> +#target { + transition-duration: 100000s; + print-color-adjust: exact; +} +#target:not(.print) { + color: red; +} +</style> +<div id="target"> + Should not be red +</div> +<script> + let target = document.getElementById("target"); + target.getBoundingClientRect(); + target.classList.add("print"); +</script> diff --git a/testing/web-platform/tests/css/printing/fixedpos-001-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-001-print-ref.html new file mode 100644 index 0000000000..3d66305db0 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-001-print-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-001-print.html b/testing/web-platform/tests/css/printing/fixedpos-001-print.html new file mode 100644 index 0000000000..04feb96e84 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-001-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-001-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:fixed; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; height:300vh;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-002-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-002-print-ref.html new file mode 100644 index 0000000000..3d66305db0 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-002-print-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-002-print.html b/testing/web-platform/tests/css/printing/fixedpos-002-print.html new file mode 100644 index 0000000000..c23c6be7d2 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-002-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-002-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; height:300vh;"> + There should be three pages. + <div style="position:fixed; bottom:0;"> + This should repeat on every page. + </div> +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-003-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-003-print-ref.html new file mode 100644 index 0000000000..3d66305db0 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-003-print-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-003-print.html b/testing/web-platform/tests/css/printing/fixedpos-003-print.html new file mode 100644 index 0000000000..1b06257175 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-003-print.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-003-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:300vh;"> + There should be three pages. +</div> +<div style="position:fixed; bottom:0;"> + This should repeat on every page. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-004-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-004-print-ref.html new file mode 100644 index 0000000000..3e3473bcb8 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-004-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:0;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; top:0;"> + There should be three pages. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-004-print.html b/testing/web-platform/tests/css/printing/fixedpos-004-print.html new file mode 100644 index 0000000000..c138e9cd6a --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-004-print.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-004-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:fixed; bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute;"> + There should be three pages. + <div style="position:absolute; top:0; height:300vh;"> + <div style="position:fixed; bottom:0;"> + This should also repeat on every page. + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-005-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-005-print-ref.html new file mode 100644 index 0000000000..e692ff8db3 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-005-print-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh; margin-bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:0;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh;"> + This should also repeat on every page. +</div> +<div style="height:100vh;"> + There should be five pages. +</div> +<div style="height:300vh;"> + This should be on the second page. +</div> +This should be on the fifth page. diff --git a/testing/web-platform/tests/css/printing/fixedpos-005-print.html b/testing/web-platform/tests/css/printing/fixedpos-005-print.html new file mode 100644 index 0000000000..0a2edc7178 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-005-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-005-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:300vh;"> + There should be five pages. +</div> +<div style="position:fixed; bottom:2em;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be on the second page. + <div style="position:fixed; bottom:0;"> + This should also repeat on every page. + </div> + <div style="position:absolute; top:300vh;"> + This should be on the fifth page. + </div> +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-006-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-006-print-ref.html new file mode 100644 index 0000000000..b03e1d78d0 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-006-print-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="position:absolute; bottom:0; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh; margin-bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; bottom:0; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh; margin-bottom:2em;"> + This should also repeat on every page. +</div> +<div style="position:absolute; bottom:0;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-300vh;"> + Even this should repeat on every page. +</div> +<div style="position:absolute; bottom:-400vh;"> + Even this should repeat on every page. +</div> +<div style="height:100vh;"> + There should be five pages. +</div> +<div style="height:100vh;"> + This should be on the second page. +</div> +This should be on the third page. diff --git a/testing/web-platform/tests/css/printing/fixedpos-006-print.html b/testing/web-platform/tests/css/printing/fixedpos-006-print.html new file mode 100644 index 0000000000..2386c166c8 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-006-print.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-006-print-ref.html"> +<style> + body { margin: 0; } +</style> +There should be five pages. +<div style="position:fixed; bottom:4em;"> + This should repeat on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be on the second page. + <div style="position:fixed; bottom:2em;"> + This should also repeat on every page. + </div> + <div style="position:absolute; top:100vh; height:300vh;"> + This should be on the third page. + <div style="position:fixed; bottom:0;"> + Even this should repeat on every page. + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-007-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-007-print-ref.html new file mode 100644 index 0000000000..f576c93771 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-007-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be three pages. +</div> +<div style="position:absolute; top:0;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:200vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:0; margin-top:2em;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; top:100vh; margin-top:2em;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; top:200vh; margin-top:2em;"> + This should also be repeated on every page. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-007-print.html b/testing/web-platform/tests/css/printing/fixedpos-007-print.html new file mode 100644 index 0000000000..8dcb700b96 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-007-print.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-007-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be three pages. +</div> +<div style="position:absolute; top:50vh;"> + <div style="height:250vh;"></div> + <div style="position:fixed; top:0;"> + This should be repeated on every page. + </div> +</div> +<div style="position:fixed; top:2em;"> + This should also be repeated on every page. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-008-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-008-print-ref.html new file mode 100644 index 0000000000..6ed2528115 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-008-print-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be six pages. +</div> +<div style="position:absolute; top:0;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:100vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:200vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:300vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:400vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:500vh;"> + This should be repeated on every page. +</div> +<div style="position:absolute; bottom:0;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-100vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-200vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-300vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-400vh;"> + This should also be repeated on every page. +</div> +<div style="position:absolute; bottom:-500vh;"> + This should also be repeated on every page. +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-008-print.html b/testing/web-platform/tests/css/printing/fixedpos-008-print.html new file mode 100644 index 0000000000..02b5d63cc7 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-008-print.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1399456"> +<link rel="match" href="fixedpos-008-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="margin-top:4em;"> + There should be six pages. +</div> +<div style="position:fixed; top:0;"> + This should be repeated on every page. +</div> +<div style="position:absolute; top:50vh;"> + <div style="height:250vh;"></div> + <div style="position:absolute; top:0;"> + <div style="position:absolute; top:500vh; height:10px;"> + <div style="position:fixed; bottom:0;"> + This should also be repeated on every page. + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print-ref.html new file mode 100644 index 0000000000..000c05350b --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { + margin: 0; + } +</style> +<a href="/">This should be on every page (3 pages).<br>This too.</a> +<div style="break-before:page;"></div> +<a href="/">This should be on every page (3 pages).<br>This too.</a> +<div style="break-before:page;"></div> +<a href="/">This should be on every page (3 pages).<br>This too.</a> + diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print.html b/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print.html new file mode 100644 index 0000000000..057ddc9146 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-with-abspos-with-link-print.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1402156"> +<link rel="match" href="fixedpos-with-abspos-with-link-print-ref.html"> +<style> + body { + margin: 0; + height: 250vh; + } +</style> +<div style="position:fixed;"> + <div style="position:absolute; width:max-content;"> + <a href="/">This should be on every page (3 pages).<br>This too.</a> + </div> +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print-ref.html new file mode 100644 index 0000000000..5c17140450 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>The word "PASS" should be seen below.</p> +<div style="position:absolute; background:blue;"> + <iframe src="data:text/html,PASS" style="width:8em; height:3em; background:yellow;"></iframe> +</div> +<p style="break-before:page;"> + Apart from this text, there should be nothing on this page. +</p> + diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print.html b/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print.html new file mode 100644 index 0000000000..5102d045c4 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-with-iframe-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414873"> +<link rel="match" href="fixedpos-with-iframe-print-ref.html"> +<p>The word "PASS" should be seen below.</p> +<div style="position:fixed; background:blue;"> + <iframe src="data:text/html,PASS" style="width:8em; height:3em; background:yellow;"></iframe> +</div> +<p style="break-before:page; position:relative; z-index:1; height:8em; background:white;"> + Apart from this text, there should be nothing on this page. +</p> + diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print-ref.html b/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print-ref.html new file mode 100644 index 0000000000..f12d31acd9 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> + body { margin: 0; } +</style> +<div> + <a href="/">Link <span>should be seen</span> on both pages.</a> +</div> +<div style="break-before:page;"> + <a href="/">Link <span>should be seen</span> on both pages.</a> +</div> diff --git a/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print.html b/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print.html new file mode 100644 index 0000000000..694e5376cb --- /dev/null +++ b/testing/web-platform/tests/css/printing/fixedpos-with-link-with-inline-child-print.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1373172"> +<link rel="match" href="fixedpos-with-link-with-inline-child-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:fixed;"> + <a href="/">Link <span>should be seen</span> on both pages.</a> +</div> +<div style="break-before:page; height:10px;"></div> +<div style="break-before:page; height:10px;"></div> diff --git a/testing/web-platform/tests/css/printing/fragmented-inline-block-001-print.html b/testing/web-platform/tests/css/printing/fragmented-inline-block-001-print.html new file mode 100644 index 0000000000..848635431e --- /dev/null +++ b/testing/web-platform/tests/css/printing/fragmented-inline-block-001-print.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>test that inline-blocks are fragmented in print output</title> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740304"> + <meta name="reftest-pages" content="10"> + <link rel="mismatch" href="/css/reference/blank.html"> + <style> + .inline-block { + display: inline-block; + } + li { height: 1in; } + </style> +</head> +<body> + <!-- This test is expecting there to be content on page 10, as a + regression-test for a bug where each page was progressively + more-clipped, which caused later pages (e.g. page 10) to be fully-blank. + In this testcase, we have 40 1-inch-tall numbered list-items, which + collectively are 40 inches tall. This is tall enough to ensure that + we'll have at least 10 pages, given that our pages are each 3 inches + tall. --> + <div class="inline-block"> + <ol> + <li><li><li><li><li><li><li><li><li><li> + <li><li><li><li><li><li><li><li><li><li> + <li><li><li><li><li><li><li><li><li><li> + <li><li><li><li><li><li><li><li><li><li> + </ol> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/printing/fragmented-inline-block-002-print-ref.html b/testing/web-platform/tests/css/printing/fragmented-inline-block-002-print-ref.html new file mode 100644 index 0000000000..dcfa3a1385 --- /dev/null +++ b/testing/web-platform/tests/css/printing/fragmented-inline-block-002-print-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Reference Case</title> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740304"> + <style> + .tall { + height: 10in; + width: 1in; + border: 0.5in solid black; + } + </style> +</head> +<body> + <div class="tall"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/printing/fragmented-inline-block-002-print.html b/testing/web-platform/tests/css/printing/fragmented-inline-block-002-print.html new file mode 100644 index 0000000000..c5390aad6c --- /dev/null +++ b/testing/web-platform/tests/css/printing/fragmented-inline-block-002-print.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>test that inline-blocks are fragmented in print output</title> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1740304"> + <link rel="match" href="fragmented-inline-block-002-print-ref.html"> + <style> + .tall { + /* The reference case has a block; we have an inline-block. + Given that there's no other content on our line, we can expect our + inline-block to end up rendering and fragmenting like the + reference case's block. */ + display: inline-block; + + height: 10in; + width: 1in; + border: 0.5in solid black; + } + </style> +</head> +<body> + <div class="tall"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/printing/input-file-print-ref.html b/testing/web-platform/tests/css/printing/input-file-print-ref.html new file mode 100644 index 0000000000..fb5255eddb --- /dev/null +++ b/testing/web-platform/tests/css/printing/input-file-print-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <title>Reference case</title> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=133984"> + <style> + input[type="file"] { height: auto; } + .with-outline { + outline: 2px solid teal; + } + .wrapper { + border: 2px solid fuchsia; + } + </style> +</head> +<body> + <input type="file"> + <br><br> + <input type="file" class="with-outline"> + <br><br> + <div class="wrapper"><input type="file"></div> +</body> diff --git a/testing/web-platform/tests/css/printing/input-file-print.html b/testing/web-platform/tests/css/printing/input-file-print.html new file mode 100644 index 0000000000..a070024463 --- /dev/null +++ b/testing/web-platform/tests/css/printing/input-file-print.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<head> + <meta charset="utf-8"> + <title>Test that file-input widgets have 'auto' height (not some other arbitrary value) when printed</title> + <meta name="assert" content="file-input widgets should have 'auto' height (not some other arbitrary value) when printed"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=133984"> + <link rel="match" href="input-file-print-ref.html"> + <style> + .with-outline { + outline: 2px solid teal; + } + .wrapper { + border: 2px solid fuchsia; + } + </style> +</head> +<body> + <input type="file"> + <br><br> + <input type="file" class="with-outline"> + <br><br> + <div class="wrapper"><input type="file"></div> +</body> diff --git a/testing/web-platform/tests/css/printing/monolithic-overflow-001-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-001-print-ref.html new file mode 100644 index 0000000000..9edc5d9ed0 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-001-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-001-print.html new file mode 100644 index 0000000000..f4121c3422 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-002-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-002-print-ref.html new file mode 100644 index 0000000000..5478362b06 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-002-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-002-print.html new file mode 100644 index 0000000000..8f76af16a9 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-003-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-003-print.html new file mode 100644 index 0000000000..76905b180a --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-004-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-004-print.html new file mode 100644 index 0000000000..ea5a659bd8 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-005-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-005-print.html new file mode 100644 index 0000000000..bb0fc212fc --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-006-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-006-print.html new file mode 100644 index 0000000000..1cbcdbbe1e --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-007-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-007-print.html new file mode 100644 index 0000000000..14a6f051fe --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-008-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-008-print.html new file mode 100644 index 0000000000..ff302dc30c --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-009-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-009-print.html new file mode 100644 index 0000000000..bdff66e791 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-010-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-010-print.html new file mode 100644 index 0000000000..a75c932d30 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-011-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-011-print.html new file mode 100644 index 0000000000..973a3aff4d --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-012-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-012-print-ref.html new file mode 100644 index 0000000000..e47ca880f9 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-012-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-012-print.html new file mode 100644 index 0000000000..53ed74bc72 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-013-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-013-print-ref.html new file mode 100644 index 0000000000..e47ca880f9 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-013-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-013-print.html new file mode 100644 index 0000000000..b9a174879d --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-014-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-014-print-ref.html new file mode 100644 index 0000000000..a74e0d19a5 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-014-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-014-print.html new file mode 100644 index 0000000000..d12ddf4c68 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-015-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-015-print-ref.html new file mode 100644 index 0000000000..db44a3ee21 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-015-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-015-print.html new file mode 100644 index 0000000000..d52605605c --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-016-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-016-print-ref.html new file mode 100644 index 0000000000..a675fb966c --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-016-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-016-print.html new file mode 100644 index 0000000000..029523e924 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-017-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-017-print-ref.html new file mode 100644 index 0000000000..45f839787e --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-017-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-017-print.html new file mode 100644 index 0000000000..c8ce9060ff --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-018-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-018-print-ref.html new file mode 100644 index 0000000000..cf31737d6c --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-018-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-018-print.html new file mode 100644 index 0000000000..93da11dc62 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-019-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-019-print-ref.html new file mode 100644 index 0000000000..f37740ae7e --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-019-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-019-print.html new file mode 100644 index 0000000000..3740b5d5b0 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-020-print-ref.html b/testing/web-platform/tests/css/printing/monolithic-overflow-020-print-ref.html new file mode 100644 index 0000000000..528c4980de --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/monolithic-overflow-020-print.html b/testing/web-platform/tests/css/printing/monolithic-overflow-020-print.html new file mode 100644 index 0000000000..403d932d64 --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/no-resize-event-print.html b/testing/web-platform/tests/css/printing/no-resize-event-print.html new file mode 100644 index 0000000000..85a44b556c --- /dev/null +++ b/testing/web-platform/tests/css/printing/no-resize-event-print.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>No resize event on the original page when printing</title> +<link rel="help" href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-print"> +<link rel="match" href="no-resize-event-ref.html"> +<div id="target">PASS</div> +<script> +window.addEventListener("resize", function() { + document.getElementById("target").innerHTML = `FAIL: ${window.innerWidth}x${window.innerHeight}`; +}) +</script> diff --git a/testing/web-platform/tests/css/printing/no-resize-event-ref.html b/testing/web-platform/tests/css/printing/no-resize-event-ref.html new file mode 100644 index 0000000000..1fc00e7e39 --- /dev/null +++ b/testing/web-platform/tests/css/printing/no-resize-event-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<div>PASS</div> diff --git a/testing/web-platform/tests/css/printing/page-name-001-print-ref.html b/testing/web-platform/tests/css/printing/page-name-001-print-ref.html new file mode 100644 index 0000000000..69c5c37b5a --- /dev/null +++ b/testing/web-platform/tests/css/printing/page-name-001-print-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<div style="float:left;">First page</div> +<div style="clear:both;">Also first page</div> +<div style="break-before:page;">Second page</div> diff --git a/testing/web-platform/tests/css/printing/page-name-001-print.html b/testing/web-platform/tests/css/printing/page-name-001-print.html new file mode 100644 index 0000000000..56281bb4ed --- /dev/null +++ b/testing/web-platform/tests/css/printing/page-name-001-print.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#using-named-pages"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414718"> +<link rel="match" href="page-name-001-print-ref.html"> +<div style="page:foo;"> + <div style="float:left;">First page</div> + <div style="clear:both;">Also first page</div> + <div style="page:bar;">Second page</div> +</div> diff --git a/testing/web-platform/tests/css/printing/page-name-002-print-ref.html b/testing/web-platform/tests/css/printing/page-name-002-print-ref.html new file mode 100644 index 0000000000..17ecc93e57 --- /dev/null +++ b/testing/web-platform/tests/css/printing/page-name-002-print-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +1st page +<div style="break-before:page;"> + 2nd page +</div> +<div style="break-before:page;"> + 3rd page<br> + Also 3rd page +</div> +<div style="break-before:page;"> + 4th page +</div> +<div style="break-before:page;"> + 5th page +</div> +<div style="break-before:page;"> + 6th page +</div> +<div style="break-before:page;"> + 7th page<br> + Also 7th page<br> +</div> +<div style="break-before:page;"> + 8th page +</div> diff --git a/testing/web-platform/tests/css/printing/page-name-002-print.html b/testing/web-platform/tests/css/printing/page-name-002-print.html new file mode 100644 index 0000000000..060b93b0bf --- /dev/null +++ b/testing/web-platform/tests/css/printing/page-name-002-print.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#using-named-pages"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1421421"> +<link rel="match" href="page-name-002-print-ref.html"> +<div style="page:a;">1st page</div> +<div style="page:a;"> + <div style="page:b;">2nd page</div> + 3rd page +</div> +<div style="page:a;">Also 3rd page</div> +4th page +<div style="page:a;">5th page</div> +<div style="page:a;"> + <div> + <div style="page:b;">6th page</div> + 7th page + </div> + Also 7th page +</div> +8th page diff --git a/testing/web-platform/tests/css/printing/page-name-003-print-ref.html b/testing/web-platform/tests/css/printing/page-name-003-print-ref.html new file mode 100644 index 0000000000..52ea6bfffc --- /dev/null +++ b/testing/web-platform/tests/css/printing/page-name-003-print-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +1st page +<div style="break-before:page;"> + 2nd page +</div> diff --git a/testing/web-platform/tests/css/printing/page-name-003-print.html b/testing/web-platform/tests/css/printing/page-name-003-print.html new file mode 100644 index 0000000000..9ef4db8c75 --- /dev/null +++ b/testing/web-platform/tests/css/printing/page-name-003-print.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-page-3/#using-named-pages"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1428011"> +<link rel="match" href="page-name-003-print-ref.html"> +<div style="position:absolute;"> + <div style="page:a;">1st page</div> + <div style="page:b;">2nd page</div> +</div> diff --git a/testing/web-platform/tests/css/printing/page-overflow-crash-print.html b/testing/web-platform/tests/css/printing/page-overflow-crash-print.html new file mode 100644 index 0000000000..e295c569d2 --- /dev/null +++ b/testing/web-platform/tests/css/printing/page-overflow-crash-print.html @@ -0,0 +1,13 @@ +<!-- quirks --> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1697291"> +<!-- Really a crashtest but since we can't really have print crashtests, we assert that we print something --> +<link rel="mismatch" href="/css/reference/blank.html"> +<style> +* { + offset-path: path('M 1 7 H 1 V -1 H -1 L 1 0'); +} +#a { + offset-anchor: 0px 0px; +} +</style> +<details id="a"> diff --git a/testing/web-platform/tests/css/printing/paused-animations-print-ref.html b/testing/web-platform/tests/css/printing/paused-animations-print-ref.html new file mode 100644 index 0000000000..c22ecd1745 --- /dev/null +++ b/testing/web-platform/tests/css/printing/paused-animations-print-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE HTML> +<html> +<title>Paused CSS animation</title> +<p style="color: blue">blue with animation support; olive without</p> diff --git a/testing/web-platform/tests/css/printing/paused-animations-print.html b/testing/web-platform/tests/css/printing/paused-animations-print.html new file mode 100644 index 0000000000..03ef1bab3c --- /dev/null +++ b/testing/web-platform/tests/css/printing/paused-animations-print.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<link rel="help" href="https://drafts.csswg.org/css-animations/"> +<link rel="match" href="paused-animations-print-ref.html"> +<title>Paused CSS animation</title> +<style> + +@keyframes a { + from, to { color: blue; } +} + +p { + color: olive; + animation: a 1s infinite; +} + +</style> +<p id="anim">blue with animation support; olive without</p> +<script> +let element = document.getElementById("anim"); +element.style.animationPlayState = "paused"; +</script> diff --git a/testing/web-platform/tests/css/printing/pseudo-animations-print-ref.html b/testing/web-platform/tests/css/printing/pseudo-animations-print-ref.html new file mode 100644 index 0000000000..07107d1db7 --- /dev/null +++ b/testing/web-platform/tests/css/printing/pseudo-animations-print-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<title>Static CSS animation</title> +<style> + +p { + color: blue; +} + +p::after { + content: "(::after)"; +} + +p::before { + content: "(::before)"; +} +</style> +<p>blue with animation support; olive without</p> diff --git a/testing/web-platform/tests/css/printing/pseudo-animations-print.html b/testing/web-platform/tests/css/printing/pseudo-animations-print.html new file mode 100644 index 0000000000..40585ba2c4 --- /dev/null +++ b/testing/web-platform/tests/css/printing/pseudo-animations-print.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<link rel="help" href="https://drafts.csswg.org/css-animations/"> +<link rel="match" href="pseudo-animations-print-ref.html"> +<title>Static CSS animation</title> +<style> + +@keyframes a { + from, to { color: blue } +} + +p { + color: olive; + animation: a 1s infinite; +} +p::after { + color: purple; + content: "(::after)"; + animation: a 1s infinite; +} + +p::before { + color: yellow; + content: "(::before)"; + animation: a 1s infinite; +} + +</style> +<p>blue with animation support; olive without</p> diff --git a/testing/web-platform/tests/css/printing/reference/monolithic-overflow-4-pages-print-ref.html b/testing/web-platform/tests/css/printing/reference/monolithic-overflow-4-pages-print-ref.html new file mode 100644 index 0000000000..c115782d6a --- /dev/null +++ b/testing/web-platform/tests/css/printing/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/printing/transform-001-print-ref.html b/testing/web-platform/tests/css/printing/transform-001-print-ref.html new file mode 100644 index 0000000000..45c3abf181 --- /dev/null +++ b/testing/web-platform/tests/css/printing/transform-001-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:500vh;"> + There should be 5 pages. +</div> diff --git a/testing/web-platform/tests/css/printing/transform-001-print.html b/testing/web-platform/tests/css/printing/transform-001-print.html new file mode 100644 index 0000000000..f19b889d07 --- /dev/null +++ b/testing/web-platform/tests/css/printing/transform-001-print.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1442522"> +<link rel="match" href="transform-001-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="height:0;"> + There should be 5 pages. +</div> +<div style="transform:rotate(180deg); height:500vh;"></div> diff --git a/testing/web-platform/tests/css/printing/transform-002-print-ref.html b/testing/web-platform/tests/css/printing/transform-002-print-ref.html new file mode 100644 index 0000000000..7204e1d657 --- /dev/null +++ b/testing/web-platform/tests/css/printing/transform-002-print-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<p>There should be a green square on the second page, and no red.</p> +<div style="break-before:page; width:100px; height:100px; background:green;"></div> diff --git a/testing/web-platform/tests/css/printing/transform-002-print.html b/testing/web-platform/tests/css/printing/transform-002-print.html new file mode 100644 index 0000000000..3ab37bf5bd --- /dev/null +++ b/testing/web-platform/tests/css/printing/transform-002-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=1371426"> +<link rel="match" href="transform-002-print-ref.html"> +<p>There should be a green square on the second page, and no red.</p> +<div style="break-before:page; width:100px; height:100px; background:red;"> + <div style="position:absolute; width:0; height:0; transform:translateX(49px);"> + <div style="position:absolute; width:51px; height:100px; background:green;"></div> + </div> + <div style="position:absolute; width:50px; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/printing/transform-003-print-ref.html b/testing/web-platform/tests/css/printing/transform-003-print-ref.html new file mode 100644 index 0000000000..766c415a1b --- /dev/null +++ b/testing/web-platform/tests/css/printing/transform-003-print-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<style> + body { margin: 0; } +</style> +<div style="height:100vh; background:yellow;"> + There should be five pages. Each page should have a unique background - but no + red should be seen. +</div> +<div style="height:100vh; background:pink;"></div> +<div style="height:100vh; background:cyan;"></div> +<div style="height:100vh; background:papayawhip;"></div> +<div style="height:100vh; background:olive;"></div> diff --git a/testing/web-platform/tests/css/printing/transform-003-print.html b/testing/web-platform/tests/css/printing/transform-003-print.html new file mode 100644 index 0000000000..c8effbb8f3 --- /dev/null +++ b/testing/web-platform/tests/css/printing/transform-003-print.html @@ -0,0 +1,21 @@ +<!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=1371426"> +<link rel="match" href="transform-003-print-ref.html"> +<style> + body { margin: 0; } +</style> +<div style="position:relative; z-index:1; height:100vh;"> + There should be five pages. Each page should have a unique background - but no + red should be seen. +</div> +<!-- This tests that the transform on the container is applied to all the + absolutely positioned descendants, and also that the transform origin is + correct. --> +<div style="transform:rotate(180deg); height:250vh; background:red;"> + <div style="position:absolute; width:100%; transform:translateY(-100vh); top:-100vh; height:100vh; background:yellow;"></div> + <div style="position:absolute; width:100%; height:100vh; background:pink;"></div> + <div style="position:absolute; width:100%; top:100vh; height:100vh; background:cyan;"></div> + <div style="position:absolute; width:100%; transform:translateY(-50vh); top:200vh; height:100vh; background:papayawhip;"></div> + <div style="position:absolute; width:100%; transform:translateY(-100vh); top:300vh; height:100vh; background:olive;"></div> +</div> diff --git a/testing/web-platform/tests/css/printing/transition-in-media-print-ref.html b/testing/web-platform/tests/css/printing/transition-in-media-print-ref.html new file mode 100644 index 0000000000..2f25c06131 --- /dev/null +++ b/testing/web-platform/tests/css/printing/transition-in-media-print-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS test reference</title> +<div> + Should not be red +</div> diff --git a/testing/web-platform/tests/css/printing/transition-in-media-print.tentative.html b/testing/web-platform/tests/css/printing/transition-in-media-print.tentative.html new file mode 100644 index 0000000000..54bac1f481 --- /dev/null +++ b/testing/web-platform/tests/css/printing/transition-in-media-print.tentative.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>Printing with a transition that could trigger as a result of @media print</title> +<link rel="help" href="https://drafts.csswg.org/css-transitions/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8012"> +<link rel="match" href="transition-in-media-print-ref.html"> +<style> +#target { + transition-duration: 100000s; + print-color-adjust: exact; +} +@media not print { + #target { + color: red; + } +} +</style> +<div id="target"> + Should not be red +</div> diff --git a/testing/web-platform/tests/css/printing/zero-size-001-print.tentative.html b/testing/web-platform/tests/css/printing/zero-size-001-print.tentative.html new file mode 100644 index 0000000000..98f77a7b86 --- /dev/null +++ b/testing/web-platform/tests/css/printing/zero-size-001-print.tentative.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Printing with page width and height of zero</title> +<link rel="help" href="https://www.w3.org/TR/css-page-3/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8335"> +<link rel="match" href="zero-size-print-ref.html"> +<meta name="assert" content="The used page size is the initial value instead of the authored width and height of zero." /> +<style> +html { box-sizing: border-box; height: 100%; border: 2px solid black; } +@page { + size: 0; +} +</style> +<h1>Chapter 1. Loomings</h1> diff --git a/testing/web-platform/tests/css/printing/zero-size-002-print.tentative.html b/testing/web-platform/tests/css/printing/zero-size-002-print.tentative.html new file mode 100644 index 0000000000..e243c34e7c --- /dev/null +++ b/testing/web-platform/tests/css/printing/zero-size-002-print.tentative.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Printing with page width of zero</title> +<link rel="help" href="https://www.w3.org/TR/css-page-3/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8335"> +<link rel="match" href="zero-size-print-ref.html"> +<meta name="assert" content="The used page size is the initial value instead of the authored width of zero and height of 4in." /> +<style> +html { box-sizing: border-box; height: 100%; border: 2px solid black; } +@page { + size: 0 4in; +} +</style> +<h1>Chapter 1. Loomings</h1> diff --git a/testing/web-platform/tests/css/printing/zero-size-003-print.tentative.html b/testing/web-platform/tests/css/printing/zero-size-003-print.tentative.html new file mode 100644 index 0000000000..c514f72360 --- /dev/null +++ b/testing/web-platform/tests/css/printing/zero-size-003-print.tentative.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>Printing with page height of zero</title> +<link rel="help" href="https://www.w3.org/TR/css-page-3/"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/8335"> +<link rel="match" href="zero-size-print-ref.html"> +<meta name="assert" content="The used page size is the initial value instead of the authored width of 4in and height of zero." /> +<style> +html { box-sizing: border-box; height: 100%; border: 2px solid black; } +@page { + size: 4in 0; +} +</style> +<h1>Chapter 1. Loomings</h1> diff --git a/testing/web-platform/tests/css/printing/zero-size-print-ref.html b/testing/web-platform/tests/css/printing/zero-size-print-ref.html new file mode 100644 index 0000000000..569af797ed --- /dev/null +++ b/testing/web-platform/tests/css/printing/zero-size-print-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<title>Printing with default page size</title> +<style> +html { box-sizing: border-box; height: 100%; border: 2px solid black; } +</style> +<h1>Chapter 1. Loomings</h1> |