diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:47:29 +0000 |
| commit | 0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d (patch) | |
| tree | a31f07c9bcca9d56ce61e9a1ffd30ef350d513aa /testing/web-platform/tests/css/css-contain/reference | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.tar.xz firefox-esr-0ebf5bdf043a27fd3dfb7f92e0cb63d88954c44d.zip | |
Adding upstream version 115.8.0esr.upstream/115.8.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-contain/reference')
86 files changed, 1796 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-baseline-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-baseline-ref.html new file mode 100644 index 0000000000..1fdecb1c33 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-baseline-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<html lang=en> +<meta charset=utf-8> +<title>CSS test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +div { + display: inline-block; + height: 5px; + background: blue; + width: 50px; + color: transparent; + font-size: 100px; +} +</style> + +<p>Test passes if there are two, not one, blue lines below.</p> +<div></div><div>a</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-body-bg-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-body-bg-001-ref.html new file mode 100644 index 0000000000..1d6357e173 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-body-bg-001-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +html, body, p { + margin: 0; + width: 300px; + height: 200px; +} +</style> + +<p>Test passes if there is no red. diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-body-overflow-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-body-overflow-001-ref.html new file mode 100644 index 0000000000..32bc8b0eaf --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-body-overflow-001-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test referemce</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +html, body, p, div { + margin: 0; + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if there is no red. diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-body-t-o-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-body-t-o-001-ref.html new file mode 100644 index 0000000000..ecf9d031a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-body-t-o-001-ref.html @@ -0,0 +1,35 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +html { + writing-mode: vertical-lr; + direction: rtl; + width: 100vw; + height: 100vh; + overflow: hidden; +} +body { + margin: 0; + border-top: 100px solid red; + border-bottom: 100px solid green; + width: 100vw; + height: 100vh; +} +div { + text-orientation: upright; +} +p { + margin: auto; + padding: 150px 0; + writing-mode: horizontal-tb; + direction: ltr; +} +</style> + +<div> + <p>Test passes if there is no red. +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-body-w-m-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-body-w-m-001-ref.html new file mode 100644 index 0000000000..3341816e2b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-body-w-m-001-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +html::before { + content: ""; + width: 100px; + height: 100px; + background: orange; + display: block; +} +body { margin: 0; } +p { + margin: 0; + width: 200px; + height: 200px; +} +</style> + +<p>Test passes if the orange square is in the upper-left corner. diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-content-011-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-content-011-ref.html new file mode 100644 index 0000000000..00ad302ca4 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-content-011-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#green-square + { + background-color: green; + height: 100px; + width: 100px; + } + + div#result + { + font-size: 3em; + } + </style> + + <p>Test passes if there is a filled green square, no red and the number 17. + + <div id="green-square"></div> + + <div id="result">17</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-020-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-020-ref.html new file mode 100644 index 0000000000..9a0eab3afe --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-020-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS Containment Test: Removing layout containment and contained positioned elements</title> + +<style> +.container { + width: 300px; + height: 300px; +} +.box { + width: 100px; + height: 100px; + background-color: green; +} +.fixed { + position: fixed; + top: 0; + left: 0; +} +.abspos { + position: absolute; + top: 0; + right: 0; +} +</style> + +<div class="container"> + <div class="fixed box"></div> + <div class="abspos box"></div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-021-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-021-ref.html new file mode 100644 index 0000000000..c29b12e137 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-021-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Layout containment fixed positioned descendants</title> +<style> +#green { + background: green; + width: 100px; + height: 100px; +} +body { + height: 3000px; + margin: 0px; +} +#spacer { + height: 200px; +} +</style> +<script> +function runTest() { + document.documentElement.scrollTop += 200; +} +</script> +<body onload="runTest()"> +<div id="spacer"></div> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="green"></div> +</body> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-004-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-004-ref.html new file mode 100644 index 0000000000..69658a7004 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-004-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + display: inline-block; + font: 100px/1 Ahem; + width: 100px; + height: 100px; +} +#first { + color: blue; + position: relative; + top: 20px; +} +#second { + color: green; +} +</style> +<p>Test passes if there is not a rectangle as the two boxes ("blue" and "green") are not baseline aligned.</p> +<div id="first">X</div><div id="second">X</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html new file mode 100644 index 0000000000..360652c939 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-baseline-005-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.wrapper { + height: 110px; +} +.wrapper > * { + vertical-align: bottom; + background: cyan; + font-size: 20px; +} +.wrapper > :nth-child(1) { + background: magenta; +} +.inline-block { + display: inline-block; +} +canvas { + width: 100px; + height: 100px; +} +fieldset, details { + display: inline-block; + width: max-content; +} +</style> +<p>Test passes if it has the same output than the reference (all elements are aligned on the bottom edge).</p> +<div class="wrapper"> + <div class="inline-block" style="font-size: 80px;">foo</div> + <div class="inline-block">foo</div> + <div class="inline-block" style="border: solid thick; padding: 2px;">foo</div> + <div style="display: inline-flex;">foo</div> + <div style="display: inline-flex; border: solid thick; padding: 2px;">foo</div> + <div style="display: inline-grid;">foo</div> + <div style="display: inline-grid; border: solid thick; padding: 2px;">foo</div> +</div> +<div class="wrapper"> + <canvas></canvas> + <div class="inline-block">foo</div> + <button>foo</button> + <select><option>foo</option></select> + <select multiple style="height: 40px;"><option>foo</option></select> + <textarea style="height: 40px;"></textarea> +</div> +<div class="wrapper"> + <canvas></canvas> + <input value="foo" size="3"></input> + <input type="file"></input> +</div> +<div class="wrapper"> + <canvas></canvas> + <table style="display: inline-table;"><tr><td>foo</td></tr></table> + <canvas></canvas> + <fieldset></fieldset> + <fieldset><legend>foo</legend></fieldset> + <fieldset><legend>foo</legend>foo</fieldset> + <details></details> + <details><summary>foo</summary>foo</details> <details open="true"><summary>foo</summary>foo</details> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-breaks-002-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-breaks-002-ref.html new file mode 100644 index 0000000000..72a3beff84 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-breaks-002-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + float: left; + } + + img + { + vertical-align: top; + } + </style> + + <p>Test passes if there is a) a blue square below a yellow square and b) an orange square below a blue square. + + <div> + <img src="../support/swatch-yellow.png" width="100" height="100" alt="Image download support must be enabled"> + <br> + <img src="../support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"> + <br> + <img src="../support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"> + </div> + diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html new file mode 100644 index 0000000000..da83204dce --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-button-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div.fakeButton { + display: inline-block; + border: 5px solid green; + padding: 0; + margin-bottom: 2px; + color: transparent; + width: 0; + height: 0px; + /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */ + position: relative; + z-index: 1; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square aligned 2px above the text's baseline, and then the word "after".</p> +before<div class="fakeButton"></div>after diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-cell-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-cell-001-ref.html new file mode 100644 index 0000000000..9ff7f45e39 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-cell-001-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + table + { + background-color: blue; + border-spacing: 2px; + height: 206px; + table-layout: fixed; + width: 206px; + } + + td + { + background-color: white; + padding: 0px; + vertical-align: baseline; + } + + span + { + background-color: green; + color: white; + font-family: monospace; + vertical-align: top; + } + </style> + + <p>Test passes if there is the word PASS and if there is <strong>no red</strong>. + + <table> + + <tr><td> <td> + + <tr><td> <td><span>PASS</span> + + </table> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-flexbox-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-flexbox-001-ref.html new file mode 100644 index 0000000000..832e4c72c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-flexbox-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div { + display: inline-flex; + border: 5px solid green; + /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */ + position: relative; + z-index: 1; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p> +before<div></div>after diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-grid-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-grid-001-ref.html new file mode 100644 index 0000000000..b5ff8e0e0d --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-grid-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div { + display: inline-grid; + border: 5px solid green; + /* Layout containment creates a stacking context, the following lines simuluate the same in the reference file. */ + position: relative; + z-index: 1; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the bottom, and then the word "after".</p> +before<div></div>after diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-ifc-022-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ifc-022-ref.html new file mode 100644 index 0000000000..682af7d4f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ifc-022-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + color: transparent; + float: left; + font-size: 16px; + padding: 8px; + } + + div#blue-rectangle + { + background-color: blue; + margin: 8px; + width: 6em; + } + + div#orange-rectangle + { + background-color: orange; + width: 12em; + } + </style> + + <p>Test passes if the orange rectangle and blue rectangle do not overlap. + + <div id="blue-rectangle">Some text in a blue rectangle.</div> + + <div id="orange-rectangle">Some text in an orange rectangle. Some text in an orange rectangle. Some text in an orange rectangle.</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-013-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-013-ref.html new file mode 100644 index 0000000000..27041414e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-013-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-family: monospace; + font-size: 100px; + height: 3em; + overflow: scroll; + width: 4ch; + } + </style> + + <body> + + <p>Test passes if there is no red. + + <div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html new file mode 100644 index 0000000000..a2b75db314 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-014-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-family: monospace; + font-size: 100px; + height: 2.8ch; + overflow: scroll; + width: 4ch; + } + </style> + + <body> + + <p>Test passes if there is no red. + + <div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html new file mode 100644 index 0000000000..8dbbbbd3ec --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-015-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <body> + + <p>Test passes if there is no red. diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-019-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-019-ref.html new file mode 100644 index 0000000000..7ec1d1bf8e --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-019-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div#parent + { + height: 100px; + width: 100px; + overflow: scroll; + } + + div#child + { + background-color: green; + height: 100px; + width: 100px; + } + </style> + + <body onload="document.getElementById('parent').scrollLeft = 100; document.getElementById('parent').scrollTop = 125;"> + + <p>Test passes if there is a filled green square <strong>with 2 scroll bars</strong> and if there is <strong>no red</strong>. + + <div id="parent"> + <div id="child"></div> + </div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-020-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-020-ref.html new file mode 100644 index 0000000000..57a4e9c361 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-ink-overflow-020-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if there is a filled green square, <strong>no scrollbar around it</strong> and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-layout-size-003-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-layout-size-003-ref.html new file mode 100644 index 0000000000..e3932a9b05 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-layout-size-003-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + color: transparent; + float: left; + font-size: 16px; + padding: 8px; + } + + div#blue-rectangle + { + background-color: blue; + margin: 8px; + width: 6em; + } + + div#orange-rectangle + { + background-color: orange; + height: 0px; + width: 12em; + } + </style> + + <p>Test passes if the orange rectangle and blue rectangle do not overlap. + + <div id="blue-rectangle">Some text in a blue rectangle.</div> + + <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-001-ref.html new file mode 100644 index 0000000000..639fbb2248 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-001-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test: paint containment use the padding edge</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +div { + width: 100px; + height: 100px; + background: blue; + padding: 50px; + border-radius: 100px; + overflow: hidden +} +div::before { + content:""; + display: block; + background: green; + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a green square in a rounded blue box, and no red. +<div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-007-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-007-ref.html new file mode 100644 index 0000000000..ae3c424f72 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-007-ref.html @@ -0,0 +1,19 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +rtc { + display: ruby-text-container; + font-size: 1rem; +} +rtc::after { + content: "PASS"; + position: absolute; +} +</style> + +<p>This test passes if you can see the word PASS below. +<div><ruby><rtc></rtc></ruby></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-008-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-008-ref.html new file mode 100644 index 0000000000..b94055eb1b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-008-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test: paint containment on ruby-text</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +rt { + display: ruby-text; + font-size: 1rem; + font-family: monospace; +} +</style> + +<p>This test passes if you can see the word PASS below. +<div><ruby><rt><span style="margin-left: 4ch;"></span>PASS</rt></ruby></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-022-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-022-ref.html new file mode 100644 index 0000000000..b3bb7576f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-022-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + height: 100px; + left: 100px; + position: relative; + top: 100px; + width: 100px; + } + + </style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-047-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-047-ref.html new file mode 100644 index 0000000000..f13649977f --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-047-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + color: green; + font-family: monospace; + font-size: 100px; + } + </style> + + <p>Test passes if there is <strong>no red</strong>. + + <div>PASS</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-clip-015-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-clip-015-ref.html new file mode 100644 index 0000000000..781a6d2f2f --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-clip-015-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + border-radius: 50%; + height: 100px; + width: 100px; + } + </style> + + <p>Test passes if there is a filled green circle and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-clip-019-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-clip-019-ref.html new file mode 100644 index 0000000000..2a529c12c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-clip-019-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> + +<meta charset="UTF-8"> + +<title>CSS Reference Test</title> + +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + +<style> + #green { + background-color: green; + width: 100px; + height: 100px; + } +</style> + +<p>Test passes if there there is a green square. No red and no scrollbars should be visible.</p> + +<div id="green"></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-ifc-011-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-ifc-011-ref.html new file mode 100644 index 0000000000..229c8c2d74 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-ifc-011-ref.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + p + { + margin-bottom: 30px; + } + + div + { + height: 30px; + } + + div.orange + { + background-color: orange; + } + + div.blue + { + background-color: blue; + } + + div#lime + { + background-color: lime; + } + </style> + + <p>Test passes if there are 5 horizontal stripes across the page in this order (from top to bottom): an orange stripe, a blue stripe, a bright green stripe, a blue stripe and then an orange stripe. + + <div class="orange"></div> + + <div class="blue"></div> + + <div id="lime"></div> + + <div class="blue"></div> + + <div class="orange"></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html new file mode 100644 index 0000000000..08900b201b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-independent-formatting-context-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.wrapper { + border: solid thick; + margin: 1em; +} +</style> +<p>Test passes if it has the same output than the reference.</p> +<div class="wrapper"> + <div style="margin: 2em 0;">This text should have 2em top and bottom margins (margins do not collapse).</div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html new file mode 100644 index 0000000000..0cef592ba5 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-independent-formatting-context-003-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +.wrapper { + border: solid thick; + margin: 1em; +} +</style> +<p>Test passes if it has the same output than the reference.</p> +<div class="wrapper"> + <div style="margin: 1em 0;">This text should have 1em top and bottom margins.</div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-size-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-size-001-ref.html new file mode 100644 index 0000000000..9aad8a490b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-size-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + background-color: green; + height: 40px; + width: 206px; + } + </style> + + <p>Test passes if there is a short horizontal green stripe and <strong>no red</strong>. + + <div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-paint-size-003-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-paint-size-003-ref.html new file mode 100644 index 0000000000..27820fae76 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-paint-size-003-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + color: transparent; + float: left; + font-size: 16px; + padding: 8px; + } + + div#blue-rectangle + { + background-color: blue; + margin: 8px; + width: 6em; + } + + div#orange-rectangle + { + background-color: orange; + height: 0px; + overflow: hidden; + width: 12em; + } + </style> + + <p>Test passes if the orange rectangle and blue rectangle do not overlap. + + <div id="blue-rectangle">Some text in a blue rectangle.</div> + + <div id="orange-rectangle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-004-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-004-ref.html new file mode 100644 index 0000000000..75ae2bcc2b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-004-ref.html @@ -0,0 +1,18 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +rtc { + display: ruby-text-container; + font-size: 1rem; +} +div { + overflow: hidden; +} +</style> + +<p>This test passes if you can see the word PASS below. +<div><ruby><rtc>PASS</rtc></ruby></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-005-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-005-ref.html new file mode 100644 index 0000000000..001fc90061 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-005-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<style> +div { overflow: hidden; } +rt { + display: ruby-text; + font-size: 1rem; +} +</style> + +<p>This test passes if you can see the word PASS below. +<div><ruby><rt>PASS</rt></ruby></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-021-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-021-ref.html new file mode 100644 index 0000000000..639daa8437 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-021-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + div.inline-block { + display: inline-block; + height: 100px; + width: 100px; + } + + div#blue-test { + background-color: blue; + padding: 50px; + box-sizing: border-box; + } + + div#orange-reference { + background-color: orange; + } +</style> + +<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square. + +<div> + <div id="blue-test" class="inline-block"><img src="../support/blue50wBy46h.png" alt="Image download support must be enabled"></div> +</div> + +<div> + <div id="orange-reference" class="inline-block"></div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-022-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-022-ref.html new file mode 100644 index 0000000000..3ca9ac9ee4 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-022-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <p>This test passes if the painted blue area is <strong>exactly as tall as</strong> the orange square. + + <div><img src="../support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"> <img src="../support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-023-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-023-ref.html new file mode 100644 index 0000000000..1073100b0c --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-023-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + div.inline-block { + display: inline-block; + height: 100px; + width: 100px; + } + + div#blue-test { + background-color: blue; + color: transparent; + font-size: 100px; + padding: 50px; + box-sizing: border-box; + } + + div#orange-reference { + background-color: orange; + } +</style> + +<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square. + +<div> + <div id="blue-test" class="inline-block">B</div> +</div> + +<div> + <div id="orange-reference" class="inline-block"></div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-025-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-025-ref.html new file mode 100644 index 0000000000..de9cea1050 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-025-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square. + + <div><img src="../support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled"></div> + + <div><img src="../support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled"></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-027-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-027-ref.html new file mode 100644 index 0000000000..ce4c699dc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-027-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> + div.inline-block { + display: inline-block; + height: 100px; + width: 100px; + } + + div#blue-test { + background-color: blue; + color: transparent; + font-size: 50px; + line-height: 1; + padding: 50px; + box-sizing: border-box; + } + + div#orange-reference { + background-color: orange; + } + + span { + display: block; + } +</style> + +<p>This test passes if the painted blue area is <strong>exactly as wide as</strong> the orange square. + +<div> + <div id="blue-test" class="inline-block"> + <span>B</span> + <span>L</span> + </div> +</div> + +<div> + <div id="orange-reference" class="inline-block"></div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-051-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-051-ref.html new file mode 100644 index 0000000000..07455aaed2 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-051-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + td + { + font-size: 50px; + } + </style> + + <p>Test passes if "5678" (without quotes) is readable and if the digits do not overlap each other. + + <table> + <tr> + <td>5<td>6<td>7<td>8 + </table> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-056-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-056-ref.html new file mode 100644 index 0000000000..2e73f0e42b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-056-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + table + { + width: 400px; + } + + caption + { + border-top: orange solid 6px; + color: blue; + font-size: 32px; + } + + span + { + bottom: 3px; + position: relative; + } + </style> + + <p>Test passes if the words "Table caption" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Table caption" in it. + + <table> + <caption><span>Table caption</span></caption> + </table> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-061-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-061-ref.html new file mode 100644 index 0000000000..756c20d40e --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-061-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <p>Test passes if the word FAIL is absent. diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-062-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-062-ref.html new file mode 100644 index 0000000000..dbfa77f6ac --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-062-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + border: orange solid 3px; + color: blue; + font-size: 32px; + height: 0px; + width: 400px; + } + </style> + + <p>Test passes if the words "Text sample" are below a thick orange line. Test fails if, instead of a thick orange line, there is an orange rectangle with the words "Text sample" in it. + + <div>Text sample</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-063-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-063-ref.html new file mode 100644 index 0000000000..9544ebcac2 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-063-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>Test passes if there is no red below. diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-064-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-064-ref.html new file mode 100644 index 0000000000..6d2876ae9b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-064-ref.html @@ -0,0 +1,28 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +div { font-size: 50px; } +.green { background: green; } +.grid { + display: grid; + grid-template-columns: min-content max-content; +} +</style> + +<p>This test passes if there are two green rectangles and no red. + +<div class=grid> + <div style="grid-area: 1/1"> </div> + <div style="grid-area: 2/2"id=test class="grid"> + <div> </div> + <div class=green></div> + <div class=green></div> + <div> </div> + </div> +</div> + + + diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-breaks-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-breaks-001-ref.html new file mode 100644 index 0000000000..b807ea5a11 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-breaks-001-ref.html @@ -0,0 +1,31 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + <meta name=flags content="ahem"> + +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +article { + height: 2.5em; + column-gap: 0; + columns: 3 1em; + width: 3em; + column-fill: auto; + + font-size: 40px; + font-family: ahem; + line-height: 1; +} +div { + background: orange; + padding-top: 5em; +} +</style> + +<p>This test passes if there is an orange rectangle below. If the shape is not a rectangle, the test fails. + +<article> +<div></div> +</article> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-button-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-button-001-ref.html new file mode 100644 index 0000000000..eff64aa8e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-button-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +button { + border: 5px solid green; + padding: 0; + color: transparent; + width: 0; + height: 0; + font-size: 2em; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p> +before<button>b</button>after diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-fieldset-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-fieldset-001-ref.html new file mode 100644 index 0000000000..85f5c73c2e --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-fieldset-001-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +fieldset { + display: inline-block; + color: transparent; + border: none; + padding: 0; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a small space, and then the word "after".</p> +before<fieldset></fieldset>after diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-fieldset-002-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-fieldset-002-ref.html new file mode 100644 index 0000000000..51ff6998b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-fieldset-002-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> +#border { + border: 1px solid black; + width: min-content; +} +fieldset { + visibility: hidden; + height: 1px; +} +</style> + +<p>This test passes if it has the same output as the reference. You should see a black border box below.</p> +<div id="border"> + <fieldset></fieldset> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-flexbox-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-flexbox-001-ref.html new file mode 100644 index 0000000000..70f4086430 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-flexbox-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div { + display: inline-flex; + border: 5px solid green; + color: transparent; + width: 0; + height: 0; + font-size: 2em; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p> +before<div>f</div>after diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-flexbox-002-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-flexbox-002-ref.html new file mode 100644 index 0000000000..a75fa26c9f --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-flexbox-002-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Tests that scrollbars are handled correctly in a flex item with contains:size</title> +<link rel="author" title="Google LLC" href="https://www.google.com"> + +<style> +div > div { + vertical-align: top; + display: inline-block; + contain: size; + overflow: scroll; + border: 1px solid; +} +</style> + +<p>Test passes if the two lines below look the same.</p> + +<div style="line-height: 1.0;"> + <div></div> +</div> + +<div style="line-height: 1.0;"> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-grid-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-grid-001-ref.html new file mode 100644 index 0000000000..cf4f807665 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-grid-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div { + display: inline-grid; + border: 5px solid green; + color: transparent; + width: 0; + height: 0; + font-size: 2em; +} +</style> + +<p>This test passes if it has the same output as the reference. You see the word "before", a 10px green square at the top, and then the word "after".</p> +before<div>g</div>after diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-grid-005-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-grid-005-ref.html new file mode 100644 index 0000000000..b2fdf4b887 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-grid-005-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE HTML> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reftest Reference</title> + <link rel="author" title="Gerald Squelart" href="mailto:gsquelart@mozilla.com"> + <style> + .basic { + display: grid; + border: 1em solid green; + } + .height-ref { + height: 40px; + background: lightblue; + } + .width-ref { + width: 40px; + } + .floatLBasic-ref { + float: left; + } + .floatLWidth-ref { + float: left; + width: 40px; + } + </style> +</head> +<body> + <div class="basic"></div> + <br> + + <div class="basic height-ref"></div> + <br> + + <div class="basic height-ref"></div> + <br> + + <div class="basic width-ref"></div> + <br> + + <div class="basic width-ref"></div> + <br> + + <div class="basic floatLBasic-ref"></div> + <br> + + <div class="basic floatLWidth-ref"></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-monolithic-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-monolithic-001-ref.html new file mode 100644 index 0000000000..2e8f1ba70a --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-monolithic-001-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-family: monospace; + font-size: 20px; + width: 8ch; + } + </style> + + <p>Test passes if "AB", "CD", "EF" and "GH" are vertically aligned into 1 single column and if there is <strong>no red</strong>. + + + <div>AB<br>CD<br>EF<br>GH</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-scrollbars-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-scrollbars-001-ref.html new file mode 100644 index 0000000000..402ff6c95e --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-scrollbars-001-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +div { + display: inline-block; + border: solid thick; + overflow: scroll; +} +</style> +<p>This test passes if it has the same output as the reference.</p> +<div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-scrollbars-004-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-scrollbars-004-ref.html new file mode 100644 index 0000000000..91d9e51709 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-scrollbars-004-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> +<style> +#scroller { + background: lightgreen; + overflow: scroll; + padding-bottom: 50px; + width: 100px; + height: 100px; +} +#content { + background: lightblue; + width: 50px; + height: 130px; +} +</style> + +<div id=scroller> + <div id=content> + </div> +</div> + +<p>This test passes if it has the same output as the reference.</p> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-size-select-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-size-select-001-ref.html new file mode 100644 index 0000000000..1944e49375 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-size-select-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Containment Test: Reference file</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<style> +select { + color: transparent; + background: white; +} +</style> +<p>Test passes if it has the same output than the reference.</p> +<select></select> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-strict-011-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-strict-011-ref.html new file mode 100644 index 0000000000..401275b552 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-strict-011-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + p + { + margin-top: 1.5em; + } + + div + { + font-size: 3em; + } + </style> + + <p>Test passes if there is the number 17. + + <div>17</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-breaks-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-breaks-001-ref.html new file mode 100644 index 0000000000..2c0b758e6b --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-breaks-001-ref.html @@ -0,0 +1,36 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +article { + columns: 2 1ch; + column-gap: 0; + float: left; + font-family: monospace; + margin-right: 3em; +} +div { + page-break-inside: avoid; + break-inside: avoid; +} +</style> + +<p>Test passes if there are two identical blocks “A” letters below. +<article> + <div> + A<br> + A<br> + A<br> + A + <div> +</article> +<article> + <div> + A<br> + A<br> + A<br> + A + <div> +</article> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-breaks-004-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-breaks-004-ref.html new file mode 100644 index 0000000000..eaf4d566a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-breaks-004-ref.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<style> +article { + columns: 2 1ch; + column-gap: 0; + float: left; + font-family: monospace; + margin-right: 3em; + line-height: 1; + height: 4em; + column-fill: auto; +} +div:last-of-type { + break-before: column; +} +</style> + +<p>Test passes if there are two identical blocks “A” letters below. +<article> + <div>A<br>A</div> + <div>A<br>A</div> +</article> +<article> + <div>A<br>A</div> + <div>A<br>A</div> +</article> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-001-ref.html new file mode 100644 index 0000000000..c0c652b335 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-001-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 3em; + } + </style> + + <p>Test passes if there is the digit 5. + + <div>5</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-003-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-003-ref.html new file mode 100644 index 0000000000..12f9b989fd --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-003-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 3em; + } + </style> + + <p>Test passes if there is the number 20. + + <div>20</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-004-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-004-ref.html new file mode 100644 index 0000000000..afe60666c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-004-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Reference Test</title> + + <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org"> + + <style> + div + { + font-size: 3em; + } + </style> + + <p>Test passes if there is the number 0. + + <div>0</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-005-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-005-ref.html new file mode 100644 index 0000000000..1ea1ae3f08 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-counters-005-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<style> +.contain { + float: right; + clear: both; +} +.reset { counter-reset: c;} +.increment:before { content: counters(c, ""); } +.increment { counter-increment: c; } +</style> +<body> +<div>1</div> +<div class="contain"> + <div>1</div> + <div>1</div> +</div> +<div>2</div> +<div class="contain"> + <div>1</div> + <div>2</div> +</div> +<div>3</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-li-container-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-li-container-ref.html new file mode 100644 index 0000000000..e6c721ac2d --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-li-container-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>CSS Containment: contain:style and <ol> ordinals (li container, ref)</title> +<ol> + <li value="1">A</li> + <li value="2">B</li> + <li value="3">X</li> + <li value="4">Y</li> + <li value="5">C</li> + <li value="6">D</li> +</ol> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-pseudo-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-pseudo-ref.html new file mode 100644 index 0000000000..5b8e4d338c --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-pseudo-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Containment: contain:style and <ol> ordinals (pseudo, ref)</title> +<ol> + <li value="10">10A10</li> + <li value="11">11B11</li> + <div> + <li value="1">1X1</li> + <li value="2">2Y2</li> + </div> + <li value="12">12C12</li> + <li value="13">13D13</li> +</ol> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-pseudo-reversed-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-pseudo-reversed-ref.html new file mode 100644 index 0000000000..04cc67139a --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-pseudo-reversed-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Containment: contain:style and <ol> ordinals (pseudo, reversed, ref)</title> +<ol> + <li value="10">10A10</li> + <li value="9">9B9</li> + <div> + <li value="1">1X1</li> + <li value="2">2Y2</li> + </div> + <li value="8">8C8</li> + <li value="7">7D7</li> +</ol> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-ref.html new file mode 100644 index 0000000000..bee7deda2f --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Containment: contain:style and <ol> ordinals (ref)</title> +<ol> + <li value="1">A</li> + <li value="2">B</li> + <div> + <li value="1">X</li> + <li value="2">Y</li> + </div> + <li value="3">C</li> + <li value="4">D</li> +</ol> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-reversed-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-reversed-ref.html new file mode 100644 index 0000000000..bb7531790e --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-reversed-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Containment: contain:style and <ol> ordinals (reversed, ref)</title> +<ol> + <li value="4">A</li> + <li value="3">B</li> + <div> + <li value="1">X</li> + <li value="2">Y</li> + </div> + <li value="2">C</li> + <li value="1">D</li> +</ol> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-start-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-start-ref.html new file mode 100644 index 0000000000..93411804b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-start-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Containment: contain:style and <ol> ordinals (start attribute, ref)</title> +<ol> + <li value="10">A</li> + <li value="11">B</li> + <div> + <li value="1">X</li> + <li value="2">Y</li> + </div> + <li value="12">C</li> + <li value="13">D</li> +</ol> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-start-reversed-ref.html b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-start-reversed-ref.html new file mode 100644 index 0000000000..60aefdf563 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-style-ol-ordinal-start-reversed-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Containment: contain:style and <ol> ordinals (start attribute, reversed, ref)</title> +<ol> + <li value="10">A</li> + <li value="9">B</li> + <div> + <li value="1">X</li> + <li value="2">Y</li> + </div> + <li value="8">C</li> + <li value="7">D</li> +</ol> diff --git a/testing/web-platform/tests/css/css-contain/reference/contain-subgrid-001.html b/testing/web-platform/tests/css/css-contain/reference/contain-subgrid-001.html new file mode 100644 index 0000000000..ab0d1fede5 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/contain-subgrid-001.html @@ -0,0 +1,35 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain reference: layout/paint containment on subgrid</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + +<style> +.grid { + display: grid; + width: 40px; + height: 40px; + grid: [a] repeat(2,15px) [b] / [a] repeat(2,15px) [b]; + gap: 10px; +} + +.subgrid { + display: grid; + grid: none; + background: lightgrey; + grid-area:1/1/3/3; +} + +.layout { contain: layout; } +.paint { contain: paint; } + +.inner { + background: blue; + grid-area:a/a/b/b; +} +</style> + +<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div> +<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div> +<div class="grid"><div class="subgrid layout"><div class="inner"></div></div></div> +<div class="grid"><div class="subgrid paint"><div class="inner"></div></div></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/counter-scoping-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/counter-scoping-001-ref.html new file mode 100644 index 0000000000..2ebbb9a93c --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/counter-scoping-001-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>Test passes if the text below is "1 1.2" (not including the quotation marks).<p> +<div>1 1.2</div> + diff --git a/testing/web-platform/tests/css/css-contain/reference/counter-scoping-003-ref.html b/testing/web-platform/tests/css/css-contain/reference/counter-scoping-003-ref.html new file mode 100644 index 0000000000..49e7b85e87 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/counter-scoping-003-ref.html @@ -0,0 +1,9 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>Test passes if the text below is "1 2" (not including the quotation marks).<p> +<div>1 2</div> + diff --git a/testing/web-platform/tests/css/css-contain/reference/pass_if_pass_below_clipped.html b/testing/web-platform/tests/css/css-contain/reference/pass_if_pass_below_clipped.html new file mode 100644 index 0000000000..044783d1e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/pass_if_pass_below_clipped.html @@ -0,0 +1,13 @@ +<!doctype html> +<html> +<head> + <title>Reference rendering - passes if there is the word "PASS" below</title> +<style> +div { overflow: hidden; } +</style> +</head> +<body> + <p>Test passes if there is the word "PASS" below.</p> + <div>PASS</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-001-ref.html new file mode 100644 index 0000000000..0b0e9c467a --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-001-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<p>Test passes if the text below is "A1Z" (not including the quotation marks).<p> +<div>A1Z</div> + diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-002-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-002-ref.html new file mode 100644 index 0000000000..c7239e3f48 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-002-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>Test passes if the text below is "AZZ" (not including the quotation marks).<p> +<div>AZZ</span></div> diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-003-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-003-ref.html new file mode 100644 index 0000000000..2bc8d6730e --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-003-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test reference</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + +<p>Test passes if the text below is "AZ" (not including the quotation marks).<p> +<div>AZ</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-empty-style-boundaries-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-empty-style-boundaries-ref.html new file mode 100644 index 0000000000..6437e08eb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-empty-style-boundaries-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-contain test: nested style containment and the quote element following a style boundary without any quotes</title> + <link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com"> + <link rel=help href="https://drafts.csswg.org/css-contain-1/#containment-style"> + +<div> + <div> + <q></q> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-001-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-001-ref.html new file mode 100644 index 0000000000..5c1a6203e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-001-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-contain test reference: style containment dynamic containment set invalidation</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<p>Test passes if the text below is "A1(19" (not including the quotation marks).<p> +<div>A<div>1 (</div>1 9</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-002-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-002-ref.html new file mode 100644 index 0000000000..e48a080e92 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-002-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-contain test reference: style containment dynamic containment set unset invalidation</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<p>Test passes if the text below is "A1(+-" (not including the quotation marks).<p> +<div>A<div>1 (</div>+ -</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-003-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-003-ref.html new file mode 100644 index 0000000000..766ad6cbe9 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-003-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-contain test reference: style containment dynamic containment set unset set invalidation</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<p>Test passes if the text below is "A119" (not including the quotation marks).<p> +<div>A<div>1</div>1 9</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-004-ref.html b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-004-ref.html new file mode 100644 index 0000000000..8280075f00 --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/quote-scoping-invalidation-004-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-contain test reference: style containment invalidation with elements in different subtrees</title> +<link rel="author" title="Daniil Sakhapov" href="sakhapov@google.com"> + +<p>Test passes if the text below is "A111119" (not including the quotation marks).<p> +<div>A<div>1 1</div><div>1 1</div>1 9</div> diff --git a/testing/web-platform/tests/css/css-contain/reference/ref-if-there-is-no-red.xht b/testing/web-platform/tests/css/css-contain/reference/ref-if-there-is-no-red.xht new file mode 100644 index 0000000000..a5b4e9f47a --- /dev/null +++ b/testing/web-platform/tests/css/css-contain/reference/ref-if-there-is-no-red.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + </body> +</html>
\ No newline at end of file |