diff options
Diffstat (limited to 'testing/web-platform/tests/css/printing')
22 files changed, 428 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/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/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/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> |