diff options
Diffstat (limited to '')
16 files changed, 367 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-add-label-quirks.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-add-label-quirks.html new file mode 100644 index 0000000000..2c3c8093e2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-add-label-quirks.html @@ -0,0 +1,20 @@ +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT -- Adding a label (quirks)</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> +<link rel="match" href="option-label-ref.html"> +<meta name="assert" content="An option element is expected to be rendered by displaying the element's label."> + +<select> + <option>Element Text</option> +</select> +<br/> +<select size="4"> + <option>Element Text</option> +</select> +<script> +let options = document.querySelectorAll("option"); +options[0].getBoundingClientRect(); // force layout. +for (let option of options) { + option.setAttribute("label", "Label Text"); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-add-label.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-add-label.html new file mode 100644 index 0000000000..5110164c31 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-add-label.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT -- Adding a label</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> +<link rel="match" href="option-label-ref.html"> +<meta name="assert" content="An option element is expected to be rendered by displaying the element's label."> + +<select> + <option>Element Text</option> +</select> +<br/> +<select size="4"> + <option>Element Text</option> +</select> +<script> +let options = document.querySelectorAll("option"); +options[0].getBoundingClientRect(); // force layout. +for (let option of options) { + option.setAttribute("label", "Label Text"); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-checked-styling-ref.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-checked-styling-ref.html new file mode 100644 index 0000000000..92504a47b5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-checked-styling-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Stylability of select>option with :checked pseudo</title> +<link rel="author" href="mailto:masonf@chromium.org"> + +<style> + option { + color: black; + } + #option2 { + background-color: red; + } + #option1 { + background: green; + } +</style> + +<select id=select size=3 multiple> + <option id=option1>Option #1 (should be green)</option> + <option id=option2>Option #2 (should be red)</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-checked-styling.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-checked-styling.html new file mode 100644 index 0000000000..216b03a88a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-checked-styling.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Stylability of select>option with :checked pseudo</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element"> +<link rel="match" href="option-checked-styling-ref.html"> + +<style> + option { + color: black; + background-color: red; + } + option:checked { + background: green; + } +</style> + +<select id=select size=3 multiple> + <option id=option1 selected>Option #1 (should be green)</option> + <option id=option2>Option #2 (should be red)</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-empty-label-to-empty-string.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-empty-label-to-empty-string.html new file mode 100644 index 0000000000..c8aa4d20b2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-empty-label-to-empty-string.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT -- Adding a label</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> +<link rel="match" href="option-label-ref.html"> +<meta name="assert" content="An option element is expected to be rendered by displaying the element's label."> + +<select> + <option label="Element Text">Label Text</option> +</select> +<br/> +<select size="4"> + <option label="Element Text">Label Text</option> +</select> +<script> +let options = document.querySelectorAll("option"); +options[0].getBoundingClientRect(); // force layout. +for (let option of options) { + option.setAttribute("label", ""); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-empty-label.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-empty-label.html new file mode 100644 index 0000000000..a34c41d299 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-empty-label.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT -- Empty label uses Element text</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> +<link rel="match" href="option-label-ref.html"> +<meta name="assert" content="An option element is expected to be rendered by displaying the element's label."> + +<select> + <option label>Label Text</option> +</select> +<br/> +<select size="4"> + <option label>Label Text</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-label-and-text.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-label-and-text.html new file mode 100644 index 0000000000..152bfdcb6a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-label-and-text.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT - Prefers label over element text</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> +<link rel="match" href="option-label-ref.html"> +<meta name="assert" content="An option element is expected to be rendered by displaying the element's label."> + +<select> + <option label="Label Text">Element Text</option> +</select> +<br/> +<select size="4"> + <option label="Label Text">Element Text</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-label-ref.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-label-ref.html new file mode 100644 index 0000000000..3dd07b8dc2 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-label-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT (reference)</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> + +<select> + <option>Label Text</option> +</select> +<br/> +<select size="4"> + <option>Label Text</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-only-label.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-only-label.html new file mode 100644 index 0000000000..5e3c06cd66 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-only-label.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT -- Only a label</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> +<link rel="match" href="option-label-ref.html"> +<meta name="assert" content="An option element is expected to be rendered by displaying the element's label."> + +<select> + <option label="Label Text"></option> +</select> +<br/> +<select size="4"> + <option label="Label Text"></option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-rm-label.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-rm-label.html new file mode 100644 index 0000000000..a5272cf6f1 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/option-rm-label.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>OPTION's label attribute in SELECT -- Removing the label</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2"> +<link rel="match" href="option-label-ref.html"> +<meta name="assert" content="An option element is expected to be rendered by displaying the element's label."> + +<select> + <option label="Bad Label Text">Label Text</option> +</select> +<br/> +<select size="4"> + <option label="Bad Label Text">Label Text</option> +</select> +<script> +let options = document.querySelectorAll("option"); +options[0].getBoundingClientRect(); // force layout. +for (let option of options) { + option.removeAttribute("label"); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-as-listbox-default-styles.tentative.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-as-listbox-default-styles.tentative.html new file mode 100644 index 0000000000..3e9b001f99 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-as-listbox-default-styles.tentative.html @@ -0,0 +1,113 @@ +<!doctype html> +<title>default styles for select as a listbox</title> +<meta name="viewport" content="width=device-width"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/html/rendering/support/test-ua-stylesheet.js"></script> +<style> +/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */ +@namespace url(urn:not-html); + +select { + letter-spacing: initial; + word-spacing: initial; + line-height: initial; + text-transform: initial; + text-indent: initial; + text-shadow: initial; + appearance: auto; +} + +select { + text-align: initial; +} + +select { + box-sizing: border-box; +} + +/* When the element renders as a list box, it is a devolvable widget expected to render as an 'inline-block' box whose 'height' is the height necessary to contain as many rows for items as given by the element's display size, or four rows if the attribute is absent, and whose 'width' is the width of the select's labels plus the width of a scrollbar. */ +select { + display: inline-block; +} + +</style> + +<style> +/* non-initial styles on parent to test 'initial' in UA stylesheet */ +#tests, #refs { + letter-spacing: 1px; + word-spacing: 1px; + line-height: 20px; + text-transform: lowercase; + text-indent: 1px; + text-shadow: 0px 0px; + text-align: justify; +} +</style> + +<div id="log"></div> + +<div id="tests"> + + <select multiple><option>1</option><optgroup label=2><option>3</select> + +</div> + +<div id="refs"></div> + +<script> + const props = [ + 'display', + 'margin-top', + 'margin-right', + 'margin-bottom', + 'margin-left', + 'padding-top', + 'padding-right', + 'padding-bottom', + 'padding-left', + 'letter-spacing', + 'word-spacing', + 'text-transform', + 'text-indent', + 'text-shadow', + 'appearance', + 'box-sizing', + 'border-top-width', + 'border-right-width', + 'border-bottom-width', + 'border-left-width', + 'border-top-style', + 'border-right-style', + 'border-bottom-style', + 'border-left-style', + 'border-top-color', + 'border-right-color', + 'border-bottom-color', + 'border-left-color', + 'align-items', + 'white-space', + 'color', + 'background-color', + 'cursor', + 'font-style', + 'font-weight', + 'font-size', + 'font-family', + 'writing-mode', + 'scrollbar-width', + 'overflow', + 'vertical-align', + 'user-select', + 'page-break-inside', + 'overflow-clip-box', + 'font-variant-ligatures', + 'font-variant-caps', + 'font-variant-numeric', + 'font-variant-east-asian', + 'text-rendering', + ]; + runUAStyleTests(props); + +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-invalidation-ref.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-invalidation-ref.html new file mode 100644 index 0000000000..7a3dd1d50d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-invalidation-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Select rendering invalidation</title> +<link rel="author" href="mailto:masonf@chromium.org"> + +<style> + select { + color: lime; + } +</style> + +<select id=select> + <option>The down arrow should be green</option> + <option>value B</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-invalidation.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-invalidation.html new file mode 100644 index 0000000000..199db0b7aa --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-invalidation.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>Select rendering invalidation</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element"> +<link rel="match" href="select-invalidation-ref.html"> + +<style> + select { + color: red; + } +</style> + +<select id=select> + <option>The down arrow should be green</option> + <option>value B</option> +</select> + +<script> + requestAnimationFrame(() => { + requestAnimationFrame(() => { + select.style.color = "lime"; + requestAnimationFrame(() => { + requestAnimationFrame(() => { + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); + }); +</script> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-001.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-001.html new file mode 100644 index 0000000000..ad4055415d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-001.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>select size=1 renders the same as plain select</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1643279"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="match" href="select-size-ref.html"> +<select size="1"> + <option value ="1">1</option> + <option value ="2">2</option> + <option value ="3">3</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-002.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-002.html new file mode 100644 index 0000000000..0838e7a3c6 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-002.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>select size=0 renders the same as plain select</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1643279"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="match" href="select-size-ref.html"> +<select size="0"> + <option value ="1">1</option> + <option value ="2">2</option> + <option value ="3">3</option> +</select> diff --git a/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-ref.html b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-ref.html new file mode 100644 index 0000000000..fc3b3be6e5 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/widgets/the-select-element/select-size-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<title>Test reference.</title> +<select> + <option value ="1">1</option> + <option value ="2">2</option> + <option value ="3">3</option> +</select> |