diff options
Diffstat (limited to 'testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls')
16 files changed, 571 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html new file mode 100644 index 0000000000..478b8db485 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type="datetime-local"> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html new file mode 100644 index 0000000000..f8590ee561 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/datetime-dynamic-type-change.html @@ -0,0 +1,9 @@ +<!doctype html> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1797139"> +<link rel="match" href="datetime-dynamic-type-change-ref.html"> +<input type="date"> +<script> + onload = function() { + document.querySelector("input").type = "datetime-local"; + } +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html new file mode 100644 index 0000000000..1bee40359a --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>used value and computed value of 'line-height' on input elements as text entry widgets</title> +<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-input-element-as-a-text-entry-widget"> +<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"> +<link rel="help" href="https://drafts.css-houdini.org/css-typed-om/#computed-stylepropertymapreadonly-objects"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + input { line-height: 1px; } +</style> +<p><input type=text value=text> +<p><input type=tel value=tel> +<p><input type=search value=search> +<p><input type=url value=url> +<p><input type=email value=email> +<p><input type=password value=password></p> +<script> +const inputs = document.querySelectorAll('input'); +for (const input of inputs) { + test(() => { + const usedLineHeight = getComputedStyle(input).lineHeight; + assert_not_equals(usedLineHeight, '1px', 'usedLineHeight'); + assert_not_equals(usedLineHeight, 'normal', 'usedLineHeight'); + }, `getComputedStyle(<input type=${input.type}>).lineHeight should return a used value that is no smaller than 'normal' (but should not literally be 'normal')`); + test(() => { + const computedLineHeight = input.computedStyleMap().get('line-height'); + assert_equals(computedLineHeight.value, 1, 'computedLineHeight.value'); + assert_equals(computedLineHeight.unit, 'px', 'computedLineHeight.unit'); + }, `<input type=${input.type}>.computedStyleMap().get('line-height') should not be affected by the used value clamping`); +} +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html new file mode 100644 index 0000000000..abf50b8728 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<title>Reference for 'line-height' smaller than 'normal' on input elements as text entry widgets</title> +<style> + input { font-size: 60px; width: 240px; } + .appearance-none { appearance: none; } +</style> +<p><input type=text value=text> <input type=text value=text class=appearance-none> +<p><input type=tel value=tel> <input type=tel value=tel class=appearance-none> +<p><input type=search value=search> <input type=search value=search class=appearance-none> +<p><input type=url value=url> <input type=url value=url class=appearance-none> +<p><input type=email value=email> <input type=email value=email class=appearance-none> +<p><input type=password value=password> <input type=password value=password class=appearance-none> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html new file mode 100644 index 0000000000..bfcd3665be --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-line-height.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>'line-height' smaller than 'normal' on input elements as text entry widgets</title> +<link rel="match" href="input-line-height-ref.html"> +<style> + input { font-size: 60px; line-height: 40px; width: 240px; } + .appearance-none { appearance: none; } +</style> +<p><input type=text value=text> <input type=text value=text class=appearance-none> +<p><input type=tel value=tel> <input type=tel value=tel class=appearance-none> +<p><input type=search value=search> <input type=search value=search class=appearance-none> +<p><input type=url value=url> <input type=url value=url class=appearance-none> +<p><input type=email value=email> <input type=email value=email class=appearance-none> +<p><input type=password value=password> <input type=password value=password class=appearance-none> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html new file mode 100644 index 0000000000..856146dec4 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height-ref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input placeholder=Foo> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html new file mode 100644 index 0000000000..7af4e65b09 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/input-placeholder-line-height.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>line-height has no effect on placeholder</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1714631"> +<link rel="match" href="input-placeholder-line-height-ref.html"> +<style> + input::placeholder { + line-height: 0; + } +</style> +<input placeholder=Foo> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html new file mode 100644 index 0000000000..39ad44cfc0 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/placeholder-opacity-default.tentative.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8" /> + <title>Placeholder Test: opacity default value</title> + <link rel="author" title="Karl Dubost" href="mailto:kdubost@mozilla.com" + /> + <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo" + /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + </head> + <body> + <input + id="opacity" + placeholder="::placeholder should have default opacity: 1" + /> + <script> + test(function () { + var target = document.getElementById("opacity"); + assert_equals(getComputedStyle(target, '::placeholder').opacity, "1"); + }, "Default opacity value is '1'"); + </script> + </body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html new file mode 100644 index 0000000000..db21188ee3 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/resets.html @@ -0,0 +1,118 @@ +<!doctype html> +<title>default style resets</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> +/* Have some non-initial values on the parent so we can tell the difference whether the UA stylesheet uses 'initial' keyword. */ +#tests, #refs { + letter-spacing: 5px; + word-spacing: 5px; + line-height: 5px; + text-transform: uppercase; + text-indent: 5px; + text-shadow: 0 0 5px transparent; + text-align: right; +} +</style> +<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); + +input, select, button, textarea { + letter-spacing: initial; + word-spacing: initial; + line-height: initial; + text-transform: initial; + text-indent: initial; + text-shadow: initial; +} +input, select, textarea { + text-align: initial; +} +input[type=reset i], input[type=button i], input[type=submit i], button { + text-align: center; +} +input[type=radio i], input[type=checkbox i], input[type=reset i], input[type=button i], +input[type=submit i], input[type=color i], input[type=search i], select, button { + box-sizing: border-box; +} +input, button { + display: inline-block; +} +input:not([type=image i], [type=range i], [type=checkbox i], [type=radio i]) { + overflow: clip; + overflow-clip-margin: 0; +} +/* in spec prose: */ select, textarea, meter, progress { + display: inline-block; +} +input[type=hidden i] { display: none !important; } +marquee { + text-align: initial; +} +table { display: table; box-sizing: border-box; } +caption { display: table-caption; } +colgroup, colgroup[hidden] { display: table-column-group; } +col, col[hidden] { display: table-column; } +thead, thead[hidden] { display: table-header-group; } +tbody, tbody[hidden] { display: table-row-group; } +tfoot, tfoot[hidden] { display: table-footer-group; } +tr, tr[hidden] { display: table-row; } +td, th { display: table-cell; } +table { + text-indent: initial; +} +</style> + +<div id="tests"> + <input type="hidden"> + <input type="text"> + <input type="search"> + <input type="tel"> + <input type="url"> + <input type="email"> + <input type="password"> + <input type="date"> + <input type="month"> + <input type="week"> + <input type="time"> + <input type="datetime-local"> + <input type="number"> + <input type="range"> + <input type="color"> + <input type="checkbox"> + <input type="radio"> + <input type="file"> + <input type="submit"> + <input type="image"> + <input type="reset"> + <input type="button"> + <select><optgroup><option></select> + <select multiple></select> + <optgroup></optgroup> + <option></option> + <button></button> + <textarea></textarea> + <table><tbody><tr><td></table> + <marquee></marquee> +</div> + +<div id="refs"></div> + +<script> + const props = ['letter-spacing', + 'word-spacing', + 'line-height', + 'text-transform', + 'text-indent', + 'text-shadow', + 'text-align', + 'display', + 'overflow', + 'overflow-clip-margin', + 'box-sizing']; + runUAStyleTests(props); + +</script> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html new file mode 100644 index 0000000000..47046f6c25 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-fixedpos-crash.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel=author href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel=author href="https://mozilla.org" title="Mozilla"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1741776"> +<style> +#a { + rotate: 1deg 1 0 44; + filter: drop-shadow(81px 6px 0px red); +} +</style> +<script> +window.onload = function() { + document.getElementById("b").appendChild(document.getElementById("c")); +} +</script> +<select id="a" multiple="multiple"> + <option id="b">x</option> +</select> +<div id="c" style="position: fixed; top: 0; left: 0;"> + x +</div> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html new file mode 100644 index 0000000000..c59a6e1d98 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Reference for sizing of select elements, with wide vs. empty option selected</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <style> + select { + color: transparent; + margin: 1px; + } + div.customBorder > select { + /* This class is to let us test select elements *without* native theming + (for browsers that have both native and non-native controls): */ + border: 3px solid black; + } + </style> +</head> +<body> + <div> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + </div> + + <!-- This is the same as above, but now with a custom border on the + select elements: --> + <div class="customBorder"> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + <br> + <select> + <option>some wide option</option> + </select> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html new file mode 100644 index 0000000000..e8db3eae1d --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/select-sizing-001.html @@ -0,0 +1,77 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Test for sizing of select elements, with wide vs. empty option selected</title> + <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> + <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#list-box"> + <link rel="match" href="select-sizing-001-ref.html"> + <style> + select { + color: transparent; + margin: 1px; + } + div.customBorder > select { + /* This class is to let us test select elements *without* native theming + (for browsers that have both native and non-native controls): */ + border: 3px solid black; + } + </style> +</head> +<body> + <div> + <!-- Wide thing is 2nd, and not selected: --> + <select> + <option></option> + <option>some wide option</option> + </select> + <br> + <!-- Wide thing is 2nd, and selected: --> + <select> + <option></option> + <option selected>some wide option</option> + </select> + <br> + <!-- Wide thing is 1st, and selected (implicitly): --> + <select> + <option>some wide option</option> + <option></option> + </select> + <br> + <!-- Wide thing is 1st, and not selected: --> + <select> + <option>some wide option</option> + <option selected></option> + </select> + </div> + + <!-- This is the same as above, but now with a custom border on the + select elements: --> + <div class="customBorder"> + <!-- Wide thing is 2nd, and not selected: --> + <select> + <option></option> + <option>some wide option</option> + </select> + <br> + <!-- Wide thing is 2nd, and selected: --> + <select> + <option></option> + <option selected>some wide option</option> + </select> + <br> + <!-- Wide thing is 1st, and selected (implicitly): --> + <select> + <option>some wide option</option> + <option></option> + </select> + <br> + <!-- Wide thing is 1st, and not selected: --> + <select> + <option>some wide option</option> + <option selected></option> + </select> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html new file mode 100644 index 0000000000..5dc26a78db --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> +</head> +<body> + <span>THIS TEXT SHOULD BE UPPER-CASE.</span><br /> + + <input type="text" value="this text should be lower-case."><br /> + + <select> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <optgroup label="this text should be lower-case."> + <option>this text should be lower-case.</option> + </optgroup> + </select><br /> + + <select> + <option>THIS TEXT SHOULD BE UPPER-CASE.</option> + </select><br /> + <select multiple> + <option>THIS TEXT SHOULD BE UPPER-CASE.</option> + </select><br /> + <select multiple> + <optgroup label="THIS TEXT SHOULD BE UPPER-CASE."> + <option>THIS TEXT SHOULD BE UPPER-CASE.</option> + </optgroup> + </select><br /> + + <button>this text should be lower-case.</button><br /> + + <textarea>this text should be lower-case.</textarea><br /> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html new file mode 100644 index 0000000000..f57f092982 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/text-transform.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <link rel="match" href="text-transform-ref.html"> +</head> +<body style="text-transform: uppercase;"> + <span>this text should be upper-case.</span><br /> + + <input type="text" value="this text should be lower-case."><br /> + + <select> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <option>this text should be lower-case.</option> + </select><br /> + <select multiple> + <optgroup label="this text should be lower-case."> + <option>this text should be lower-case.</option> + </optgroup> + </select><br /> + + <select style="text-transform: uppercase;"> + <option>this text should be upper-case.</option> + </select><br /> + <select multiple style="text-transform: uppercase;"> + <option>this text should be upper-case.</option> + </select><br /> + <select multiple style="text-transform: uppercase;"> + <optgroup label="this text should be upper-case."> + <option>this text should be upper-case.</option> + </optgroup> + </select><br /> + + <button>this text should be lower-case.</button><br /> + + <textarea>this text should be lower-case.</textarea><br /> +</body> +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html new file mode 100644 index 0000000000..8093efe5e8 --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display-ref.html @@ -0,0 +1,47 @@ +<!doctype html> +<html> +<title>Reference: toggle 'display' test</title> + +<div id="tests"> + <input type="hidden"> + <input type="text"> + <input type="text" value="a"> + <input type="search"> + <input type="search" value="a"> + <input type="tel"> + <input type="tel" value="123456789"> + <input type="url"> + <input type="url" value="http://a"> + <input type="email"> + <input type="email" value="a"> + <input type="password"> + <input type="password" value="a"> + <input type="date"> + <input type="month"> + <input type="week"> + <input type="time"> + <input type="datetime-local"> + <input type="number"> + <input type="range"> + <input type="color"> + <input type="checkbox"> + <input type="radio"> + <input type="file"> + <input type="submit"> + <input type="image"> + <input type="reset"> + <input type="button"> + <input type="button" value="a"> + <select><optgroup><option></select> + <select><optgroup><option>a</select> + <select multiple></select> + <select multiple><optgroup>a</optgroup><option>b</option></select> + <optgroup></optgroup> + <option></option> + <button></button> + <button>a</button> + <textarea></textarea> + <textarea>a</textarea> +</div> + +</html> diff --git a/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html new file mode 100644 index 0000000000..127679b2ad --- /dev/null +++ b/testing/web-platform/tests/html/rendering/non-replaced-elements/form-controls/toggle-display.html @@ -0,0 +1,64 @@ +<!doctype html> +<html class="reftest-wait"> +<title>toggle 'display' test</title> +<meta charset="utf-8"> +<link rel="match" href="toggle-display-ref.html"> + +<div id="tests"> + <input type="hidden"> + <input type="text"> + <input type="text" value="a"> + <input type="search"> + <input type="search" value="a"> + <input type="tel"> + <input type="tel" value="123456789"> + <input type="url"> + <input type="url" value="http://a"> + <input type="email"> + <input type="email" value="a"> + <input type="password"> + <input type="password" value="a"> + <input type="date"> + <input type="month"> + <input type="week"> + <input type="time"> + <input type="datetime-local"> + <input type="number"> + <input type="range"> + <input type="color"> + <input type="checkbox"> + <input type="radio"> + <input type="file"> + <input type="submit"> + <input type="image"> + <input type="reset"> + <input type="button"> + <input type="button" value="a"> + <select><optgroup><option></select> + <select><optgroup><option>a</select> + <select multiple></select> + <select multiple><optgroup>a</optgroup><option>b</option></select> + <optgroup></optgroup> + <option></option> + <button></button> + <button>a</button> + <textarea></textarea> + <textarea>a</textarea> +</div> + +<script> +window.onload = () => { + requestAnimationFrame(() => { + requestAnimationFrame(() => { + let tests = document.querySelector('#tests'); + tests.style.display = 'none'; + requestAnimationFrame(() => { + tests.style.display = ''; + document.documentElement.classList.remove("reftest-wait"); + }); + }); + }); +} +</script> + +</html> |