diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/css/css-ui/reference | |
| parent | Initial commit. (diff) | |
| download | firefox-upstream.tar.xz firefox-upstream.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-ui/reference')
39 files changed, 963 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-001-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-001-ref.html new file mode 100644 index 0000000000..0207bc06be --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-001-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +#cb { + position: absolute; + width: 100px; + height: 100px; +} +#test { + margin-right: 5px; + margin-top: 25px; + margin-left: 25px; + width: 70px; + height: 70px; + background:green; +} +</style> +<body> + <p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p> + <div id="cb"> + <div id="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-007-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-007-ref.html new file mode 100644 index 0000000000..71a3649a1a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-007-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + display: inline-block; + width: 100px; + height: 100px; + background: green; + margin: 10px; +} + +body { + max-width: 700px; +} +</style> +<body> + <p>Test passes if there are 20 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-008-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-008-ref.html new file mode 100644 index 0000000000..999106dcd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-008-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + width: 100px; + height: 150px; + background: green; + margin: 10px; + display: inline-block; +} + +body { + max-width: 400px; +} +</style> +<body> + <p>Test passes if there are 6 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-009-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-009-ref.html new file mode 100644 index 0000000000..7df74a56ea --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-009-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + width: 300px; + height: 100px; + background: green; + margin: 10px; + display: inline-block; +} +body { + max-width: 700px; +} +</style> +<body> + <p>Test passes if there are 6 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-010-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-010-ref.html new file mode 100644 index 0000000000..6c150a9742 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-010-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + display: inline-block; + width: 70px; + height: 70px; + background: green; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-012-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-012-ref.html new file mode 100644 index 0000000000..4d6517f31d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-012-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + margin-bottom: 10px; + width: 100px; + height: 70px; + background: green; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-013-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-013-ref.html new file mode 100644 index 0000000000..11fa393650 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-013-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + display:inline-block; + height: 100px; + width: 70px; + background: green; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-020-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-020-ref.html new file mode 100644 index 0000000000..31f08ffbe0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-020-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<style> +div { + display: inline-block; + width: 130px; + height: 130px; + background: green; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-022-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-022-ref.html new file mode 100644 index 0000000000..facb307229 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-022-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + display: inline-block; + width: 130px; + height: 150px; + background: green; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/box-sizing-023-ref.html b/testing/web-platform/tests/css/css-ui/reference/box-sizing-023-ref.html new file mode 100644 index 0000000000..5e103f7712 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/box-sizing-023-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + height: 130px; + margin-bottom: 10px; + width: 300px; + background: green; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green rectangles</strong> and they are the <strong>same size</strong>.</p> + <div></div> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-006-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-006-ref.html new file mode 100644 index 0000000000..3c15fcbf6c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-006-ref.html @@ -0,0 +1,17 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <title>CSS-UI test reference</title> +<style> +div { + width: 100px; + height: 100px; + background: green; +} + +</style> + + <p>Test passes if there is a filled green square and <strong>no pink</strong>.</p> + <div></div> + diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-007-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-007-ref.html new file mode 100644 index 0000000000..a32464c106 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-007-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <title>CSS-UI test reference</title> + + <p>Test passes if there is an outlined box below. The outline may be any shape or color so long as it is visible.</p> + diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-020-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-020-ref.html new file mode 100644 index 0000000000..194b633691 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-020-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline block with outline inline reference file</title> + <link rel="author" title="Aleks Totic <atotic@chromium.org>"> + <meta name=assert content="inline child displays outline correctly"> +<style> +#container { + border: 5px solid green; + width: 110px; + height: 40px; + position: relative; + top: -5px; + left: -5px; +} + +#target { + border: 5px solid blue; + position: relative; + top: 5px; +} +</style> + + <p>Test passes if blue outline touches top left of green outline.</p> + <div id="container"><span id="target">x</span></div> + diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-021-notref.html b/testing/web-platform/tests/css/css-ui/reference/outline-021-notref.html new file mode 100644 index 0000000000..eb074ed44f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-021-notref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS test reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> + +<input type="submit" style="outline: none"> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-024-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-024-ref.html new file mode 100644 index 0000000000..553b4493d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-024-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: Reference test for outline with padding</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<p>Test passes if the outline is wrapping all the green boxes.</p> +<div style="width: 50px; height: 50px; padding: 10px; outline: auto;"> + <div style="font: 50px/1 Ahem; color: green;">XX</div> +</div> + diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-027-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-027-ref.html new file mode 100644 index 0000000000..ba84ec101b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-027-ref.html @@ -0,0 +1,160 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: Reference test for outline with padding</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.outline-container { + margin: 10px 0px; + width: 10px; + height: 10px; + outline: auto; + font: 10px/1 Ahem; +} + +.outline-container > div { + color: lime; +} +</style> +<p>Test passes if the outline is wrapping all the green boxes.</p> +<div style="display: grid; grid-template-columns: repeat(6, 100px);"> + <div> + <div class="outline-container" style="padding-left: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-right: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-top: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-bottom: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 0px 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 5px 0px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 5px;"> + <div>XX</div> + </div> + </div> + <div> + <div class="outline-container" style="padding-left: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-right: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-top: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-bottom: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 0px 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 20px 0px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 20px;"> + <div>XX</div> + </div> + </div> + <div> + <div class="outline-container" style="padding-left: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-right: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-top: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-bottom: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 0px 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 5px 0px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 5px;"> + <div>XX</div> + </div> + </div> + <div> + <div class="outline-container" style="padding-left: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-right: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-top: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-bottom: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 0px 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 20px 0px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 20px;"> + <div>XX</div> + </div> + </div> + <div> + <div class="outline-container" style="padding-left: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-right: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-top: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-bottom: 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 0px 5px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 5px 0px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 5px;"> + <div>XX</div> + </div> + </div> + <div> + <div class="outline-container" style="padding-left: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-right: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-top: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding-bottom: 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 0px 20px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 20px 0px;"> + <div>XX</div> + </div> + <div class="outline-container" style="padding: 20px;"> + <div>XX</div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-028-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-028-ref.html new file mode 100644 index 0000000000..c0f7b134ff --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-028-ref.html @@ -0,0 +1,136 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: Reference test for outline with floatted descendants</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.outline-container { + width: max-content; + margin: 30px 0px; + outline: auto; + font: 10px/1 Ahem; + height: 10px; +} + +.inline { + display: inline-block; + color: lime; +} + +span { + color: lime; +} +</style> +<p>Test passes if the outline is wrapping all the green boxes.</p> +<div style="display: grid; grid-template-columns: repeat(4, 100px);"> + <div> + <div class="outline-container"> + <span>XX</span> + </div> + <div class="outline-container"> + <div class="inline" style="margin-left: 5px;">XX</div> + </div> + <div class="outline-container"> + <div class="inline" style="margin-right: 5px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding-top: 5px; background: white">X</div> + </div> + <div class="outline-container"> + <span>XX</span> + </div> + <div class="outline-container"> + <div class="inline" style="margin: 0px 5px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding-top: 5px; background: white">X</div> + </div> + <div class="outline-container" style="width: 30px; display: grid; grid: repeat(3, 5px) / repeat(6, 5px);"> + <div style="grid-column: 2 / span 2; grid-row: 2 / span 2; background: lime;"></div> + <div style="grid-column: 5 / span 2; grid-row: 1 / span 2; background: lime;"></div> + </div> + </div> + <div> + <div class="outline-container"> + <span>XX</span> + </div> + <div class="outline-container"> + <div class="inline" style="margin-left: 20px;">XX</div> + </div> + <div class="outline-container"> + <div class="inline" style="margin-right: 20px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; display: grid; grid: repeat(3, 10px) / repeat(2, 10px);"> + <div style="grid-column: 2; grid-row: 1; background: lime;"></div> + <div style="grid-column: 1; grid-row: 3; background: lime;"></div> + </div> + <div class="outline-container"> + <span>XX</span> + </div> + <div class="outline-container"> + <div class="inline" style="margin: 0px 20px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; display: grid; grid: repeat(3, 10px) / repeat(2, 10px);"> + <div style="grid-column: 2; grid-row: 1; background: lime;"></div> + <div style="grid-column: 1; grid-row: 3; background: lime;"></div> + </div> + <div class="outline-container" style="width: 60px; height: 60px; display: grid; grid: repeat(6, 10px) / repeat(6, 10px);"> + <div style="grid-column: 1; grid-row: 6; background: lime;"></div> + <div style="grid-column: 4; grid-row: 3; background: lime;"></div> + </div> + </div> + <div> + <div class="outline-container"> + <span>XX</span> + </div> + <div class="outline-container"> + <div class="inline" style="padding-left: 5px;">XX</div> + </div> + <div class="outline-container"> + <div class="inline" style="padding-right: 5px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding-top: 5px; background: white">X</div> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding-bottom: 5px; background: white">X</div> + </div> + <div class="outline-container"> + <div class="inline" style="padding: 0px 5px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding: 5px 0px; background: white">X</div> + </div> + <div class="outline-container" style="width: 30px; background: lime;"> + <div class="inline" style="padding: 5px; background: white">X</div> + </div> + </div> + <div> + <div class="outline-container"> + <span>XX</span> + </div> + <div class="outline-container"> + <div class="inline" style="padding-left: 20px;">XX</div> + </div> + <div class="outline-container"> + <div class="inline" style="padding-right: 20px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding-top: 20px; background: white">X</div> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding-bottom: 20px; background: white">X</div> + </div> + <div class="outline-container"> + <div class="inline" style="padding: 0px 20px;">X</div><span>X</span> + </div> + <div class="outline-container" style="width: 20px; background: lime;"> + <div class="inline" style="padding: 20px 0px; background: white">X</div> + </div> + <div class="outline-container" style="width: 60px; height: 60px; display: grid; grid: repeat(6, 10px) / repeat(6, 10px);"> + <div style="grid-column: 1; grid-row: 6; background: lime;"></div> + <div style="grid-column: 4; grid-row: 3; background: lime;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-offset.html b/testing/web-platform/tests/css/css-ui/reference/outline-offset.html new file mode 100644 index 0000000000..63f852ca46 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-offset.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> + <title>ttwf-reftest-outline-offset-ref</title> + <link rel="author" title="jy-jeung" href="mailto:kein119@naver.com"> + <style type="text/css"> + div + { + display:inline-block; + margin:10px; + width:180px; + height:80px; + border:2px solid green; + outline:2px solid red; + outline-offset:10px; + } + </style> +</head> +<body> + <p>PASS if there a space between the border.</p> + <div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-style-011-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-style-011-ref.html new file mode 100644 index 0000000000..ae8a418890 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-style-011-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<style> + #test { + border: 4px dotted green; + height: 100px; + margin: 26px; + width: 100px; + } +</style> +<body> + <p>Test passes if there is a blank square with <strong>a green dotted</strong> border.</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-style-012-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-style-012-ref.html new file mode 100644 index 0000000000..efdb182974 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-style-012-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<style> + #parent { + border: 4px dotted blue; + height: 150px; + margin: 26px; + width: 150px; + } + #child { + border: 4px dotted green; + height: 110px; + margin: 16px; + width: 110px; + } +</style> +<body> + <p>Test passes if there is a blank square with <strong>a green dotted</strong> border centered inside a blue dotted border.</p> + <div id="parent"> + <div id="child"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-style-013-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-style-013-ref.html new file mode 100644 index 0000000000..1d635037f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-style-013-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<style> + #test { + border: 2px dashed green; + height: 150px; + margin: 28px; + width: 150px; + } +</style> +<body> + <p>Test passes if there is a blank square whose border is <strong>green dashed</strong>.</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-style-014-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-style-014-ref.html new file mode 100644 index 0000000000..345be332be --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-style-014-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<style> + #test { + border: 4px double green; + height: 150px; + margin: 26px; + width: 150px; + } +</style> +<body> + <p>Test passes if there is a blank square whose border is <strong>two green solid lines</strong>.</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/outline-with-padding-001-ref.html b/testing/web-platform/tests/css/css-ui/reference/outline-with-padding-001-ref.html new file mode 100644 index 0000000000..62b0c41757 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/outline-with-padding-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<style> +inline-block { + display: inline-block; + width: 65px; + color: transparent; + background: orange; +} +spacer { + display: inline-block; + width: 99px; +} +</style> +<body> +<div style="display: flex"> + <span style="outline: auto"> + <spacer></spacer><inline-block>Previous</inline-block> + </span> +</div> + +<div style="display: inline-block; outline: auto; white-space: nowrap;"> + <spacer></spacer><inline-block>Previous</inline-block> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-001-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-001-ref.html new file mode 100644 index 0000000000..9e9303106a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font-size: 10px; + } + span { + font-family: Ahem; + font-size: 30px; + } +</style> +<body> + <p>Test passes if there is a <strong>black rectangle</strong> below.</p> + <div> + <span>Test</span> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-002-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-002-ref.html new file mode 100644 index 0000000000..21bf0afd54 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-002-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference File</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font-size: 10px; + } + span { + font-family: Ahem; + font-size: 30px; + } +</style> +<body> + <p>PREREQUISITE: The font used must have a glyph for the U+2026 character.</p> + <p>Test passes if there is an <strong>ellipsis</strong> after a black rectangle below.</p> + <div> + <span>Test</span>… + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-005-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-005-ref.html new file mode 100644 index 0000000000..1ad5eabed7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-005-ref.html @@ -0,0 +1,8 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS-UI test reference</title> +<link rel="author" title="Michael Howell" href="mailto:michael@notriddle.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style>html{font-family:Ahem}</style> +<div style="width:20em"><p style="text-overflow:ellipsis;overflow:hidden">XXXXXXXXXX</p></div> + diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-006-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-006-ref.html new file mode 100644 index 0000000000..cec2ba0e80 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-006-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + white-space: pre; + font-family: monospace; +} +</style> + +<p>Test passes if “PASS…” appears below.</p> +<div>PASS…</div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-008-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-008-ref.html new file mode 100644 index 0000000000..e95924a968 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-008-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference File</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font-size: 100px; + line-height: 1; + font-family: Ahem; + overflow: hidden; + width: 0.5em; + color: green; +} +</style> + +<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> +<div>x</div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-012-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-012-ref.html new file mode 100644 index 0000000000..700f9c896f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-012-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test Reference File</title> +<style> +div { + font-size: 50px; + white-space: pre; + color: green; +} +span { + color: white; +} +</style> + +<p>Test passes if there are three green dots below and <strong>no red</strong>.</p> + +<div> …<span>กำ</span></div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-013-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-013-ref.html new file mode 100644 index 0000000000..4dd394e925 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-013-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + overflow: hidden; + white-space: pre; + font: 100px/1 Ahem; + width: 2em; +} +.green { + position: absolute; + width: 100px; + height: 100px; + background: green; + margin-left: 100px; +} +span { + vertical-align: sub; +} +</style> + +<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.</p> +<div class="green"></div> +<div class=test><span><br><div class="green"></div><br><div class="green"></div></span></div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-016-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-016-ref.html new file mode 100644 index 0000000000..a5a983aff5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-016-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + margin-left: 60px; + background: green; + width: 40px; + height: 40px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div></div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-021-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-021-ref.html new file mode 100644 index 0000000000..466755df6f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-021-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: test reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { + font-family: monospace; + width: 16ch; + white-space: pre; + overflow: scroll; + border: solid blue; +} +</style> + +<p>This test passes if the text is in the blue box below is “PASS”. +<div id=test> PASS</div> +<script> +var test = document.getElementById("test"); +test.scrollBy(500,0); +</script> + + diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-022-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-022-ref.html new file mode 100644 index 0000000000..db7d08f450 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-022-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test Reference File</title> +<style> +div { + font-size: 50px; + white-space: pre; + color: green; +} +span { + color: transparent; +} +</style> + +<p>Test passes if there are three green dots below and <strong>no red</strong>.</p> + +<div> …<span>l⃞</span></div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-027-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-027-ref.html new file mode 100644 index 0000000000..8fc664b5d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-027-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test Reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { font-family: monospace; } +</style> + +<p>The test passes if the following text is visible below: 123456 FE…</p> +<div>123456 FE…</bdo></div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-028-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-028-ref.html new file mode 100644 index 0000000000..b25ab2600b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-028-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test Reference</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<style> +div { font-family: monospace; } +</style> + +<p>The test passes if the following text is visible below: …56 FEDCBA</p> +<div>…56 FEDCBA</div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-029-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-029-ref.html new file mode 100644 index 0000000000..9cdd741ec2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-029-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Basic User Interface Reference</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<style> +div { font: 20px monospace; } +</style> + +<div>Test passed…</div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-030-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-030-ref.html new file mode 100644 index 0000000000..5e4f4936a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-030-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> +.positioned { + background-color: green; + position: absolute; + width: 100px; + height: 100px; +} +</style> +<p>Test passes if there is a green rectangle and no red.</p> +<div class="positioned"></div> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-change-color-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-change-color-ref.html new file mode 100644 index 0000000000..c1d94571cd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-change-color-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<style> +div { + color: lime; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + font-size: 50px; + width: 5ch; +} +</style> +<body> +<div id=container>123456789</div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/reference/text-overflow-ellipsis-indent-001-ref.html b/testing/web-platform/tests/css/css-ui/reference/text-overflow-ellipsis-indent-001-ref.html new file mode 100644 index 0000000000..660a7c4d52 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/reference/text-overflow-ellipsis-indent-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<style> +div { + text-overflow: ellipsis; + overflow: hidden; + font-size: 10px; +} +</style> +<body> + <div style="padding-left: 3ch">123456</div> + <div style="padding-left: 3ch; width: 6ch">1234567</div> + <div style="padding-left: 6ch;">123</div> + <div style="padding-left: 6ch; width: 3ch">1234</div> + <div>123456789</div> + <div style="width: 9ch">1234567890</div> +</body> |