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/html/rendering/widgets/appearance | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.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/html/rendering/widgets/appearance')
9 files changed, 214 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-001.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-001.html new file mode 100644 index 0000000000..7d7474e0a4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>compute the kind of widget: author origin and animation origin</title> +<link rel="match" href="appearance-transition-001-ref.html"> +<style> + input { + background-color: rgb(0, 0, 0); + } + .bg200 { + animation: 1e10s steps(2, start) animate-bg; + } + @keyframes animate-bg { + to { + background-color: rgb(0, 200, 0); + } + } +</style> +<input value="text" id=input> +<script> + document.documentElement.offsetTop; + input.classList.toggle('bg200'); +</script> +<p>PASS if the input field has a dark green background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-002-ref.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-002-ref.html new file mode 100644 index 0000000000..fab70234d2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-002-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<input value="text"> +<p>PASS if the input field does not have a red background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-002.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-002.html new file mode 100644 index 0000000000..acca93eae7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-animation-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>compute the kind of widget: animation origin only</title> +<link rel="match" href="appearance-animation-002-ref.html"> +<style> + .bg200 { + animation: 1e10s steps(2, start) animate-bg; + } + @keyframes animate-bg { + to { + background-color: rgb(255, 0, 0); + } + } +</style> +<input value="text" id=input> +<script> + document.documentElement.offsetTop; + input.classList.toggle('bg200'); +</script> +<p>PASS if the input field does not have a red background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-001-ref.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-001-ref.html new file mode 100644 index 0000000000..69726c6cd2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-001-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> + input { background-color: rgb(0, 100, 0); } +</style> +<input value="text"> +<p>PASS if the input field has a dark green background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-001.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-001.html new file mode 100644 index 0000000000..ec51cf9be5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>compute the kind of widget: author origin and transition origin</title> +<link rel="help" href="https://crbug.com/1086732"> +<link rel="match" href="appearance-transition-001-ref.html"> +<style> + input { + background-color: rgb(0, 0, 0); + transition: background-color 1e10s steps(2, start); + } + + .bg200 { + background-color: rgb(0, 200, 0); + } +</style> +<input value="text" id=input> +<script> + document.documentElement.offsetTop; + input.classList.toggle('bg200'); +</script> +<p>PASS if the input field has a dark green background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-002-ref.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-002-ref.html new file mode 100644 index 0000000000..febd6c55aa --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-002-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<style> + input { background-color: rgb(128, 228, 128); } +</style> +<input value="text"> +<p>PASS if the input field has a light green background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-002.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-002.html new file mode 100644 index 0000000000..b6c2a3dcad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>compute the kind of widget: transition origin without author origin style before the transition</title> +<link rel="match" href="appearance-transition-002-ref.html"> +<style> + input { + transition: background-color 1e10s steps(2, start); + } + + .bg200 { + background-color: rgb(0, 200, 0); + } +</style> +<input value="text" id=input> +<script> + document.documentElement.offsetTop; + input.classList.toggle('bg200'); +</script> +<p>PASS if the input field has a light green background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-003.html b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-003.html new file mode 100644 index 0000000000..109617b7b7 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/appearance-transition-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>compute the kind of widget: transition origin without author origin style after the transition</title> +<link rel="match" href="appearance-animation-002-ref.html"> +<style> + input { + transition: background-color 1e10s steps(2, start); + } + + .bg200 { + background-color: rgb(255, 0, 0); + } +</style> +<input value="text" id=input class=bg200> +<script> + document.documentElement.offsetTop; + input.classList.toggle('bg200'); +</script> +<p>PASS if the input field does not have a red background</p> diff --git a/testing/web-platform/tests/html/rendering/widgets/appearance/default-styles.html b/testing/web-platform/tests/html/rendering/widgets/appearance/default-styles.html new file mode 100644 index 0000000000..8869808696 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/appearance/default-styles.html @@ -0,0 +1,96 @@ +<!doctype html> +<title>HTML: default style for 'appearance'</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> +<script> +// namespaces +const htmlns = 'http://www.w3.org/1999/xhtml'; +const svgns = 'http://www.w3.org/2000/svg'; + +// auto +testAppearance(htmlns, 'input', null, 'auto'); +testAppearance(htmlns, 'input', {type: 'text'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'TEXT'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'search'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'tel'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'url'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'email'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'password'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'date'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'month'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'week'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'time'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'datetime-local'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'number'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'range'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'color'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'checkbox'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'radio'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'submit'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'reset'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'button'}, 'auto'); +testAppearance(htmlns, 'input', {type: 'unknowntype'}, 'auto'); +testAppearance(htmlns, 'select', null, 'auto'); +testAppearance(htmlns, 'select', {multiple: ''}, 'auto'); +testAppearance(htmlns, 'select', {size: '2'}, 'auto'); +testAppearance(htmlns, 'button', null, 'auto'); +testAppearance(htmlns, 'textarea', null, 'auto'); +testAppearance(htmlns, 'meter', null, 'auto'); +testAppearance(htmlns, 'progress', null, 'auto'); + +// none +testAppearance(htmlns, 'input', {type: 'hidden'}, 'none'); +testAppearance(htmlns, 'input', {type: 'HIDDEN'}, 'none'); +testAppearance(htmlns, 'input', {type: 'file'}, 'none'); +testAppearance(htmlns, 'input', {type: 'image'}, 'none'); +testAppearance(htmlns, 'div', null, 'none'); +testAppearance(htmlns, 'details', null, 'none'); +testAppearance(htmlns, 'summary', null, 'none'); +testAppearance(htmlns, 'video', null, 'none'); +testAppearance(htmlns, 'video', {controls: ''}, 'none'); +testAppearance(htmlns, 'menuitem', null, 'none'); +testAppearance(htmlns, 'marquee', null, 'none'); +testAppearance(htmlns, 'keygen', null, 'none'); +testAppearance(null, 'input', null, 'none'); +testAppearance(svgns, 'input', null, 'none'); + +test(t => { + assertAppearance(document.documentElement, 'none'); +}, 'The html element'); + +test(t => { + assertAppearance(document.body, 'none'); +}, 'The body element'); + + +function testAppearance(ns, tag, attributes, expected) { + test(t => { + const elm = document.createElementNS(ns, tag); + for (const att in attributes) { + elm.setAttribute(att, attributes[att]); + } + document.body.appendChild(elm); + t.add_cleanup(() => elm.remove()); + assertAppearance(elm, expected); + }, formatTestName(ns, tag, attributes)); +} + +function assertAppearance(elm, expected) { + const computedStyle = getComputedStyle(elm); + assert_equals(computedStyle.getPropertyValue('-webkit-appearance'), expected, '-webkit-appearance'); + assert_equals(computedStyle.getPropertyValue('appearance'), expected, 'appearance (no prefix)'); +} + +function formatTestName(ns, tag, attributes) { + let s = `<${tag}`; + for (const att in attributes) { + s += ` ${att}="${attributes[att]}"`; + } + s += '>'; + if (ns !== htmlns) { + s += ` (namespace: ${ns})`; + } + return s; +} +</script> |