diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-ui')
1579 files changed, 37596 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-ui/META.yml b/testing/web-platform/tests/css/css-ui/META.yml new file mode 100644 index 0000000000..7ce4b54a22 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/META.yml @@ -0,0 +1,6 @@ +spec: https://drafts.csswg.org/css-ui/ +suggested_reviewers: + - frivoal + - mrego + - plinss + - svgeesus diff --git a/testing/web-platform/tests/css/css-ui/README.md b/testing/web-platform/tests/css/css-ui/README.md new file mode 100644 index 0000000000..c5557e4cb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/README.md @@ -0,0 +1 @@ +To update the generated tests, run `wpt update-built --include css-ui` diff --git a/testing/web-platform/tests/css/css-ui/accent-color-checkbox-checked-001-notref.html b/testing/web-platform/tests/css/css-ui/accent-color-checkbox-checked-001-notref.html new file mode 100644 index 0000000000..9f9d73177a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-checkbox-checked-001-notref.html @@ -0,0 +1,2 @@ +<!doctype html> +<input type=checkbox checked style="accent-color: blue"> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-checkbox-checked-001.html b/testing/web-platform/tests/css/css-ui/accent-color-checkbox-checked-001.html new file mode 100644 index 0000000000..46296e62e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-checkbox-checked-001.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>Accent color changes colors of a checked checkbox</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#widget-accent"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1705605"> +<link rel="mismatch" href="accent-color-checkbox-checked-001-notref.html"> + +<input type=checkbox checked style="accent-color: red"> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-computed.html b/testing/web-platform/tests/css/css-ui/accent-color-computed.html new file mode 100644 index 0000000000..d2d3241060 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-computed.html @@ -0,0 +1,24 @@ +<!doctype html> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#widget-accent"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #outer { accent-color: red; color: black; } +</style> +<div id="outer"> + <div id="target"></div> +</div> +<div id=noAccentColor></div> +<script> +test_computed_value('accent-color', 'initial', 'auto'); +test_computed_value('accent-color', 'inherit', 'rgb(255, 0, 0)'); +test_computed_value('accent-color', 'red', 'rgb(255, 0, 0)'); +test_computed_value('accent-color', 'blue', 'rgb(0, 0, 255)'); +test_computed_value('accent-color', 'auto', 'auto'); +test_computed_value('accent-color', 'currentcolor', 'rgb(0, 0, 0)'); +test_computed_value('accent-color', '#fff', 'rgb(255, 255, 255)'); + +// When accent-color isn't specified, it should return 'auto' +assert_equals(getComputedStyle(noAccentColor).accentColor, 'auto'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-invalidation-currentcolor-ref.html b/testing/web-platform/tests/css/css-ui/accent-color-invalidation-currentcolor-ref.html new file mode 100644 index 0000000000..7138dcc021 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-invalidation-currentcolor-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="accent-color: red"> + The following checkbox should be red: <input type=checkbox checked> +</div> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-invalidation-currentcolor.html b/testing/web-platform/tests/css/css-ui/accent-color-invalidation-currentcolor.html new file mode 100644 index 0000000000..804e8544b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-invalidation-currentcolor.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1225661"> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=match href="accent-color-invalidation-currentcolor-ref.html"> + +<div style="accent-color: currentColor"> + The following checkbox should be red: <input type=checkbox checked> +</div> + +<script> +async function rAF() { + return new Promise(resolve => requestAnimationFrame(resolve)); +} + +(async () => { + await rAF(); + await rAF(); + document.querySelector('input').style = 'color: red'; + await rAF(); + await rAF(); + document.documentElement.classList.remove('reftest-wait'); +})(); +</script> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-parent-currentcolor-ref.html b/testing/web-platform/tests/css/css-ui/accent-color-parent-currentcolor-ref.html new file mode 100644 index 0000000000..3930038a42 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-parent-currentcolor-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="accent-color: red; color: red"> + The following checkbox should be red: <input type=checkbox checked> +</div> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-parent-currentcolor.html b/testing/web-platform/tests/css/css-ui/accent-color-parent-currentcolor.html new file mode 100644 index 0000000000..32240cfab7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-parent-currentcolor.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=1225661"> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=match href="accent-color-parent-currentcolor-ref.html"> + +<div style="accent-color: currentColor; color: red"> + The following checkbox should be red: <input type=checkbox checked style="color:unset"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-parsing.html b/testing/web-platform/tests/css/css-ui/accent-color-parsing.html new file mode 100644 index 0000000000..4877d89fa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-parsing.html @@ -0,0 +1,20 @@ +<!doctype html> +<title>Parsing of accent-color</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#widget-accent"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('accent-color', 'initial'); +test_valid_value('accent-color', 'inherit'); +test_valid_value('accent-color', 'unset'); +test_valid_value('accent-color', 'revert'); +test_valid_value('accent-color', 'auto'); +test_valid_value('accent-color', 'red'); +test_valid_value('accent-color', 'blue'); +test_valid_value('accent-color', 'currentcolor'); +test_valid_value('accent-color', '#fff', 'rgb(255, 255, 255)'); + +test_invalid_value('accent-color', 'auto auto'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-radio-checked-001-notref.html b/testing/web-platform/tests/css/css-ui/accent-color-radio-checked-001-notref.html new file mode 100644 index 0000000000..63364f0efb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-radio-checked-001-notref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<input type=radio checked style="accent-color: blue"> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-radio-checked-001.html b/testing/web-platform/tests/css/css-ui/accent-color-radio-checked-001.html new file mode 100644 index 0000000000..64fb37064d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-radio-checked-001.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>Accent color changes colors of an checked radio</title> +<link rel="author" href="mailto:masonf@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#widget-accent"> +<link rel="mismatch" href="accent-color-radio-checked-001-notref.html"> + +<input type=radio checked style="accent-color: red"> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-visited-ref.html b/testing/web-platform/tests/css/css-ui/accent-color-visited-ref.html new file mode 100644 index 0000000000..e9c3cfad7c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-visited-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<a href=""> + <input type=checkbox checked> +</a> diff --git a/testing/web-platform/tests/css/css-ui/accent-color-visited.html b/testing/web-platform/tests/css/css-ui/accent-color-visited.html new file mode 100644 index 0000000000..48605d8f19 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/accent-color-visited.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#widget-accent"> +<link rel="match" href="accent-color-visited-ref.html"> + +<!-- :visited shouldn't apply to accent-color. --> + +<style> +:visited { + accent-color: red; +} +</style> +<a href=""> + <input type=checkbox checked> +</a> diff --git a/testing/web-platform/tests/css/css-ui/animation/accent-color-interpolation.html b/testing/web-platform/tests/css/css-ui/animation/accent-color-interpolation.html new file mode 100644 index 0000000000..20d87c4e52 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/accent-color-interpolation.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>accent-color interpolation</title> +<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#widget-accent"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + accent-color: blue; +} +.target { + display: inline-block; + font-size: 60pt; + accent-color: yellow; +} +.expected { + margin-right: 15px; +} +</style> + +<body contenteditable> + <template id="target-template">T</template> +</body> + +<script> +test_interpolation({ + property: 'accent-color', + from: neutralKeyframe, + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(255, 255, 0)'}, + {at: 0, expect: 'rgb(255, 255, 0)'}, + {at: 0.3, expect: 'rgb(179, 217, 0)'}, + {at: 0.6, expect: 'rgb(102, 179, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 65, 0)'}, +]); + +test_no_interpolation({ + property: 'accent-color', + from: 'initial', + to: 'green', +}); + +test_no_interpolation({ + property: 'accent-color', + from: 'auto', + to: 'green', +}); + +test_interpolation({ + property: 'accent-color', + from: 'currentColor', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(0, 38, 0)'}, + {at: 0.6, expect: 'rgb(0, 77, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'accent-color', + from: 'inherit', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 255)'}, + {at: 0, expect: 'rgb(0, 0, 255)'}, + {at: 0.3, expect: 'rgb(0, 38, 179)'}, + {at: 0.6, expect: 'rgb(0, 77, 102)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'accent-color', + from: 'unset', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 255)'}, + {at: 0, expect: 'rgb(0, 0, 255)'}, + {at: 0.3, expect: 'rgb(0, 38, 179)'}, + {at: 0.6, expect: 'rgb(0, 77, 102)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'accent-color', + from: 'black', + to: 'orange', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(77, 50, 0)'}, + {at: 0.6, expect: 'rgb(153, 99, 0)'}, + {at: 1, expect: 'rgb(255, 165, 0)'}, + {at: 1.5, expect: 'rgb(255, 248, 0)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-ui/animation/appearance-no-interpolation.html b/testing/web-platform/tests/css/css-ui/animation/appearance-no-interpolation.html new file mode 100644 index 0000000000..5ddfcd4f8d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/appearance-no-interpolation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'appearance', + from: 'initial', + to: 'none' +}); +</script> diff --git a/testing/web-platform/tests/css/css-ui/animation/caret-color-composition.html b/testing/web-platform/tests/css/css-ui/animation/caret-color-composition.html new file mode 100644 index 0000000000..6c69578677 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/caret-color-composition.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>caret-color composition</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-caret-color"> +<meta name="assert" content="caret-color supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<style> +.target { + display: inline-block; + font-size: 60pt; + color: rgb(50, 50, 50); +} + +.expected { + margin-right: 15px; +} +</style> +<body contenteditable> +<template id="target-template">T</template> +<script src="../interpolation/resources/interpolation-test.js"></script> +<script> +test_composition({ + property: 'caret-color', + underlying: 'rgb(50, 50, 50)', + addFrom: 'rgb(100, 100, 100)', + addTo: 'rgb(200, 200, 200)', +}, [ + {at: -0.3, expect: 'rgb(120, 120, 120)'}, + {at: 0, expect: 'rgb(150, 150, 150)'}, + {at: 0.5, expect: 'rgb(200, 200, 200)'}, + {at: 1, expect: 'rgb(250, 250, 250)'}, + {at: 1.5, expect: 'rgb(255, 255, 255)'}, +]); + +test_composition({ + property: 'caret-color', + underlying: 'auto', + addFrom: 'rgb(100, 100, 100)', + addTo: 'rgb(200, 200, 200)', +}, [ + {at: -0.3, expect: 'rgb(70, 70, 70)'}, + {at: 0, expect: 'rgb(100, 100, 100)'}, + {at: 0.5, expect: 'rgb(150, 150, 150)'}, + {at: 1, expect: 'rgb(200, 200, 200)'}, + {at: 1.5, expect: 'rgb(250, 250, 250)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/animation/caret-color-interpolation.html b/testing/web-platform/tests/css/css-ui/animation/caret-color-interpolation.html new file mode 100644 index 0000000000..b3a4e30130 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/caret-color-interpolation.html @@ -0,0 +1,106 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>caret-color interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-caret-color"> +<meta name="assert" content="caret-color supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + caret-color: blue; +} +.target { + display: inline-block; + font-size: 60pt; + caret-color: yellow; +} +.expected { + margin-right: 15px; +} +</style> + +<body contenteditable> + <template id="target-template">T</template> +</body> + +<script> +test_interpolation({ + property: 'caret-color', + from: neutralKeyframe, + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(255, 255, 0)'}, + {at: 0, expect: 'rgb(255, 255, 0)'}, + {at: 0.3, expect: 'rgb(179, 217, 0)'}, + {at: 0.6, expect: 'rgb(102, 179, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 65, 0)'}, +]); + +test_no_interpolation({ + property: 'caret-color', + from: 'initial', + to: 'green', +}); + +test_no_interpolation({ + property: 'caret-color', + from: 'auto', + to: 'green', +}); + +test_interpolation({ + property: 'caret-color', + from: 'currentColor', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(0, 38, 0)'}, + {at: 0.6, expect: 'rgb(0, 77, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'caret-color', + from: 'inherit', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 255)'}, + {at: 0, expect: 'rgb(0, 0, 255)'}, + {at: 0.3, expect: 'rgb(0, 38, 179)'}, + {at: 0.6, expect: 'rgb(0, 77, 102)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'caret-color', + from: 'unset', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 255)'}, + {at: 0, expect: 'rgb(0, 0, 255)'}, + {at: 0.3, expect: 'rgb(0, 38, 179)'}, + {at: 0.6, expect: 'rgb(0, 77, 102)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'caret-color', + from: 'black', + to: 'orange', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(77, 50, 0)'}, + {at: 0.6, expect: 'rgb(153, 99, 0)'}, + {at: 1, expect: 'rgb(255, 165, 0)'}, + {at: 1.5, expect: 'rgb(255, 248, 0)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-ui/animation/cursor-no-interpolation.html b/testing/web-platform/tests/css/css-ui/animation/cursor-no-interpolation.html new file mode 100644 index 0000000000..8d56dcb83c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/cursor-no-interpolation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'cursor', + from: 'initial', + to: 'none' +}); +</script> diff --git a/testing/web-platform/tests/css/css-ui/animation/outline-color-interpolation.html b/testing/web-platform/tests/css/css-ui/animation/outline-color-interpolation.html new file mode 100644 index 0000000000..f49aa79a38 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/outline-color-interpolation.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>outline-color interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-color"> +<meta name="assert" content="outline-color supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + outline-color: yellow; +} +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + outline: 12px solid white; + margin: 12px 12px; + outline-color: blue; +} +.expected { + background-color: lime; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'outline-color', + from: neutralKeyframe, + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 255)'}, + {at: 0, expect: 'rgb(0, 0, 255)'}, + {at: 0.3, expect: 'rgb(0, 38, 179)'}, + {at: 0.6, expect: 'rgb(0, 77, 102)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'outline-color', + from: 'initial', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(0, 38, 0)'}, + {at: 0.6, expect: 'rgb(0, 77, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'outline-color', + from: 'inherit', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(255, 255, 0)'}, + {at: 0, expect: 'rgb(255, 255, 0)'}, + {at: 0.3, expect: 'rgb(179, 217, 0)'}, + {at: 0.6, expect: 'rgb(102, 179, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 65, 0)'}, +]); + +test_interpolation({ + property: 'outline-color', + from: 'unset', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(0, 38, 0)'}, + {at: 0.6, expect: 'rgb(0, 77, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'outline-color', + from: 'white', + to: 'orange' +}, [ + {at: -0.3, expect: 'white'}, + {at: 0, expect: 'white'}, + {at: 0.3, expect: 'rgb(255, 228, 179)'}, + {at: 0.6, expect: 'rgb(255, 201, 102)'}, + {at: 1, expect: 'orange'}, + {at: 1.5, expect: 'rgb(255, 120, 0)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-ui/animation/outline-offset-composition.html b/testing/web-platform/tests/css/css-ui/animation/outline-offset-composition.html new file mode 100644 index 0000000000..984a63fdc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/outline-offset-composition.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>outline-offset composition</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset"> +<meta name="assert" content="outline-offset supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_composition({ + property: 'outline-offset', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'outline-offset', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, +]); + +test_composition({ + property: 'outline-offset', + underlying: '10em', + addFrom: '100px', + addTo: '20em', +}, [ + {at: -0.3, expect: 'calc(130px + 4em)'}, + {at: 0, expect: 'calc(100px + 10em)'}, + {at: 0.5, expect: 'calc(50px + 20em)'}, + {at: 1, expect: '30em'}, + {at: 1.5, expect: 'calc(-50px + 40em)'}, +]); + +test_composition({ + property: 'outline-offset', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/animation/outline-offset-interpolation.html b/testing/web-platform/tests/css/css-ui/animation/outline-offset-interpolation.html new file mode 100644 index 0000000000..46c1c51c6e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/outline-offset-interpolation.html @@ -0,0 +1,98 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>outline-offset interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset"> +<meta name="assert" content="outline-offset supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + outline: solid 0px; + outline-offset: 30px; +} +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + margin: 40px 0px 0px 40px; + outline: 4px solid orange; + outline-offset: 10px; +} +.expected { + background-color: green; + margin-right: 18px; +} +</style> + +<body></body> + +<script> +test_interpolation({ + property: 'outline-offset', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_interpolation({ + property: 'outline-offset', + from: 'initial', + to: '20px', +}, [ + {at: -0.3, expect: '-6px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'outline-offset', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'outline-offset', + from: 'unset', + to: '20px', +}, [ + {at: -0.3, expect: '-6px'}, + {at: 0, expect: '0px'}, + {at: 0.3, expect: '6px'}, + {at: 0.6, expect: '12px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '30px'}, +]); + +test_interpolation({ + property: 'outline-offset', + from: '-5px', + to: '5px', +}, [ + {at: -0.3, expect: '-8px'}, + {at: 0, expect: '-5px'}, + {at: 0.3, expect: '-2px'}, + {at: 0.6, expect: '1px'}, + {at: 1, expect: '5px'}, + {at: 1.5, expect: '10px'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-ui/animation/outline-width-composition.html b/testing/web-platform/tests/css/css-ui/animation/outline-width-composition.html new file mode 100644 index 0000000000..b770feda61 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/outline-width-composition.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>outline-width composition</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-width"> +<meta name="assert" content="outline-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<style> +.target { + /* If outline-style is none (the default), the computed style of outline-width is 0. */ + outline-style: solid; +} +</style> +<script> +test_composition({ + property: 'outline-width', + underlying: '50px', + addFrom: '100px', + addTo: '200px', +}, [ + {at: -0.3, expect: '120px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '200px'}, + {at: 1, expect: '250px'}, + {at: 1.5, expect: '300px'}, +]); + +test_composition({ + property: 'outline-width', + underlying: '100px', + addFrom: '10px', + addTo: '2px', +}, [ + {at: -0.5, expect: '114px'}, + {at: 0, expect: '110px'}, + {at: 0.5, expect: '106px'}, + {at: 1, expect: '102px'}, + {at: 1.5, expect: '98px'}, // Value clamping should happen after composition. +]); + +test_composition({ + property: 'outline-width', + underlying: '10em', + addFrom: '100px', + addTo: '20em', +}, [ + {at: -0.3, expect: 'calc(130px + 4em)'}, + {at: 0, expect: 'calc(100px + 10em)'}, + {at: 0.5, expect: 'calc(50px + 20em)'}, + {at: 1, expect: '30em'}, + {at: 1.5, expect: 'calc(-50px + 40em)'}, +]); + +test_composition({ + property: 'outline-width', + underlying: '50px', + addFrom: '100px', + replaceTo: '200px', +}, [ + {at: -0.3, expect: '135px'}, + {at: 0, expect: '150px'}, + {at: 0.5, expect: '175px'}, + {at: 1, expect: '200px'}, + {at: 1.5, expect: '225px'}, +]); + +test_composition({ + property: 'outline-width', + underlying: 'thick', // 5px + addFrom: '11px', + addTo: 'thin', // 1px +}, [ + {at: -0.3, expect: '19px'}, + {at: 0, expect: '16px'}, + {at: 0.5, expect: '11px'}, + {at: 1, expect: '6px'}, + {at: 1.5, expect: '1px'}, + {at: 2, expect: '0px'}, // CSS outline-width can't be negative. +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/animation/outline-width-interpolation.html b/testing/web-platform/tests/css/css-ui/animation/outline-width-interpolation.html new file mode 100644 index 0000000000..a46907a169 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/animation/outline-width-interpolation.html @@ -0,0 +1,120 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>outline-width interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-width"> +<meta name="assert" content="outline-width supports animation by computed value"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + outline: solid transparent; + outline-width: 30px; +} +.target { + width: 50px; + height: 50px; + background-color: black; + display: inline-block; + margin: 18px; + outline: solid orange; + outline-width: 10px; + opacity: 0.5; +} +.expected { + background-color: green; +} +</style> + +<body></body> + +<script> +// NOTE: The below tests make assumptions about the values of medium (for unset +// and initial) and thick, namely that: +// * medium=3px +// * thick=3px +// +// A better version of these tests would dynamically generate the expected values +// by querying the computed style from the UA. + +test_interpolation({ + property: 'outline-width', + from: neutralKeyframe, + to: '20px', +}, [ + {at: -0.3, expect: '7px'}, + {at: 0, expect: '10px'}, + {at: 0.3, expect: '13px'}, + {at: 0.6, expect: '16px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '25px'}, +]); + +test_interpolation({ + property: 'outline-width', + from: 'initial', + to: '23px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '3px'}, + {at: 0.3, expect: '9px'}, + {at: 0.6, expect: '15px'}, + {at: 1, expect: '23px'}, + {at: 1.5, expect: '33px'}, +]); + +test_interpolation({ + property: 'outline-width', + from: 'inherit', + to: '20px', +}, [ + {at: -0.3, expect: '33px'}, + {at: 0, expect: '30px'}, + {at: 0.3, expect: '27px'}, + {at: 0.6, expect: '24px'}, + {at: 1, expect: '20px'}, + {at: 1.5, expect: '15px'}, +]); + +test_interpolation({ + property: 'outline-width', + from: 'unset', + to: '23px', +}, [ + {at: -0.3, expect: '0px'}, + {at: 0, expect: '3px'}, + {at: 0.3, expect: '9px'}, + {at: 0.6, expect: '15px'}, + {at: 1, expect: '23px'}, + {at: 1.5, expect: '33px'}, +]); + +test_interpolation({ + property: 'outline-width', + from: '0px', + to: '10px', +}, [ + {at: -0.3, expect: '0px'}, // CSS outline-width can't be negative. + {at: 0, expect: '0px'}, + {at: 0.3, expect: '3px'}, + {at: 0.6, expect: '6px'}, + {at: 1, expect: '10px'}, + {at: 1.5, expect: '15px'} +]); + +test_interpolation({ + property: 'outline-width', + from: 'thick', + to: '15px', +}, [ + {at: -2, expect: '0px'}, // CSS outline-width can't be negative. + {at: -0.3, expect: '2px'}, + {at: 0, expect: '5px'}, + {at: 0.3, expect: '8px'}, + {at: 0.6, expect: '11px'}, + {at: 1, expect: '15px'}, + {at: 1.5, expect: '20px'} +]); +</script> diff --git a/testing/web-platform/tests/css/css-ui/appearance-auto-001.html b/testing/web-platform/tests/css/css-ui/appearance-auto-001.html new file mode 100644 index 0000000000..deef1c5d0b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-auto-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: auto</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="auto is supported."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: auto; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-auto-input-non-widget-001-ref.html b/testing/web-platform/tests/css/css-ui/appearance-auto-input-non-widget-001-ref.html new file mode 100644 index 0000000000..ffbf612615 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-auto-input-non-widget-001-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: appearance: auto on non-widget input elements</title> +<input type="hidden" value="abc"> +<input type="image" value="def"> +<input type="file"> diff --git a/testing/web-platform/tests/css/css-ui/appearance-auto-input-non-widget-001.html b/testing/web-platform/tests/css/css-ui/appearance-auto-input-non-widget-001.html new file mode 100644 index 0000000000..9e717ab872 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-auto-input-non-widget-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: auto on non-widget input elements</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="The default widget type for these elements is none."> +<link rel="match" href="appearance-auto-input-non-widget-001-ref.html"> +<style> +input { appearance: auto; } +</style> +<input type="hidden" value="abc"> +<input type="image" value="def"> +<input type="file"> diff --git a/testing/web-platform/tests/css/css-ui/appearance-auto-non-html-namespace-001.html b/testing/web-platform/tests/css/css-ui/appearance-auto-non-html-namespace-001.html new file mode 100644 index 0000000000..892e0da63b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-auto-non-html-namespace-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: appearance: auto on elements in non-HTML namespace</title> +<link rel="match" href="nothing-below-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="appearance: auto should have no effect on non-HTML elements."> +<style> + div * { appearance: auto; display: inline-block; width: 1em; height: 1em; } +</style> +<p>There should be nothing below:</p> +<div id=div></div> +<script> +for (var tagName of ['button', 'input', 'meter', 'progress', 'select', 'textarea']) { + div.appendChild(document.createElementNS('not-html', tagName)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/appearance-auto-ref.html b/testing/web-platform/tests/css/css-ui/appearance-auto-ref.html new file mode 100644 index 0000000000..5c5cdb42e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-auto-ref.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: appearance: auto</title> +<style> + #container { width: 500px; } + #container > :not(a) { appearance: auto; -webkit-appearance: auto; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-button-001.html b/testing/web-platform/tests/css/css-ui/appearance-button-001.html new file mode 100644 index 0000000000..317f56b18a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-button-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="button is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-checkbox-001.html b/testing/web-platform/tests/css/css-ui/appearance-checkbox-001.html new file mode 100644 index 0000000000..54ebef94f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-checkbox-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: checkbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="checkbox is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: checkbox; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-cssom-001.html b/testing/web-platform/tests/css/css-ui/appearance-cssom-001.html new file mode 100644 index 0000000000..36402da51c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-cssom-001.html @@ -0,0 +1,259 @@ +<!doctype html> +<title>CSS Basic User Interface Test: appearance CSSOM</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="CSSOM for the appearance/-webkit-appearance property is correct."> +<meta name="variant" content="?include=Invalid"> +<meta name="variant" content="?exclude=Invalid"> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<script src="/common/subset-tests-by-key.js"></script> +<button id=button>Test</button> +<script> + const button = document.getElementById('button'); + const values = [ + "none", + "auto", + // <compat-special> + "textfield", + "menulist-button", + ]; + // <compat-auto> + const compat_values = [ + "button", + "checkbox", + "listbox", + "menulist", + "meter", + "progress-bar", + "radio", + "searchfield", + "textarea", + "slider-horizontal", + "push-button", + "square-button", + ]; + const invalid_values = [ + "bogus-button", + "attachment", + "button-bevel", + "borderless-attachment", + "button-arrow-down", + "button-arrow-next", + "button-arrow-previous", + "button-arrow-up", + "button-focus", + "caps-lock-indicator", + "caret", + "checkbox-container", + "checkbox-label", + "checkmenuitem", + "color-well", + "continuous-capacity-level-indicator", + "default-button", + "discrete-capacity-level-indicator", + "dualbutton", + "groupbox", + "image-controls-button", + "inner-spin-button", + "list-button", + "listitem", + "media-controls-background", + "media-controls-dark-bar-background", + "media-controls-fullscreen-background", + "media-controls-light-bar-background", + "media-current-time-display", + "media-enter-fullscreen-button", + "media-exit-fullscreen-button", + "media-fullscreen-volume-slider", + "media-fullscreen-volume-slider-thumb", + "media-mute-button", + "media-overlay-play-button", + "media-play-button", + "media-return-to-realtime-button", + "media-rewind-button", + "media-seek-back-button", + "media-seek-forward-button", + "media-slider", + "media-sliderthumb", + "media-time-remaining-display", + "media-toggle-closed-captions-button", + "media-volume-slider", + "media-volume-slider-container", + "media-volume-slider-mute-button", + "media-volume-sliderthumb", + "menuarrow", + "menubar", + "menucheckbox", + "menuimage", + "menuitem", + "menuitemtext", + "menulist-text", + "menulist-textfield", + "menupopup", + "menuradio", + "menuseparator", + "meterbar", + "meterchunk", + "number-input", + "progress-bar-value", + "progressbar", + "progressbar-vertical", + "progresschunk", + "progresschunk-vertical", + "radio-container", + "radio-label", + "radiomenuitem", + "range", + "range-thumb", + "rating-level-indicator", + "relevancy-level-indicator", + "resizer", + "resizerpanel", + "scale-horizontal", + "scale-vertical", + "scalethumb-horizontal", + "scalethumb-vertical", + "scalethumbend", + "scalethumbstart", + "scalethumbtick", + "scrollbarbutton-down", + "scrollbarbutton-left", + "scrollbarbutton-right", + "scrollbarbutton-up", + "scrollbarthumb-horizontal", + "scrollbarthumb-vertical", + "scrollbartrack-horizontal", + "scrollbartrack-vertical", + "searchfield-cancel-button", + "searchfield-decoration", + "searchfield-results-button", + "searchfield-results-decoration", + "separator", + "sheet", + "slider-vertical", + "sliderthumb-horizontal", + "sliderthumb-vertical", + "snapshotted-plugin-overlay", + "spinner", + "spinner-downbutton", + "spinner-textfield", + "spinner-upbutton", + "splitter", + "statusbar", + "statusbarpanel", + "tab", + "tab-scroll-arrow-back", + "tab-scroll-arrow-forward", + "tabpanel", + "tabpanels", + "textfield-multiline", + "toolbar", + "toolbarbutton", + "toolbarbutton-dropdown", + "toolbargripper", + "toolbox", + "tooltip", + "treeheader", + "treeheadercell", + "treeheadersortarrow", + "treeitem", + "treeline", + "treetwisty", + "treetwistyopen", + "treeview", + "-apple-pay-button", + "-moz-win-borderless-glass", + "-moz-win-browsertabbar-toolbox", + "-moz-win-communications-toolbox", + "-moz-win-communicationstext", + "-moz-win-exclude-glass", + "-moz-win-glass", + "-moz-win-media-toolbox", + "-moz-window-button-box", + "-moz-window-button-box-maximized", + "-moz-window-button-close", + "-moz-window-button-maximize", + "-moz-window-button-minimize", + "-moz-window-button-restore", + "-moz-window-frame-bottom", + "-moz-window-frame-left", + "-moz-window-frame-right", + "-moz-window-titlebar", + "-moz-window-titlebar-maximized", + ]; + const initial_appearance = getComputedStyle(button).appearance; + function assert_style_for_prop(style, prop, value) { + let values = Array.isArray(value) ? value : [value]; + if (prop === '-webkit-appearance') { + assert_in_array(style.WebkitAppearance, values, 'style.WebkitAppearance (uppercase W)'); + assert_in_array(style.webkitAppearance, values, 'style.webkitAppearance (lowercase w)'); + } else { + assert_in_array(style.appearance, values, 'style.appearance'); + } + assert_in_array(style.getPropertyValue(prop), values, `getPropertyValue(${prop})`); + } + for (const prop of ["-webkit-appearance", "appearance"]) { + for (const value of values) { + subsetTestByKey(`Values`, test, () => { + button.removeAttribute('style'); + button.style.setProperty(prop, value); + assert_style_for_prop(button.style, prop, value); + const style = getComputedStyle(button); + assert_style_for_prop(style, prop, value); + button.style.setProperty('background-color', 'black'); + assert_style_for_prop(style, prop, value, + 'Computed value should be the specified value'); + }, `${prop}: ${value}`); + } + + for (const value of compat_values) { + subsetTestByKey(`Compat`, test, () => { + button.removeAttribute('style'); + button.style.setProperty(prop, value); + assert_style_for_prop(button.style, prop, [value, ""]); + const style = getComputedStyle(button); + assert_style_for_prop(style, prop, [value, "auto"]); + button.style.setProperty('background-color', 'black'); + assert_style_for_prop(style, prop, [value, "auto"], + 'Computed value should be the specified value or auto if not supported'); + }, `${prop}: ${value} (compat)`); + } + + for (const value of invalid_values) { + subsetTestByKey(`Invalid`, test, () => { + button.removeAttribute('style'); + button.style.setProperty(prop, value); + assert_style_for_prop(button.style, prop, ""); + const style = getComputedStyle(button); + assert_style_for_prop(style, prop, initial_appearance); + }, `${prop}: ${value} (invalid)`); + } + } + + for (const prefix of [ + "-ms-", + "mso-", + "-o-", + "-xv-", + "-atsc-", + "-wap-", + "-khtml-", + "-konq-", + "-apple-", + "prince-", + "-ah-", + "-hp-", + "-ro-", + "-rim-", + "-tc-", + ]) { + const prop = `${prefix}appearance`; + subsetTestByKey(`Prefixes`, test, () => { + button.removeAttribute('style'); + button.style.setProperty(prop, 'none'); + assert_equals(button.style.getPropertyValue(prop), ''); + const style = getComputedStyle(button); + assert_equals(style.getPropertyValue(prop), ''); + }, `${prop} (should not be supported)`); + } +</script> diff --git a/testing/web-platform/tests/css/css-ui/appearance-initial-value-001.html b/testing/web-platform/tests/css/css-ui/appearance-initial-value-001.html new file mode 100644 index 0000000000..6e7d300267 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-initial-value-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance and -webkit-appearance</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="The appearance and -webkit-appearance properties are supported."> +<meta name="assert" content="Initial value is none."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #appearance { appearance: button; } + #-webkit-appearance { -webkit-appearance: button; } +</style> +<div id="appearance"></div> +<div id="-webkit-appearance"></div> +<div id="initial"></div> +<script> +for (const prop of ['appearance', '-webkit-appearance']) { + test(() => { + const actual = getComputedStyle(document.getElementById(prop)).getPropertyValue(prop); + assert_equals(actual, 'button'); + }, `support for ${prop}`); + + test(() => { + const actual = getComputedStyle(document.getElementById('initial')).getPropertyValue(prop); + assert_equals(actual, 'none'); + }, `initial value for ${prop}`); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/appearance-listbox-001.html b/testing/web-platform/tests/css/css-ui/appearance-listbox-001.html new file mode 100644 index 0000000000..b391754b74 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-listbox-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="listbox is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: listbox; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-menulist-001.html b/testing/web-platform/tests/css/css-ui/appearance-menulist-001.html new file mode 100644 index 0000000000..b4586870e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-menulist-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: menulist</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="menulist is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: menulist; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-menulist-button-001.html b/testing/web-platform/tests/css/css-ui/appearance-menulist-button-001.html new file mode 100644 index 0000000000..a170eb3126 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-menulist-button-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="menulist-button is an alias to auto except on drop-down select."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > *:not(#drop-down-select) { appearance: none; appearance: menulist-button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select id="drop-down-select"><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-menulist-button-002.tentative.html b/testing/web-platform/tests/css/css-ui/appearance-menulist-button-002.tentative.html new file mode 100644 index 0000000000..2579450623 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-menulist-button-002.tentative.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: menulist-button on drop-down select</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="menulist-button is NOT an alias to auto on drop-down select."> +<link rel="mismatch" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > #drop-down-select { appearance: none; appearance: menulist-button; } +</style> +<!-- + Test marked as tentative since although css-ui says: + + For drop-down box select elements, the element is rendered as a drop-down + box, including a "drop-down button", but not necessarily using a native + control of the host operating system. For such elements, CSS properties + such as color, background-color, and border (that can be disregarded for + auto) should not be disregarded. + + there is no requirement that this rendering is any different from the + automatic widget appearance of a drop-down select. + --> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select id="drop-down-select"><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-meter-001.html b/testing/web-platform/tests/css/css-ui/appearance-meter-001.html new file mode 100644 index 0000000000..da6f1ffa6c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-meter-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="meter is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: meter; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-parsing.html b/testing/web-platform/tests/css/css-ui/appearance-parsing.html new file mode 100644 index 0000000000..8d6973231c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-parsing.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Parsing of `appearance`</title> + <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> +test(function() { + var input = document.createElement('input'); + input.setAttribute('style', 'appearance: none;'); + + assert_equals(input.style.getPropertyValue('appearance'), 'none'); +}, 'parsing via attribute change steps of CSS declaration block\'s owner node'); + +test(function() { + var input = document.createElement('input'); + input.style.cssText = 'appearance: none;'; + + assert_equals(input.style.getPropertyValue('appearance'), 'none'); +}, 'parsing via modification of cssText'); + +test(function(t) { + var style = document.createElement('style'); + style.appendChild( + document.createTextNode('#foo { appearance: none; }') + ); + document.body.appendChild(style); + t.add_cleanup(function() { + document.body.removeChild(style); + }); + + assert_equals(style.sheet.cssRules.length, 1); + assert_equals( + style.sheet.cssRules[0].style.getPropertyValue('appearance'), + 'none' + ); +}, 'parsing via creation of CSS declaration block'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/appearance-progress-bar-001.html b/testing/web-platform/tests/css/css-ui/appearance-progress-bar-001.html new file mode 100644 index 0000000000..1573f69911 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-progress-bar-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: progress-bar</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="progress-bar is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: progress-bar; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-progress-bar-002-ref.html b/testing/web-platform/tests/css/css-ui/appearance-progress-bar-002-ref.html new file mode 100644 index 0000000000..d243f0c75c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-progress-bar-002-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>CSS Test Reference</title> +<progress style="appearance:auto" value="0.5"> +<progress style="appearance:none" value="0.5"> diff --git a/testing/web-platform/tests/css/css-ui/appearance-progress-bar-002.html b/testing/web-platform/tests/css/css-ui/appearance-progress-bar-002.html new file mode 100644 index 0000000000..b04af84ba1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-progress-bar-002.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: progress dynamic appearance</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<link rel="match" href="appearance-progress-bar-002-ref.html"> +<style> + #progress1 { appearance: none } + #progress2 { appearance: auto } +</style> +<progress id="progress1" value="0.5"> +<progress id="progress2" value="0.5"> +<script> + document.body.offsetTop; + progress1.style.appearance = "auto"; + progress2.style.appearance = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-ui/appearance-property.html b/testing/web-platform/tests/css/css-ui/appearance-property.html new file mode 100644 index 0000000000..53b98ba605 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-property.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Property references to `appearance`</title> + <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> +function create(initialValue) { + var style = document.createElement('input').style; + + style.setProperty('appearance', initialValue); + + return style; +} + +test(function() { + var style = create(''); + + style.setProperty('appearance', 'none'); + + assert_equals(style.appearance, 'none'); +}, 'setProperty'); + +test(function() { + var style = create('none'); + + style.removeProperty('appearance'); + + assert_equals(style.appearance, ''); +}, 'removeProperty'); + +test(function() { + var style = create(''); + + style['appearance'] = 'none'; + + assert_equals(style.appearance, 'none'); +}, 'property assignment'); + +test(function() { + var style = create('none'); + + assert_equals(style.getPropertyValue('appearance'), 'none'); +}, 'getPropertyValue'); + +test(function() { + var style = create('none'); + + assert_equals(style['appearance'], 'none'); +}, 'property access'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/appearance-push-button-001.html b/testing/web-platform/tests/css/css-ui/appearance-push-button-001.html new file mode 100644 index 0000000000..3aecbb0798 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-push-button-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: push-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="push-button is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: push-button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-radio-001.html b/testing/web-platform/tests/css/css-ui/appearance-radio-001.html new file mode 100644 index 0000000000..5a64ba7b01 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-radio-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: radio</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="radio is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: radio; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-revert-001.tentative.html b/testing/web-platform/tests/css/css-ui/appearance-revert-001.tentative.html new file mode 100644 index 0000000000..eb94e6feed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-revert-001.tentative.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4777#issuecomment-597755164"> +<link rel="match" href="appearance-revert-ref.html"> +<style> + div > * { + background-color: red; + border-color: red; + all: revert; + } +</style> +<div><input type="text" value="input-text"></div> +<div><input type="search" value="input-search"></div> +<div><textarea>textarea</textarea></div> +<div><input type="button" value="input-button"></div> +<div><input type="submit" value="input-submit"></div> +<div><input type="reset" value="input-reset"></div> +<div><input type="range"></div> +<div><input type="checkbox"></div> +<div><input type="radio"></div> +<div><input type="color"></div> +<div><select><option>select</option></select></div> +<div><select multiple><option>select-multiple</option></select></div> +<div><meter value=0.5></meter></div> +<div><progress value=0.5></progress></div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-revert-ref.html b/testing/web-platform/tests/css/css-ui/appearance-revert-ref.html new file mode 100644 index 0000000000..26aa6e8719 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-revert-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<div><input type="text" value="input-text"></div> +<div><input type="search" value="input-search"></div> +<div><textarea>textarea</textarea></div> +<div><input type="button" value="input-button"></div> +<div><input type="submit" value="input-submit"></div> +<div><input type="reset" value="input-reset"></div> +<div><input type="range"></div> +<div><input type="checkbox"></div> +<div><input type="radio"></div> +<div><input type="color"></div> +<div><select><option>select</option></select></div> +<div><select multiple><option>select-multiple</option></select></div> +<div><meter value=0.5></meter></div> +<div><progress value=0.5></progress></div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-searchfield-001.html b/testing/web-platform/tests/css/css-ui/appearance-searchfield-001.html new file mode 100644 index 0000000000..7874141155 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-searchfield-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: searchfield</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="searchfield is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: searchfield; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-serialization.html b/testing/web-platform/tests/css/css-ui/appearance-serialization.html new file mode 100644 index 0000000000..ed968afee6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-serialization.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Serialization of `appearance`</title> + <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> +test(function() { + var input = document.createElement('input'); + input.style.setProperty('appearance', 'none'); + + assert_equals(input.style.cssText, 'appearance: none;'); +}, 'serialization via CSSStyleDeclaration'); + +test(function(t) { + var style = document.createElement('style'); + document.body.appendChild(style); + t.add_cleanup(function() { + document.body.removeChild(style); + }); + style.sheet.insertRule('#foo {}', 0); + style.sheet.cssRules[0].style.setProperty('appearance', 'none'); + + assert_equals( + style.sheet.cssRules[0].cssText, '#foo { appearance: none; }' + ); +}, 'serialization via CSSStyleRule'); + +test(function(t) { + var style = document.createElement('style'); + document.body.appendChild(style); + t.add_cleanup(function() { + document.body.removeChild(style); + }); + style.sheet.insertRule('@media print { #foo {} }', 0); + style.sheet.cssRules[0].cssRules[0].style.setProperty('appearance', 'none'); + + assert_equals( + style.sheet.cssRules[0].cssText, + '@media print {\n #foo { appearance: none; }\n}' + ); +}, 'serialization via CSSMediaRule'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/appearance-slider-horizontal-001.html b/testing/web-platform/tests/css/css-ui/appearance-slider-horizontal-001.html new file mode 100644 index 0000000000..4d5b1a94fc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-slider-horizontal-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: slider-horizontal</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="slider-horizontal is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: slider-horizontal; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-square-button-001.html b/testing/web-platform/tests/css/css-ui/appearance-square-button-001.html new file mode 100644 index 0000000000..8f8c84355d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-square-button-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: square-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="square-button is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: square-button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-textarea-001.html b/testing/web-platform/tests/css/css-ui/appearance-textarea-001.html new file mode 100644 index 0000000000..5c55ff9fbf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-textarea-001.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="textarea is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { appearance: none; appearance: textarea; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-textfield-001-ref.html b/testing/web-platform/tests/css/css-ui/appearance-textfield-001-ref.html new file mode 100644 index 0000000000..5304352e6b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-textfield-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference for CSS Basic User Interface Test: appearance: textfield</title> +<style> + #container { width: 500px; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="text" value="input-search"><!-- intentionally type="text" --> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/appearance-textfield-001.html b/testing/web-platform/tests/css/css-ui/appearance-textfield-001.html new file mode 100644 index 0000000000..f2ca6fc6ac --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/appearance-textfield-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: appearance: textfield</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="textfield is an alias to auto except on input type=search."> +<link rel="match" href="appearance-textfield-001-ref.html"> +<style> + #container { width: 500px; } + /* + * If the value being tested is not supported, then 'none' is used instead, + * which is intended to fail the test. + */ + #container > * { appearance: none; appearance: textfield; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-001.html b/testing/web-platform/tests/css/css-ui/box-sizing-001.html new file mode 100644 index 0000000000..870f486377 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-001.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.3.3</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth"> +<link rel="match" href="reference/box-sizing-001-ref.html"> +<meta name="assert" content="When box-sizing is border-box, the content width, rather than the computed value of the width property, + is considered when checking whether a block is larger than its containing block."> +<style> +#cb { + position: absolute; + width: 100px; + height: 100px; +} +#red { + position:absolute; + top: 25px; + right:5px; + width: 70px; + height: 70px; + background:red; + z-index: -1; +} +#test { + box-sizing: border-box; + margin-top: 25px; + margin-right: 5px; + margin-left: auto; /* should resolve to 25px, but would resolve to 0 if the wrong interpretation of width is used in CSS2.1 10.3.3 */ + padding-left: 25px; + padding-right: 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="red"></div> + <div id="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-003.html b/testing/web-platform/tests/css/css-ui/box-sizing-003.html new file mode 100644 index 0000000000..4aefec6656 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.3.7</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width"> +<link rel="match" href="reference/box-sizing-001-ref.html"> +<meta name="assert" content="When box-sizing is border-box, the content width, rather than the computed value of the width property, + should be used in the the constraint that determines the used values of sizing and positioning properties + of absolutely positioned elements."> +<style> +#cb { + position: absolute; + width: 100px; + height: 100px; +} +#test { + position:absolute; + box-sizing: border-box; + margin-right: 5px; + margin-left: auto; /* should resolve to 25px, but would resolve to -25px if the wrong interpretation of width is used in CSS2.1 10.3.7 */ + top: 25px; + left:0; + right:0; + padding-left: 25px; + padding-right: 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/box-sizing-005.html b/testing/web-platform/tests/css/css-ui/box-sizing-005.html new file mode 100644 index 0000000000..64267da852 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-005.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: box-sizing:border-box and CSS2.1 10.6.4</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height"> +<link rel="match" href="reference/box-sizing-001-ref.html"> +<meta name="assert" content="When box-sizing is border-box, the content height, rather than the computed value of the height property, + should be used in the the constraint that determines the used values of sizing and positioning properties + of absolutely positioned elements."> +<style> +#cb { + position: absolute; + width: 100px; + height: 100px; +} +#test { + position:absolute; + box-sizing: border-box; + margin-right: 5px; + margin-left: 25px; + margin-bottom: 5px; + margin-top: auto; /* should resolve to 25px, but would resolve to -25px if the wrong interpretation of width is used in CSS2.1 10.6.4 */ + top: 0; + left: 0; + right: 0; + bottom: 0; + padding-top: 25px; + padding-bottom: 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/box-sizing-007.html b/testing/web-platform/tests/css/css-ui/box-sizing-007.html new file mode 100644 index 0000000000..c51f4318db --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-007.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: box-sizing:border-box and auto sizing of intrinsicly sized replaced elements.</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-007-ref.html"> +<meta name="assert" content="Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with either both intrisic dimentions or an intrinsic ratio, to check that they work correctly in terms of the content width height."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + margin: 10px; +} + +#t01, #t11, #t21, #t31 { + padding-left: 20px; + margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t02, #t12, #t22, #t32 { + padding-bottom: 20px; + margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t03, #t13, #t23, #t33 { + width: 120px; + padding-left: 20px; + margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t04, #t14, #t24, #t34 { + height: 120px; + padding-bottom: 20px; + margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} + +#t30, #t32 { + width: 100px; +} + +#t31 { + height: 100px; +} +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> + <img id=t00 src="support/w100_h100.svg"> + <img id=t01 src="support/w100_h100.svg"> + <img id=t02 src="support/w100_h100.svg"> + <img id=t03 src="support/w100_h100.svg"> + <img id=t04 src="support/w100_h100.svg"> + + <img id=t10 src="support/w100_r1-1.svg"> + <img id=t11 src="support/w100_r1-1.svg"> + <img id=t12 src="support/w100_r1-1.svg"> + <img id=t13 src="support/w100_r1-1.svg"> + <img id=t14 src="support/w100_r1-1.svg"> + + <img id=t20 src="support/h100_r1-1.svg"> + <img id=t21 src="support/h100_r1-1.svg"> + <img id=t22 src="support/h100_r1-1.svg"> + <img id=t23 src="support/h100_r1-1.svg"> + <img id=t24 src="support/h100_r1-1.svg"> + + <img id=t30 src="support/r1-1.svg"> + <img id=t31 src="support/r1-1.svg"> + <img id=t32 src="support/r1-1.svg"> + <img id=t33 src="support/r1-1.svg"> + <img id=t34 src="support/r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-008.html b/testing/web-platform/tests/css/css-ui/box-sizing-008.html new file mode 100644 index 0000000000..3e79e29bcd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-008.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: box-sizing:border-box and auto sizing of replaced elements with intrinisic width only.</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-008-ref.html"> +<meta name="assert" content="Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with intrisic width and no intrinsic ratio, to check that they work correctly in terms of the content width height."> +<style> +#ref { + width: 100px; + height: 150px; + background: green; + margin: 10px; + display: inline-block; +} +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + margin: 10px; +} + +#t01 { + padding-left: 20px; + margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t02 { + padding-bottom: 20px; + margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t03 { + width: 120px; + padding-left: 20px; + margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t04 { + height: 170px; + padding-bottom: 20px; + margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +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 id="ref"></div> + <img id=t00 src="support/w100.svg"> + <img id=t01 src="support/w100.svg"> + <img id=t02 src="support/w100.svg"> + <img id=t03 src="support/w100.svg"> + <img id=t04 src="support/w100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-009.html b/testing/web-platform/tests/css/css-ui/box-sizing-009.html new file mode 100644 index 0000000000..69d526d63d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-009.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: box-sizing:border-box and auto sizing of replaced elements with intrinisic height only.</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-009-ref.html"> +<meta name="assert" content="Exercises the sizing rules in CSS2.1 10.3.2 and 10.6.2 with box-sizing:border-box for replaced elements with intrisic height and no intrinsic ratio, to check that they work correctly in terms of the content width height."> +<style> +#ref { + width: 300px; + height: 100px; + background: green; + margin: 10px; + display: inline-block; +} +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + margin: 10px; +} + +#t01 { + padding-left: 20px; + margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t02 { + padding-bottom: 20px; + margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t03 { + width: 320px; + padding-left: 20px; + margin-left: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +#t04 { + height: 120px; + padding-bottom: 20px; + margin-bottom: -10px; /*not strictly necessary, but helps preserve alignment, which makes visual verification easier. */ +} +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 id="ref"></div> + <img id=t00 src="support/h100.svg"> + <img id=t01 src="support/h100.svg"> + <img id=t02 src="support/h100.svg"> + <img id=t03 src="support/h100.svg"> + <img id=t04 src="support/h100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-010.html b/testing/web-platform/tests/css/css-ui/box-sizing-010.html new file mode 100644 index 0000000000..7d1f9934cf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-010.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, h > max-height</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width and height + with the h > max-height constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-bottom: 30px; + max-height: 100px; +} + +#ref { + display: inline-block; + margin-bottom: 30px; /*for alignement*/ + 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 id=ref></div> + <img src="support/w100_h100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-011.html b/testing/web-platform/tests/css/css-ui/box-sizing-011.html new file mode 100644 index 0000000000..29c2e98080 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-011.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, w > max-width</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width and height + with the w > max-width constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-right: 30px; + max-width: 100px; +} + +#ref { + display:inline-block; + height: 70px; + width: 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 id=ref></div> + <img src="support/w100_h100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-012.html b/testing/web-platform/tests/css/css-ui/box-sizing-012.html new file mode 100644 index 0000000000..381ef7d850 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-012.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width, h > max-height</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-012-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width + with the h > max-height constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-bottom: 30px; + max-height: 100px; +} + +#ref { + 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 id=ref></div> + <img src="support/w100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-013.html b/testing/web-platform/tests/css/css-ui/box-sizing-013.html new file mode 100644 index 0000000000..92f15dc1aa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-013.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height, w > max-width</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-013-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic height + with the w > max-width constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-right: 30px; + max-width: 100px; +} + +#ref { + 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 id=ref></div> + <img src="support/h100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-014.html b/testing/web-platform/tests/css/css-ui/box-sizing-014.html new file mode 100644 index 0000000000..83532ea1fa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-014.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and ratio, h > max-height</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width and ratio + with the h > max-height constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-bottom: 30px; + max-height: 100px; +} + +#ref { + display: inline-block; + margin-bottom: 30px; /*for alignement*/ + 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 id=ref></div> + <img src="support/w100_r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-015.html b/testing/web-platform/tests/css/css-ui/box-sizing-015.html new file mode 100644 index 0000000000..f5c629b369 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-015.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w > max-width</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic height and ratio + with the w > max-width constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-right: 30px; + max-width: 100px; +} + +#ref { + display:inline-block; + height: 70px; + width: 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 id=ref></div> + <img src="support/h100_r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-016.html b/testing/web-platform/tests/css/css-ui/box-sizing-016.html new file mode 100644 index 0000000000..ba3344ee66 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-016.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic ratio, h > max-height</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic ratio + with the h > max-height constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-bottom: 30px; + max-height: 100px; +} + +#ref { + display: inline-block; + margin-bottom: 30px; /*for alignement*/ + 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 id=ref></div> + <img src="support/r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-017.html b/testing/web-platform/tests/css/css-ui/box-sizing-017.html new file mode 100644 index 0000000000..5fc682d536 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-017.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic ratio, w > max-width</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic ratio + with the w > max-width constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-right: 30px; + max-width: 100px; +} + +#ref { + display:inline-block; + height: 70px; + width: 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 id=ref></div> + <img src="support/r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-018.html b/testing/web-platform/tests/css/css-ui/box-sizing-018.html new file mode 100644 index 0000000000..82f7cb546c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-018.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w > max-wdith and h > max-height and max-width/w ≤ max-height/h</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic height and ratio + with the w > max-width and h > max-height constraint violation + and max-width/w ≤ max-height/h + are properly interpreted when box-sizing is border-box."> +<style> +#ref { + display: inline-block; + width: 70px; + height: 70px; + background: green; +} + +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + max-height: 100px; + max-width: 70px; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p> + <div id="ref"></div> + <img src="support/h100_r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-019.html b/testing/web-platform/tests/css/css-ui/box-sizing-019.html new file mode 100644 index 0000000000..8b63824344 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-019.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and ratio, w > max-wdith and h > max-height and max-width/w > max-height/h</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-010-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width and ratio + with the w > max-width and h > max-height constraint violation + and max-width/w > max-height/h + are properly interpreted when box-sizing is border-box."> +<style> +#ref { + display: inline-block; + width: 70px; + height: 70px; + background: green; +} + +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + max-height: 70px; + max-width: 100px; +} + +</style> +<body> + <p>Test passes if there are 2 <strong>filled green squares</strong> and they are the <strong>same size</strong>.</p> + <div id="ref"></div> + <img src="support/w100_r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-020.html b/testing/web-platform/tests/css/css-ui/box-sizing-020.html new file mode 100644 index 0000000000..cc053cd963 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-020.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, h < min-height</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-020-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width and height + with the h < min-height constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-bottom: 30px; + min-height: 160px; +} + +#ref { + display: inline-block; + margin-bottom: 30px; /*for alignement*/ + 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 id=ref></div> + <img src="support/w100_h100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-021.html b/testing/web-platform/tests/css/css-ui/box-sizing-021.html new file mode 100644 index 0000000000..9ae947f2b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-021.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and height, w < win-width</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-020-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width and height + with the w < min-width constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-right: 30px; + min-width: 160px; +} + +#ref { + display:inline-block; + height: 130px; + width: 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 id=ref></div> + <img src="support/w100_h100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-022.html b/testing/web-platform/tests/css/css-ui/box-sizing-022.html new file mode 100644 index 0000000000..7ebd22041f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-022.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width, w < min-width</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-022-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width + with the w < min-width constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-right: 30px; + min-width: 160px; +} + +#ref { + 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 id=ref></div> + <img src="support/w100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-023.html b/testing/web-platform/tests/css/css-ui/box-sizing-023.html new file mode 100644 index 0000000000..e143648aa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-023.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height, h < min-height</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-023-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic height + with the h < min-height constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-bottom: 30px; + min-height: 160px; +} + +#ref { + 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 id=ref></div> + <img src="support/h100.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-024.html b/testing/web-platform/tests/css/css-ui/box-sizing-024.html new file mode 100644 index 0000000000..a6285735bd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-024.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic width and ratio, h < mi:-height</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-020-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic width and ratio + with the h < min-height constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-bottom: 30px; + min-height: 160px; +} + +#ref { + display: inline-block; + margin-bottom: 30px; /*for alignement*/ + 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 id=ref></div> + <img src="support/w100_r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-025.html b/testing/web-platform/tests/css/css-ui/box-sizing-025.html new file mode 100644 index 0000000000..8a673ad1cc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-025.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: auto sizing rules with box-sizing:border-box, intrinsic height and ratio, w < min-width</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths"> +<meta name="flags" content="svg"> +<link rel="match" href="reference/box-sizing-020-ref.html"> +<meta name="assert" content="Test checks that the CSS2.1 rules for auto width and height + on replaced elements with intrinsic height and ratio + with the w < min-width constraint violation + are properly interpreted when box-sizing is border-box."> +<style> +img { + box-sizing: border-box; + width: auto; + height: auto; + background: white; + padding-right: 30px; + min-width: 160px; +} + +#ref { + display:inline-block; + height: 130px; + width: 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 id=ref></div> + <img src="support/h100_r1-1.svg"> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-026.html b/testing/web-platform/tests/css/css-ui/box-sizing-026.html new file mode 100644 index 0000000000..399c0499f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-026.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: box-sizing:border-box floors to 0</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Floor width and height computation to 0 as they cannot be negative."> +<style> +#red { + position: absolute; + width: 100px; + height: 100px; + background:red; + z-index: -1; +} +#test { + box-sizing: border-box; + border: 50px green solid; + width: 10px; + height: 10px; +} +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id=red></div> + <div id=test></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/box-sizing-027.html b/testing/web-platform/tests/css/css-ui/box-sizing-027.html new file mode 100644 index 0000000000..aebb3e1095 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/box-sizing-027.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: box-sizing:border-box resolved values</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<meta charset="utf-8"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#test { + box-sizing: border-box; + border: 10px solid blue; + padding: 10px; + width: 100px; + height: 100px; +} +</style> +<body> + <div id=test></div> + <div id=log></div> + +<script> +test( + function(){ + var test = document.getElementById("test"); + assert_equals(window.getComputedStyle(test)["width"], "100px"); + }, "Check the resolved value of 'width' when box-sizing is border-box."); +test( + function(){ + var test = document.getElementById("test"); + assert_equals(window.getComputedStyle(test)["height"], "100px"); + }, "Check the resolved value of 'height' when box-sizing is border-box."); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/canvas-cursor-001.html b/testing/web-platform/tests/css/css-ui/canvas-cursor-001.html new file mode 100644 index 0000000000..f1155d5075 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/canvas-cursor-001.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS UI Test: propagating the root cursor to the canvas</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#canvas_cursor"> +<meta name="flags" content="interact image"> +<meta name="assert" content="Test checks the cursor applied to the root element is propagated to the canvas."> +<style> +:root { + padding:0; + background:blue; + cursor: url(support/green.ico), pointer; +} +body { + margin:0; +} +p { + background: white; + cursor: default; + position:absolute; + /* the p is taken out of flow to make the html and body elements collapse to nothing, + leaving the whole background area empty of any element, + as that's what we want to hover over */ } +</style> +<body> +<p>Place the mouse cursor over the blue area. You should see a green square. diff --git a/testing/web-platform/tests/css/css-ui/canvas-cursor-002.html b/testing/web-platform/tests/css/css-ui/canvas-cursor-002.html new file mode 100644 index 0000000000..c67a10f749 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/canvas-cursor-002.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>CSS UI Test: not propagating the body cursor to the canvas</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#canvas_cursor"> +<meta name="flags" content="interact image"> +<meta name="assert" content="Test checks the cursor applied to the body element is not propagated to the canvas."> +<style> +:root { padding:0; background:blue;} +body { + margin:0; + cursor: url(support/red.ico), pointer; +} +p { + background: white; + cursor: default; + position:absolute; + /* the p is taken out of flow to make the html and body elements collapse to nothing, + leaving the whole background area empty of any element, + as that's what we want to hover over */ } +</style> +<body> +<p>Place the mouse cursor over the blue area. You should see no red. diff --git a/testing/web-platform/tests/css/css-ui/caret-color-001.html b/testing/web-platform/tests/css/css-ui/caret-color-001.html new file mode 100644 index 0000000000..c642363ca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color can be set on a textarea"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */ + + caret-color: lime; + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <textarea id="test"></textarea> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-002.html b/testing/web-platform/tests/css/css-ui/caret-color-002.html new file mode 100644 index 0000000000..96417da89e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color is inherited</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color value does inherit"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */ + } + div { + caret-color: lime; + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <div> + <textarea id="test"></textarea> + </div> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-003.html b/testing/web-platform/tests/css/css-ui/caret-color-003.html new file mode 100644 index 0000000000..d0d1cce04d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-003.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color auto</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact should"> +<meta name="assert" content="Test checks that caret-color: auto matches currentColor"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; /* the color of a thin object like the caret is easier to see on a black background. */ + + color: lime; + caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */ + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is green, + like the text in that textarea.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <textarea id="test">focus this</textarea> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-004.html b/testing/web-platform/tests/css/css-ui/caret-color-004.html new file mode 100644 index 0000000000..75bdacd98f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color auto, black on white</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color:auto provides good contrast in black on white"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + + background: white; + color: black; + caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */ + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is either black + or some other color that contrasts well with the background.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <textarea id="test"></textarea> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-005.html b/testing/web-platform/tests/css/css-ui/caret-color-005.html new file mode 100644 index 0000000000..30808cbde7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-005.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color auto, white on black</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color:auto provides good contrast in white on black"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + + background: black; + color: white; + caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */ + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is either white + or some other color that contrasts well with the background.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <textarea id="test"></textarea> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-006.html b/testing/web-platform/tests/css/css-ui/caret-color-006.html new file mode 100644 index 0000000000..e85f7f194e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-006.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color auto, gray on gray</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact may"> +<meta name="assert" content="Test checks that caret-color:auto provides good contrast in gray on gray"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + + background: gray; + color: gray; + caret-color: auto; /*initial value, but to be sure in case the UA stylesheet sets something else */ + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is + any color that contrasts well with the background.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <textarea id="test"></textarea> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-007.html b/testing/web-platform/tests/css/css-ui/caret-color-007.html new file mode 100644 index 0000000000..ddd7e03c39 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-007.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color: currentColor</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color:currentColor is inherited as currentColor and resolves to the value of the color property at used value time"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; /* the color of a thin object like the caret is easier to see on a black background. */ + + color: lime; + } + div { + caret-color: currentcolor; + color: red; + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is green</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <div> + <textarea id="test"></textarea> + </div> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-008.html b/testing/web-platform/tests/css/css-ui/caret-color-008.html new file mode 100644 index 0000000000..c63d89c3d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-008.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color animation</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://drafts.csswg.org/css-animations-1/#animation"> +<meta name="flags" content="interact animated"> +<meta name="assert" content="Test checks that caret-color is animatable as a color"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */ + + caret-color: red; + animation: caret-many-colors 5s linear alternate infinite; + } + @keyframes caret-many-colors { + 0% { caret-color: lime; } + 20% { caret-color: gray; } + 40% { caret-color: cyan; } + 60% { caret-color: pink; } + 80% { caret-color: blue; } + 100% { caret-color: brown; } + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret continuously changes colors.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <textarea id="test"></textarea> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-009.html b/testing/web-platform/tests/css/css-ui/caret-color-009.html new file mode 100644 index 0000000000..23aeaa6531 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-009.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color computed values</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color"> +<meta name="flags" content="dom"> +<meta name="assert" content="Test checks that the resolved value of auto, currentcolor and initial for caret-color property, is the used value."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#d1 { + color: lime; + caret-color: auto; +} +#d2 { + color: cyan; + caret-color: currentcolor; +} +#d3 { + color: magenta; + caret-color: initial; +} +</style> +<body> + <div id=d1></div> + <div id=d2></div> + <div id=d3></div> + <div id=log></div> + +<script> +test( + function(){ + var d1 = document.getElementById("d1"); + assert_equals(window.getComputedStyle(d1)["caret-color"], "rgb(0, 255, 0)"); + }, "Check the resolved value of 'auto'"); +test( + function(){ + var d2 = document.getElementById("d2"); + assert_equals(window.getComputedStyle(d2)["caret-color"], "rgb(0, 255, 255)"); + }, "Check the resolved value of 'currentcolor'"); +test( + function(){ + var d3 = document.getElementById("d3"); + assert_equals(window.getComputedStyle(d3)["caret-color"], "rgb(255, 0, 255)"); + }, "Check the resolved value of 'initial'"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-010.html b/testing/web-platform/tests/css/css-ui/caret-color-010.html new file mode 100644 index 0000000000..a734f8a2b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-010.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color input</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color can be set on an input"> +<style> + input { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */ + + caret-color: lime; + } +</style> +<body> + <p>Test passes if, when the input field below is focused for editing, the text insertion caret is green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <input id="test"></input> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-011.html b/testing/web-platform/tests/css/css-ui/caret-color-011.html new file mode 100644 index 0000000000..a0ca95a396 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color contenteditable</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color can be set on a contenteditable element"> +<style> + div { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */ + + caret-color: lime; + } +</style> +<body> + <p>Test passes if, when when the editable element below is focused is focused for editing, the text insertion caret is green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <div id="test" contenteditable>Focus this editable element</div> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-012.html b/testing/web-platform/tests/css/css-ui/caret-color-012.html new file mode 100644 index 0000000000..1c8439167f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-012.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color: auto</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact should"> +<meta name="assert" content="Test checks that caret-color:auto is inherited as auto and resolves to the value of the color property at used value time"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; /* the color of a thin object like the caret is easier to see on a black background. */ + + color: lime; + } + div { + caret-color: auto; + color: red; + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret is green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <div> + <textarea id="test"></textarea> + </div> + <script> + window.onload = function() { + document.getElementById("test").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-013.html b/testing/web-platform/tests/css/css-ui/caret-color-013.html new file mode 100644 index 0000000000..8b307fb6e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-013.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color dynamic changes</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://www.w3.org/TR/css3-color/#color0"> +<meta name="flags" content="dom"> +<meta name="assert" content="Test checks checks that carret-color can be correctly changed using the style attribute, and that the computed value is done correctly."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div id="log"></div> +<div id="wrapper"> + <textarea id="textarea"></textarea> +</div> + +<script> + function testStyleCaretColor(element, value) { + assert_equals(element.style.caretColor, value, "The style attribute's caret-color should be '" + value + "'"); + } + + function testComputedStyleCaretColor(element, value) { + assert_equals(getComputedStyle(element).getPropertyValue("caret-color"), value, "caret-color computed style should be '" + value + "'"); + } + + function setAndCheckCaretColor(element, caretColor, styleValue, computedStyleValue, description) { + element.style.caretColor = caretColor; + test(function() { + testStyleCaretColor(element, styleValue); + testComputedStyleCaretColor(element, computedStyleValue); + }, description); + } + + var textarea = document.getElementById("textarea"); + setAndCheckCaretColor(textarea, "", "", "rgb(0, 0, 0)", "Test default caret-color"); + setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial"); + setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 0, 0)", "Test caret-color: inherit"); + setAndCheckCaretColor(textarea, "auto", "auto", "rgb(0, 0, 0)", "Test caret-color: auto"); + setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "rgb(0, 0, 0)", "Test caret-color: currentcolor"); + setAndCheckCaretColor(textarea, "lime", "lime", "rgb(0, 255, 0)", "Test caret-color: lime"); + setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Reset caret-color: initial"); + setAndCheckCaretColor(textarea, "rgb(0, 100, 100)", "rgb(0, 100, 100)", "rgb(0, 100, 100)", "Test caret-color: rgb(0, 100, 100)"); + + var wrapper = document.getElementById("wrapper"); + wrapper.style.caretColor = "green"; + + setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial (inherited)"); + setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 128, 0)", "Test caret-color: inherit (inherited)"); + setAndCheckCaretColor(textarea, "blue", "blue", "rgb(0, 0, 255)", "Test caret-color: blue (inherited)"); +</script> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-014.html b/testing/web-platform/tests/css/css-ui/caret-color-014.html new file mode 100644 index 0000000000..1607c368c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-014.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color links</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color can be set on a contenteditable link"> +<style> + a { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; /* the color of a thin object like the caret is easier to see on a black background. */ + + color: white; + caret-color: lime; + } +</style> +<body> + <p>Test passes if, when the link is focused for editing, the text insertion caret is green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <a id="link" contenteditable href="#">link</a> + <script> + window.onload = function() { + document.getElementById("link").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-015.html b/testing/web-platform/tests/css/css-ui/caret-color-015.html new file mode 100644 index 0000000000..eacbcae2b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-015.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color visited links</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color can be set on a contenteditable visited link"> +<style> + a { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; /* the color of a thin object like the caret is easier to see on a black background. */ + + color: white; + caret-color: red; + } + + a:link { + color: yellow; + } + + a:visited { + caret-color: lime; + } +</style> +<body> + <p>Before running this test, this <a href="./">link</a> must have been visited. It will have yellow text if this is not the case. If it its text is yellow, you need to navigate to this link first. + <p>Test passes if, when the link below is focused for editing, the text insertion caret is green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <a id="link" contenteditable href="./">link</a> + <script> + window.onload = function() { + /* Convenience helper to get the link into the browsing history. + Using a relative path because some browsers only allow replaceState within the same domain. */ + current_url = window.location.href; + history.replaceState({},"","./"); + history.replaceState({},"",current_url); + + document.getElementById("link").focus(); + } + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-016.html b/testing/web-platform/tests/css/css-ui/caret-color-016.html new file mode 100644 index 0000000000..25740ace9d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-016.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color visited link computed value</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://www.w3.org/TR/css3-color/#color0"> +<link rel="help" href="https://www.w3.org/TR/selectors4/#link"> +<meta name="flags" content="may interact"> +<meta name="assert" content="Test checks that computed style of caret-color on visited links doesn't leak privacy information."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + a { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; /* the color of a thin object like the caret is easier to see on a black background. */ + + color: white; + caret-color: lime; + } + + a:link { + color: yellow; + } + + a:visited { + caret-color: cyan; + } +</style> +<body> + <p>Before running this test, this <a href="./">link</a> must have been visited. It will have yellow text if this is not the case. If it its text is yellow, you need to navigate to this link first. + <p><a id="link" contenteditable href="./">link</a></p> + <div id=log></div> + + <script> + setup( + function(){ + /* Helper to get the link into the browsing history. + Using a relative path because some browsers only allow replaceState within the same domain. */ + current_url = window.location.href; + history.replaceState({},"","./"); + history.replaceState({},"",current_url); + }); + + test( + function(){ + var link = document.getElementById("link"); + assert_equals(window.getComputedStyle(link)["caret-color"], "rgb(0, 255, 0)"); + }, "The computed value of a visited link should be the same than a non-visited link"); + </script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-017.html b/testing/web-platform/tests/css/css-ui/caret-color-017.html new file mode 100644 index 0000000000..cfd7bbd0e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-017.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color transition</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://www.w3.org/TR/css-transitions-1/#transition-shorthand-property"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that caret-color can be used in a transition"> +<style> + textarea { + font-size: 3em; + font-weight: bold; + width: 10em; + padding: 10px; + background: black; color: white; /* the color of a thin object like the caret is easier to see on a black background. */ + + caret-color: magenta; + transition: caret-color 5s; + } + + textarea:focus { + caret-color: lime; + } +</style> +<body> + <p>Test passes if, when the text area below is focused for editing, the text insertion caret color gradually changes from magenta to green.</p> + <p>The shape of the caret, and whether it flashes, are not part of the test.</p> + <textarea></textarea> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-018.html b/testing/web-platform/tests/css/css-ui/caret-color-018.html new file mode 100644 index 0000000000..f5dd3a616a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-018.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<link rel="help" href="https://www.w3.org/TR/css3-color/#color0"> +<meta name="assert" content="Test checks that caret-color is animatable as a color, and that the computed values during the animation are the expected ones."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + textarea { + caret-color: red; + } +</style> +<body> + <textarea id="textarea"></textarea> + <div id=log></div> + + <script> + test( + function(){ + var textarea = document.getElementById("textarea"); + assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)'); + + var keyframes = [ + { caretColor: 'magenta' }, + { caretColor: 'lime' } + ]; + var options = { + duration: 10, + fill: "forwards" + }; + + var player = textarea.animate(keyframes, options); + player.pause(); + player.currentTime = 0; + assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)'); + player.currentTime = 5; + assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)'); + player.currentTime = 10; + assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)'); + }, "The caret-color property is animatable"); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-019.html b/testing/web-platform/tests/css/css-ui/caret-color-019.html new file mode 100644 index 0000000000..adb5d802f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-019.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color auto test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<link rel="help" href="https://www.w3.org/TR/css3-color/#color0"> +<meta name="assert" content="Test checks that 'auto' value for caret-color property is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + textarea { + color: magenta; + } +</style> +<body> + <textarea id="textarea"></textarea> + <div id=log></div> + + <script> + test( + function(){ + var textarea = document.getElementById("textarea"); + var keyframes = [ + { caretColor: 'auto' }, + { caretColor: 'lime' } + ]; + var options = { + duration: 10, + fill: "forwards" + }; + + var player = textarea.animate(keyframes, options); + player.pause(); + player.currentTime = 5; + assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)'); + }, "caret-color: auto is not interpolable"); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-020.html b/testing/web-platform/tests/css/css-ui/caret-color-020.html new file mode 100644 index 0000000000..742c4a1f95 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-020.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: caret-color currentcolor test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<link rel="help" href="https://www.w3.org/TR/css3-color/#color0"> +<meta name="assert" content="Test checks that 'currentcolor' value for caret-color property is interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + textarea { + color: magenta; + } +</style> +<body> + <textarea id="textarea"></textarea> + <div id=log></div> + + <script> + test( + function(){ + var textarea = document.getElementById("textarea"); + var keyframes = [ + { caretColor: 'currentcolor' }, + { caretColor: 'lime' } + ]; + var options = { + duration: 10, + fill: "forwards" + }; + + var player = textarea.animate(keyframes, options); + player.pause(); + player.currentTime = 5; + var rgb = getComputedStyle(textarea).caretColor.match(/\d+/g); + /* Only testing that the rgb value is some intermediary value, + but not checking which, as we only care that the value is interpolated, + not about the numerical accuracy of interpolation, + which is something tests for the animation spec ought to worry about. */ + assert_true( rgb[0] < 255 && rgb[0] > 0, "the red channel is interpolated"); + assert_true( rgb[1] < 255 && rgb[1] > 0, "the green channel is interpolated"); + assert_true( rgb[2] < 255 && rgb[2] > 0, "the blue channel is interpolated"); + }, "caret-color: currentcolor is interpolable"); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/caret-color-021.html b/testing/web-platform/tests/css/css-ui/caret-color-021.html new file mode 100644 index 0000000000..9dee289348 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/caret-color-021.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Default caret-color test animation</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color"> +<link rel="help" href="https://www.w3.org/TR/css-animations-1/#animation"> +<link rel="help" href="https://www.w3.org/TR/css3-color/#color0"> +<meta name="assert" content="Test checks that the default value for caret-color property, which is 'auto', is not interpolable."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + @keyframes caret-color-to-lime { + to { caret-color: lime; } + } + + #textarea { + color: magenta; + animation: caret-color-to-lime 2s -1s paused; + } +</style> +<body> + <textarea id="textarea"></textarea> + <div id=log></div> + + <script> + test( + function(){ + var textarea = document.getElementById("textarea"); + assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)'); + }, "Default caret-color is not interpolable"); +</script> +</body> + diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-button-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-button-ref.html new file mode 100644 index 0000000000..9007ecb7fb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-button-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - button</title> +<style> + #container { width: 500px; } + button { + appearance: none; + } +</style> +<div id="container"> + <button>button</button> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-checkbox-input-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-checkbox-input-ref.html new file mode 100644 index 0000000000..d969a759a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-checkbox-input-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - checkbox-input</title> +<style> + #container { width: 500px; } +</style> +<div id="container"> + <input type="checkbox"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-color-input-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-color-input-ref.html new file mode 100644 index 0000000000..cd6380bc1f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-color-input-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - color-input</title> +<style> + #container { width: 500px; } + input[type=color] { + appearance: none; + } +</style> +<div id="container"> + <input type="color"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-button-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-button-ref.html new file mode 100644 index 0000000000..02380ae7ed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-button-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - input-button</title> +<style> + #container { width: 500px; } + input[type=button] { + appearance: none; + } +</style> +<div id="container"> + <input type="button" value="input-button"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-reset-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-reset-ref.html new file mode 100644 index 0000000000..6899e7102c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-reset-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - input-reset</title> +<style> + #container { width: 500px; } + input[type=reset] { + appearance: none; + } +</style> +<div id="container"> + <input type="reset" value="input-reset"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-search-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-search-ref.html new file mode 100644 index 0000000000..5d49037288 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-search-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - input-search</title> +<style> + #container { width: 500px; } + input[type=search] { + appearance: none; + } +</style> +<div id="container"> + <input type="search" value="input-search"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-search-text-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-search-text-ref.html new file mode 100644 index 0000000000..5918616f5d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-search-text-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - input-search-text</title> +<style> + #container { width: 500px; } + input[type=search] { + appearance: none; + } +</style> +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-submit-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-submit-ref.html new file mode 100644 index 0000000000..3ceb54959e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-submit-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - input-submit</title> +<style> + #container { width: 500px; } + input[type=submit] { + appearance: none; + } +</style> +<div id="container"> + <input type="submit" value="input-submit"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-text-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-text-ref.html new file mode 100644 index 0000000000..ad8dcc2289 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-input-text-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - input-text</title> +<style> + #container { width: 500px; } + input[type=text] { + appearance: none; + } +</style> +<div id="container"> + <input type="text" value="input-text"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-link-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-link-ref.html new file mode 100644 index 0000000000..6d36dfdce4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-link-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - link</title> +<style> + #container { width: 500px; } +</style> +<div id="container"> + <a>a</a> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-meter-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-meter-ref.html new file mode 100644 index 0000000000..43b5825547 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-meter-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - meter</title> +<style> + #container { width: 500px; } + meter { + appearance: none; + } +</style> +<div id="container"> + <meter value=0.5></meter> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-progress-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-progress-ref.html new file mode 100644 index 0000000000..20bf38150d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-progress-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback</title> +<style> + #container { width: 500px; } + progress { + appearance: none; + } +</style> +<div id="container"> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-props-revert-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-props-revert-001.html new file mode 100644 index 0000000000..a91d2a736a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-props-revert-001.html @@ -0,0 +1,82 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: 'revert' keyword for properties that disable native appearance for widgets</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes the tested property with value 'revert'."> +<link rel="match" href="compute-kind-widget-no-fallback-ref.html"> +<style> + #container { width: 500px; } + #container > * { + background-color: revert; + border-top-color: revert; + border-top-style: revert; + border-top-width: revert; + border-right-color: revert; + border-right-style: revert; + border-right-width: revert; + border-bottom-color: revert; + border-bottom-style: revert; + border-bottom-width: revert; + border-left-color: revert; + border-left-style: revert; + border-left-width: revert; + border-block-start-color: revert; + border-block-end-color: revert; + border-inline-start-color: revert; + border-inline-end-color: revert; + border-block-start-style: revert; + border-block-end-style: revert; + border-inline-start-style: revert; + border-inline-end-style: revert; + border-block-start-width: revert; + border-block-end-width: revert; + border-inline-start-width: revert; + border-inline-end-width: revert; + background-image: revert; + background-attachment: revert; + background-position: revert; + background-clip: revert; + background-origin: revert; + background-size: revert; + border-image-source: revert; + border-image-slice: revert; + border-image-width: revert; + border-image-outset: revert; + border-image-repeat: revert; + border-top-left-radius: revert; + border-top-right-radius: revert; + border-bottom-right-radius: revert; + border-bottom-left-radius: revert; + border-start-start-radius: revert; + border-start-end-radius: revert; + border-end-start-radius: revert; + border-end-end-radius: revert; + } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a>a</a> + <button id="button">button</button> + <input id="button-input" type="button" value="input-button"> + <input id="submit-input" type="submit" value="input-submit"> + <input id="reset-input" type="reset" value="input-reset"> + + <input id="text-input" type="text" value="input-text"> + <input id="search-text-input" type="search" value="input-search-text"> + <input id="search-input" type="search" value="input-search"> + + <input id="range-input" type="range"> + <input id="checkbox-input" type="checkbox"> + <input id="radio-input" type="radio"> + <input id="color-input" type="color"> + + <textarea id="textarea">textarea</textarea> + <select multiple id="select-listbox"><option>select-listbox</option></select> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> + <select id="select-menulist-button"><option>select-menulist-button</option></select> + <meter id="meter" value=0.5></meter> + <progress id="progress" value=0.5></progress> +</div> + diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-radio-input-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-radio-input-ref.html new file mode 100644 index 0000000000..3654e6b72f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-radio-input-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - radio-input</title> +<style> + #container { width: 500px; } +</style> +<div id="container"> + <input type="radio"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-range-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-range-ref.html new file mode 100644 index 0000000000..ea8f2a0279 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-range-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - range</title> +<style> + #container { width: 500px; } +</style> +<div id="container"> + <input type="range"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-dropdown-box-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-dropdown-box-ref.html new file mode 100644 index 0000000000..bb038c8c3d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-dropdown-box-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - select-dropdown-box</title> +<style> + #container { width: 500px; } + #select-dropdown-box { appearance: none; appearance: menulist-button; } +</style> +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-listbox-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-listbox-ref.html new file mode 100644 index 0000000000..46feae487f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-listbox-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - select-listbox</title> +<style> + #container { width: 500px; } + #select-listbox { + appearance: none; + } +</style> +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-menulist-button-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-menulist-button-ref.html new file mode 100644 index 0000000000..6f3ca4f5a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-select-menulist-button-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - select-menulist-button</title> +<style> + #container { width: 500px; } + #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-textarea-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-textarea-ref.html new file mode 100644 index 0000000000..863e58a669 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-fallback-textarea-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - fallback - textarea</title> +<style> + #container { width: 500px; } + textarea { + appearance: none; + } +</style> +<div id="container"> + <textarea>textarea</textarea> +</div> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-attachment-001.html new file mode 100644 index 0000000000..065fc6dca6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-clip-001.html new file mode 100644 index 0000000000..7059583860 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-color-001.html new file mode 100644 index 0000000000..bcef8dcd98 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-image-001.html new file mode 100644 index 0000000000..c2ff3ad6df --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-origin-001.html new file mode 100644 index 0000000000..3e6a287e3f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-position-001.html new file mode 100644 index 0000000000..8c35eb79fb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-size-001.html new file mode 100644 index 0000000000..a177d5c50b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-color-001.html new file mode 100644 index 0000000000..bc1220b566 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-style-001.html new file mode 100644 index 0000000000..326ccec446 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-width-001.html new file mode 100644 index 0000000000..6d88e2a8e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-color-001.html new file mode 100644 index 0000000000..30f3867c5e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-style-001.html new file mode 100644 index 0000000000..69f21ffab2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-width-001.html new file mode 100644 index 0000000000..05b17053be --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-color-001.html new file mode 100644 index 0000000000..d18b6a1173 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..1da373a781 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..cd2ccf665f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-style-001.html new file mode 100644 index 0000000000..b7aad05558 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-width-001.html new file mode 100644 index 0000000000..ecdf09ac0d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-end-radius-001.html new file mode 100644 index 0000000000..b7a4342845 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-start-radius-001.html new file mode 100644 index 0000000000..3756b2a201 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-outset-001.html new file mode 100644 index 0000000000..8ad71780de --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-repeat-001.html new file mode 100644 index 0000000000..a212ee7ef3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-slice-001.html new file mode 100644 index 0000000000..d3f87ebe5a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-source-001.html new file mode 100644 index 0000000000..86ec41a3ff --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-width-001.html new file mode 100644 index 0000000000..53df9ea152 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-color-001.html new file mode 100644 index 0000000000..85079f5c41 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-style-001.html new file mode 100644 index 0000000000..ce94d07364 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-width-001.html new file mode 100644 index 0000000000..ea361edbab --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-color-001.html new file mode 100644 index 0000000000..7bbbbf97a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-style-001.html new file mode 100644 index 0000000000..0ab244c534 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-width-001.html new file mode 100644 index 0000000000..a2fe2f5a70 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-color-001.html new file mode 100644 index 0000000000..ca8e684b4e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-style-001.html new file mode 100644 index 0000000000..e44cf3a2b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-width-001.html new file mode 100644 index 0000000000..561c51de03 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-color-001.html new file mode 100644 index 0000000000..1edc31d98d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-style-001.html new file mode 100644 index 0000000000..79a59df4cb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-width-001.html new file mode 100644 index 0000000000..5125890ff0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-end-radius-001.html new file mode 100644 index 0000000000..39972ab69e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-start-radius-001.html new file mode 100644 index 0000000000..47e454e4ca --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-color-001.html new file mode 100644 index 0000000000..6a331379ae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-left-radius-001.html new file mode 100644 index 0000000000..83d5437b2c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-right-radius-001.html new file mode 100644 index 0000000000..ad7801693c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-style-001.html new file mode 100644 index 0000000000..41b55bdc10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-width-001.html new file mode 100644 index 0000000000..ec22310531 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-button-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <button id="button">button</button> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-attachment-001.html new file mode 100644 index 0000000000..854146dbed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-clip-001.html new file mode 100644 index 0000000000..c58d84534d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-color-001.html new file mode 100644 index 0000000000..e1d5e7379a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-image-001.html new file mode 100644 index 0000000000..c37517e78f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-origin-001.html new file mode 100644 index 0000000000..8a7f9502b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-position-001.html new file mode 100644 index 0000000000..3edc2785ed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-size-001.html new file mode 100644 index 0000000000..94816e45ae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-color-001.html new file mode 100644 index 0000000000..fe6e5c970e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-style-001.html new file mode 100644 index 0000000000..489c662119 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-width-001.html new file mode 100644 index 0000000000..f257590b5f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-color-001.html new file mode 100644 index 0000000000..d1b1c63bb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-style-001.html new file mode 100644 index 0000000000..6da6d53162 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-width-001.html new file mode 100644 index 0000000000..c18824f102 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-color-001.html new file mode 100644 index 0000000000..d8dde9fa77 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..ea8b93a771 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..4778156079 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-style-001.html new file mode 100644 index 0000000000..f4ccb3ee9c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-width-001.html new file mode 100644 index 0000000000..dcc9e39f33 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-end-radius-001.html new file mode 100644 index 0000000000..9f22001410 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-start-radius-001.html new file mode 100644 index 0000000000..453d687a8f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-outset-001.html new file mode 100644 index 0000000000..1102fce152 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-repeat-001.html new file mode 100644 index 0000000000..7b821272c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-slice-001.html new file mode 100644 index 0000000000..d7694d6778 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-source-001.html new file mode 100644 index 0000000000..0e274628f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-width-001.html new file mode 100644 index 0000000000..c485feab75 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-color-001.html new file mode 100644 index 0000000000..0220ac227c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-style-001.html new file mode 100644 index 0000000000..83f0ee6dc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-width-001.html new file mode 100644 index 0000000000..aca82890ed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-color-001.html new file mode 100644 index 0000000000..7c3ea0e32c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-style-001.html new file mode 100644 index 0000000000..329b717ca0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-width-001.html new file mode 100644 index 0000000000..9d5ca5f95a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-color-001.html new file mode 100644 index 0000000000..00397b9cd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-style-001.html new file mode 100644 index 0000000000..415c45d8ae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-width-001.html new file mode 100644 index 0000000000..0653e96092 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-color-001.html new file mode 100644 index 0000000000..f17035b651 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-style-001.html new file mode 100644 index 0000000000..fd96b80bfa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-width-001.html new file mode 100644 index 0000000000..9eb0bfd483 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-end-radius-001.html new file mode 100644 index 0000000000..c6f7b9c70f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-start-radius-001.html new file mode 100644 index 0000000000..c3473dff43 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-color-001.html new file mode 100644 index 0000000000..40671ee01e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-left-radius-001.html new file mode 100644 index 0000000000..bf8cb7150a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-right-radius-001.html new file mode 100644 index 0000000000..bbaed9a391 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-style-001.html new file mode 100644 index 0000000000..bb9b393d5d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-width-001.html new file mode 100644 index 0000000000..3260a9b13d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-checkbox-input-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for checkbox-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-checkbox-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="checkbox-input" type="checkbox"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-attachment-001.html new file mode 100644 index 0000000000..a62ebcba16 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-clip-001.html new file mode 100644 index 0000000000..0da878e3c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-color-001.html new file mode 100644 index 0000000000..3adca19760 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-image-001.html new file mode 100644 index 0000000000..79d16f7a5f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-origin-001.html new file mode 100644 index 0000000000..30be831c55 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-position-001.html new file mode 100644 index 0000000000..a72860779a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-size-001.html new file mode 100644 index 0000000000..68f34df768 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-color-001.html new file mode 100644 index 0000000000..7ab8c50eda --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-style-001.html new file mode 100644 index 0000000000..5fef1705dd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-width-001.html new file mode 100644 index 0000000000..de753d9cf5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-color-001.html new file mode 100644 index 0000000000..639e53697b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-style-001.html new file mode 100644 index 0000000000..66138c5954 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-width-001.html new file mode 100644 index 0000000000..7e338d3d27 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-color-001.html new file mode 100644 index 0000000000..33e55cc3b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..70eec00b9a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..196edd37f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-style-001.html new file mode 100644 index 0000000000..483a2008f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-width-001.html new file mode 100644 index 0000000000..0f6a26e547 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-end-radius-001.html new file mode 100644 index 0000000000..877568e595 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-start-radius-001.html new file mode 100644 index 0000000000..3b553d1664 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-outset-001.html new file mode 100644 index 0000000000..9aca0eb08c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-repeat-001.html new file mode 100644 index 0000000000..2195aa4d09 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-slice-001.html new file mode 100644 index 0000000000..b2d5a70710 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-source-001.html new file mode 100644 index 0000000000..5a4f6f54ed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-width-001.html new file mode 100644 index 0000000000..394163c402 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-color-001.html new file mode 100644 index 0000000000..c8beca67c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-style-001.html new file mode 100644 index 0000000000..2cca2308d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-width-001.html new file mode 100644 index 0000000000..1e78d303b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-color-001.html new file mode 100644 index 0000000000..dc78893a4e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-style-001.html new file mode 100644 index 0000000000..69fc22e3b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-width-001.html new file mode 100644 index 0000000000..e726ac45a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-color-001.html new file mode 100644 index 0000000000..06123f7d3f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-style-001.html new file mode 100644 index 0000000000..8a467f2f02 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-width-001.html new file mode 100644 index 0000000000..1631967fb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-color-001.html new file mode 100644 index 0000000000..3f80a29957 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-style-001.html new file mode 100644 index 0000000000..47b974b4a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-width-001.html new file mode 100644 index 0000000000..7a640d231d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-end-radius-001.html new file mode 100644 index 0000000000..836685bc1a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-start-radius-001.html new file mode 100644 index 0000000000..1b8d113fbe --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-color-001.html new file mode 100644 index 0000000000..3ca939ab72 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-left-radius-001.html new file mode 100644 index 0000000000..6e789f088f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-right-radius-001.html new file mode 100644 index 0000000000..7f4b9195f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-style-001.html new file mode 100644 index 0000000000..840f69afcc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-width-001.html new file mode 100644 index 0000000000..886996b710 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-color-input-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for color-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-color-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="color-input" type="color"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-attachment-001.html new file mode 100644 index 0000000000..7b112f084a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-clip-001.html new file mode 100644 index 0000000000..53f79ab38c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-color-001.html new file mode 100644 index 0000000000..2209bae6c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-image-001.html new file mode 100644 index 0000000000..e385afe4af --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-origin-001.html new file mode 100644 index 0000000000..9d3386711f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-position-001.html new file mode 100644 index 0000000000..6d70a3f546 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-size-001.html new file mode 100644 index 0000000000..fabd5b383c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-color-001.html new file mode 100644 index 0000000000..16b07513a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-style-001.html new file mode 100644 index 0000000000..c5941567e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-width-001.html new file mode 100644 index 0000000000..c189260b1b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-color-001.html new file mode 100644 index 0000000000..f04c3729b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-style-001.html new file mode 100644 index 0000000000..41ba3b7c27 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-width-001.html new file mode 100644 index 0000000000..9738cd8528 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-color-001.html new file mode 100644 index 0000000000..f8d784aeb1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..cac8afec0a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..3f64f28497 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-style-001.html new file mode 100644 index 0000000000..1d45f05661 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-width-001.html new file mode 100644 index 0000000000..04065781f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-end-radius-001.html new file mode 100644 index 0000000000..8ce8dc3962 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-start-radius-001.html new file mode 100644 index 0000000000..8f1acf3c9f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-outset-001.html new file mode 100644 index 0000000000..7bef870794 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-repeat-001.html new file mode 100644 index 0000000000..fc3ebd45dd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-slice-001.html new file mode 100644 index 0000000000..b6c908f422 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-source-001.html new file mode 100644 index 0000000000..44a4fbaa8c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-width-001.html new file mode 100644 index 0000000000..39d018507c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-color-001.html new file mode 100644 index 0000000000..313eab3d7b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-style-001.html new file mode 100644 index 0000000000..ce6cb72d03 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-width-001.html new file mode 100644 index 0000000000..31e4906531 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-color-001.html new file mode 100644 index 0000000000..60f8eeb08d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-style-001.html new file mode 100644 index 0000000000..927f0695ff --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-width-001.html new file mode 100644 index 0000000000..ebb88b67c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-color-001.html new file mode 100644 index 0000000000..eaeeddc8bb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-style-001.html new file mode 100644 index 0000000000..171638f609 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-width-001.html new file mode 100644 index 0000000000..07b4ba5cf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-color-001.html new file mode 100644 index 0000000000..ee08a59604 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-style-001.html new file mode 100644 index 0000000000..622da69d72 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-width-001.html new file mode 100644 index 0000000000..cb0368dd05 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-end-radius-001.html new file mode 100644 index 0000000000..ae98634e8c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-start-radius-001.html new file mode 100644 index 0000000000..45f7debe9d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-color-001.html new file mode 100644 index 0000000000..985b3d528e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-left-radius-001.html new file mode 100644 index 0000000000..5b5636609c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-right-radius-001.html new file mode 100644 index 0000000000..f0b7989c73 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-style-001.html new file mode 100644 index 0000000000..b58218e3da --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-width-001.html new file mode 100644 index 0000000000..e20e258e8a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-button-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="button-input" type="button" value="input-button"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-attachment-001.html new file mode 100644 index 0000000000..a7845bc7dc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-clip-001.html new file mode 100644 index 0000000000..5bb8e7d5d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-color-001.html new file mode 100644 index 0000000000..1780d56a41 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-image-001.html new file mode 100644 index 0000000000..07527ae7db --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-origin-001.html new file mode 100644 index 0000000000..4e5b6c68ce --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-position-001.html new file mode 100644 index 0000000000..199e6465eb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-size-001.html new file mode 100644 index 0000000000..82d54e0c10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-color-001.html new file mode 100644 index 0000000000..41038d2512 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-style-001.html new file mode 100644 index 0000000000..9c326f1e4a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-width-001.html new file mode 100644 index 0000000000..3f2611f0e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-color-001.html new file mode 100644 index 0000000000..a3252e39e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-style-001.html new file mode 100644 index 0000000000..6f73781413 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-width-001.html new file mode 100644 index 0000000000..1a671be321 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-color-001.html new file mode 100644 index 0000000000..5ac0db7d1e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..df3608a14a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..3cc95934b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-style-001.html new file mode 100644 index 0000000000..b146476a50 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-width-001.html new file mode 100644 index 0000000000..00dfbddbe6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-end-radius-001.html new file mode 100644 index 0000000000..34eaf07fd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-start-radius-001.html new file mode 100644 index 0000000000..42aa29cada --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-outset-001.html new file mode 100644 index 0000000000..368bb3a7c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-repeat-001.html new file mode 100644 index 0000000000..5f0ba37f9d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-slice-001.html new file mode 100644 index 0000000000..c611ad59b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-source-001.html new file mode 100644 index 0000000000..f84fcfc0fc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-width-001.html new file mode 100644 index 0000000000..1936517741 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-color-001.html new file mode 100644 index 0000000000..db6e2d64c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-style-001.html new file mode 100644 index 0000000000..13502447a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-width-001.html new file mode 100644 index 0000000000..25121c822a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-color-001.html new file mode 100644 index 0000000000..f01b339b37 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-style-001.html new file mode 100644 index 0000000000..3ac0e47260 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-width-001.html new file mode 100644 index 0000000000..7e0c23adc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-color-001.html new file mode 100644 index 0000000000..6309f000f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-style-001.html new file mode 100644 index 0000000000..c502e833a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-width-001.html new file mode 100644 index 0000000000..7c8e95dbea --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-color-001.html new file mode 100644 index 0000000000..2bbbcf3584 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-style-001.html new file mode 100644 index 0000000000..4b1ea45088 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-width-001.html new file mode 100644 index 0000000000..02b93b0b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-end-radius-001.html new file mode 100644 index 0000000000..4beeb88981 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-start-radius-001.html new file mode 100644 index 0000000000..019b6a52e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-color-001.html new file mode 100644 index 0000000000..6facf31f99 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-left-radius-001.html new file mode 100644 index 0000000000..2ba3e038dd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-right-radius-001.html new file mode 100644 index 0000000000..d15f23413b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-style-001.html new file mode 100644 index 0000000000..d5bebef7a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-width-001.html new file mode 100644 index 0000000000..e705cd422d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-reset-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-reset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-reset-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="reset-input" type="reset" value="input-reset"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-attachment-001.html new file mode 100644 index 0000000000..cd69159ee9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-clip-001.html new file mode 100644 index 0000000000..1343ebcf0c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-color-001.html new file mode 100644 index 0000000000..882ca79998 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-image-001.html new file mode 100644 index 0000000000..769cf45b9f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-origin-001.html new file mode 100644 index 0000000000..035cfdf25c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-position-001.html new file mode 100644 index 0000000000..5267fd2c78 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-size-001.html new file mode 100644 index 0000000000..73aca9954a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-color-001.html new file mode 100644 index 0000000000..9d954d5714 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-style-001.html new file mode 100644 index 0000000000..81761e4671 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-width-001.html new file mode 100644 index 0000000000..e6b37c9b78 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-color-001.html new file mode 100644 index 0000000000..7bed3fc399 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-style-001.html new file mode 100644 index 0000000000..854d6fb98e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-width-001.html new file mode 100644 index 0000000000..9ad91b7ba4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-color-001.html new file mode 100644 index 0000000000..093c18c703 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..a33640e2a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..21ec7d1f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-style-001.html new file mode 100644 index 0000000000..26b31f9331 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-width-001.html new file mode 100644 index 0000000000..677a04ef16 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-end-radius-001.html new file mode 100644 index 0000000000..426b75464e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-start-radius-001.html new file mode 100644 index 0000000000..58f7487c99 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-outset-001.html new file mode 100644 index 0000000000..fe1d1f0cc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-repeat-001.html new file mode 100644 index 0000000000..611aaadce8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-slice-001.html new file mode 100644 index 0000000000..fbd35beef9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-source-001.html new file mode 100644 index 0000000000..73b90e28b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-width-001.html new file mode 100644 index 0000000000..53be3f24e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-color-001.html new file mode 100644 index 0000000000..5cef20ff8b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-style-001.html new file mode 100644 index 0000000000..01c62b5120 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-width-001.html new file mode 100644 index 0000000000..279ea4bd9d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-color-001.html new file mode 100644 index 0000000000..b4e93e5fb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-style-001.html new file mode 100644 index 0000000000..279a809043 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-width-001.html new file mode 100644 index 0000000000..99694bc67b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-color-001.html new file mode 100644 index 0000000000..608d5d2664 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-style-001.html new file mode 100644 index 0000000000..af85417326 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-width-001.html new file mode 100644 index 0000000000..c1dcc4fb9e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-color-001.html new file mode 100644 index 0000000000..b2c2200537 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-style-001.html new file mode 100644 index 0000000000..890770c872 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-width-001.html new file mode 100644 index 0000000000..8128bb539f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-end-radius-001.html new file mode 100644 index 0000000000..c9dc8fc034 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-start-radius-001.html new file mode 100644 index 0000000000..fe0f50c862 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-color-001.html new file mode 100644 index 0000000000..8e19135548 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-left-radius-001.html new file mode 100644 index 0000000000..00706e8e18 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-right-radius-001.html new file mode 100644 index 0000000000..d9eff0a7ed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-style-001.html new file mode 100644 index 0000000000..687a156374 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-width-001.html new file mode 100644 index 0000000000..8d21da1745 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-search</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-input" type="search" value="input-search"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-attachment-001.html new file mode 100644 index 0000000000..d686b71ecb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-clip-001.html new file mode 100644 index 0000000000..5e5bb98b73 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-color-001.html new file mode 100644 index 0000000000..a9a4f9ce47 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-image-001.html new file mode 100644 index 0000000000..67ce5d447a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-origin-001.html new file mode 100644 index 0000000000..d64ea1c55c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-position-001.html new file mode 100644 index 0000000000..47328fa550 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-size-001.html new file mode 100644 index 0000000000..801451bc4a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-color-001.html new file mode 100644 index 0000000000..35c2b259aa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-style-001.html new file mode 100644 index 0000000000..02418ca51a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-width-001.html new file mode 100644 index 0000000000..76ba5d545b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-color-001.html new file mode 100644 index 0000000000..5aa72d0032 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-style-001.html new file mode 100644 index 0000000000..5d6f0deb64 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-width-001.html new file mode 100644 index 0000000000..e1a0fe22c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-color-001.html new file mode 100644 index 0000000000..0429d4cf7b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..1ff1f9cf1c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..1a7b7521fd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-style-001.html new file mode 100644 index 0000000000..f33d4b5424 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-width-001.html new file mode 100644 index 0000000000..f60665b61a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-end-radius-001.html new file mode 100644 index 0000000000..5410992260 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-start-radius-001.html new file mode 100644 index 0000000000..207216e61c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-outset-001.html new file mode 100644 index 0000000000..e54d46aeb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-repeat-001.html new file mode 100644 index 0000000000..c58d2436fd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-slice-001.html new file mode 100644 index 0000000000..3d69aace32 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-source-001.html new file mode 100644 index 0000000000..0300383427 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-width-001.html new file mode 100644 index 0000000000..51b084ec8b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-color-001.html new file mode 100644 index 0000000000..b002409c93 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-style-001.html new file mode 100644 index 0000000000..6ecfaaeeaf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-width-001.html new file mode 100644 index 0000000000..33d53e4cb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-color-001.html new file mode 100644 index 0000000000..8a936bb270 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-style-001.html new file mode 100644 index 0000000000..5d43ac916b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-width-001.html new file mode 100644 index 0000000000..a086c59762 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-color-001.html new file mode 100644 index 0000000000..647d0c1daa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-style-001.html new file mode 100644 index 0000000000..8cd58bc942 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-width-001.html new file mode 100644 index 0000000000..a70ed497c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-color-001.html new file mode 100644 index 0000000000..9b286548ef --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-style-001.html new file mode 100644 index 0000000000..69bc1fae3b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-width-001.html new file mode 100644 index 0000000000..6a918db51d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-end-radius-001.html new file mode 100644 index 0000000000..84cc06a594 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-start-radius-001.html new file mode 100644 index 0000000000..1481a5fcc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-color-001.html new file mode 100644 index 0000000000..d5f2c67817 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-left-radius-001.html new file mode 100644 index 0000000000..6de4bb323f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-right-radius-001.html new file mode 100644 index 0000000000..6a3055cc09 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-style-001.html new file mode 100644 index 0000000000..80099b9cef --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-width-001.html new file mode 100644 index 0000000000..152a473d57 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-search-text-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-search-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-search-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="search-text-input" type="search" value="input-search-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-attachment-001.html new file mode 100644 index 0000000000..b36f8cf5ef --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-clip-001.html new file mode 100644 index 0000000000..88f96485a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-color-001.html new file mode 100644 index 0000000000..c5ebc0feae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-image-001.html new file mode 100644 index 0000000000..2bee179324 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-origin-001.html new file mode 100644 index 0000000000..f000839d1b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-position-001.html new file mode 100644 index 0000000000..1aea7465d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-size-001.html new file mode 100644 index 0000000000..0a92b03012 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-color-001.html new file mode 100644 index 0000000000..10c583ff72 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-style-001.html new file mode 100644 index 0000000000..009e62337e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-width-001.html new file mode 100644 index 0000000000..5d4c3e04c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-color-001.html new file mode 100644 index 0000000000..7b85ed264f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-style-001.html new file mode 100644 index 0000000000..db23cc0010 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-width-001.html new file mode 100644 index 0000000000..ea8943575a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-color-001.html new file mode 100644 index 0000000000..a0c6aeabd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..27368813f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..d876112e06 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-style-001.html new file mode 100644 index 0000000000..c08eacfb62 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-width-001.html new file mode 100644 index 0000000000..0f98fb5e43 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-end-radius-001.html new file mode 100644 index 0000000000..b7212ef44c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-start-radius-001.html new file mode 100644 index 0000000000..ca29a81260 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-outset-001.html new file mode 100644 index 0000000000..8505655ea4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-repeat-001.html new file mode 100644 index 0000000000..42084e7d8b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-slice-001.html new file mode 100644 index 0000000000..03721a19fd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-source-001.html new file mode 100644 index 0000000000..b768500ae8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-width-001.html new file mode 100644 index 0000000000..cd28c59c28 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-color-001.html new file mode 100644 index 0000000000..7b1109ed25 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-style-001.html new file mode 100644 index 0000000000..47c7d1f49f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-width-001.html new file mode 100644 index 0000000000..2fde013d5b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-color-001.html new file mode 100644 index 0000000000..debb779240 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-style-001.html new file mode 100644 index 0000000000..4e260effb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-width-001.html new file mode 100644 index 0000000000..9caca2822f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-color-001.html new file mode 100644 index 0000000000..7c5118375b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-style-001.html new file mode 100644 index 0000000000..8981d27e61 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-width-001.html new file mode 100644 index 0000000000..5b93b5bc3d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-color-001.html new file mode 100644 index 0000000000..243341d212 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-style-001.html new file mode 100644 index 0000000000..be67b5327d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-width-001.html new file mode 100644 index 0000000000..bffb7dc6ac --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-end-radius-001.html new file mode 100644 index 0000000000..ab96454e0b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-start-radius-001.html new file mode 100644 index 0000000000..0af363c894 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-color-001.html new file mode 100644 index 0000000000..9b62a7c5fc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-left-radius-001.html new file mode 100644 index 0000000000..b6a1cd3476 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-right-radius-001.html new file mode 100644 index 0000000000..48c4a8cbc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-style-001.html new file mode 100644 index 0000000000..de7b61f4a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-width-001.html new file mode 100644 index 0000000000..df2deefd7f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-submit-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-submit</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-submit-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="submit-input" type="submit" value="input-submit"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-attachment-001.html new file mode 100644 index 0000000000..9aa9950487 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-clip-001.html new file mode 100644 index 0000000000..e90ad46d57 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-color-001.html new file mode 100644 index 0000000000..10e5bfcc11 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-image-001.html new file mode 100644 index 0000000000..ab612a3713 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-origin-001.html new file mode 100644 index 0000000000..8b447fc78b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-position-001.html new file mode 100644 index 0000000000..e75ae6369c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-size-001.html new file mode 100644 index 0000000000..6e182151ef --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-color-001.html new file mode 100644 index 0000000000..00536269b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-style-001.html new file mode 100644 index 0000000000..460aab47c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-width-001.html new file mode 100644 index 0000000000..bfe0590c9e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-color-001.html new file mode 100644 index 0000000000..a99decb693 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-style-001.html new file mode 100644 index 0000000000..fc3ac1a2fc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-width-001.html new file mode 100644 index 0000000000..9fa513af7a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-color-001.html new file mode 100644 index 0000000000..2eb97b2d9c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..34ffa2d2b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..e889656af8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-style-001.html new file mode 100644 index 0000000000..1afdb4b486 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-width-001.html new file mode 100644 index 0000000000..6540d05fa6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-end-radius-001.html new file mode 100644 index 0000000000..98735e9c01 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-start-radius-001.html new file mode 100644 index 0000000000..6dd419e22d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-outset-001.html new file mode 100644 index 0000000000..fc46ace6cd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-repeat-001.html new file mode 100644 index 0000000000..709485ffc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-slice-001.html new file mode 100644 index 0000000000..1b391cceec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-source-001.html new file mode 100644 index 0000000000..2523a8261c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-width-001.html new file mode 100644 index 0000000000..3f22013eee --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-color-001.html new file mode 100644 index 0000000000..294cc707d0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-style-001.html new file mode 100644 index 0000000000..97a9a5dcfc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-width-001.html new file mode 100644 index 0000000000..e0035f2d79 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-color-001.html new file mode 100644 index 0000000000..f4b3974ab4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-style-001.html new file mode 100644 index 0000000000..e2b1ca7c7a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-width-001.html new file mode 100644 index 0000000000..dc07a0ed82 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-color-001.html new file mode 100644 index 0000000000..65fd37f7e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-style-001.html new file mode 100644 index 0000000000..0c5fd539b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-width-001.html new file mode 100644 index 0000000000..5e8e54ef9e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-color-001.html new file mode 100644 index 0000000000..91385eb589 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-style-001.html new file mode 100644 index 0000000000..8fe090fc33 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-width-001.html new file mode 100644 index 0000000000..cb3470e000 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-end-radius-001.html new file mode 100644 index 0000000000..d8ca285dfc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-start-radius-001.html new file mode 100644 index 0000000000..b3c94b3388 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-color-001.html new file mode 100644 index 0000000000..e57dba8c03 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-left-radius-001.html new file mode 100644 index 0000000000..d408d75db3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-right-radius-001.html new file mode 100644 index 0000000000..a39e8fff1f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-style-001.html new file mode 100644 index 0000000000..cd4fcc4b10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-width-001.html new file mode 100644 index 0000000000..21185f9890 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-input-text-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for input-text</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-input-text-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="text-input" type="text" value="input-text"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-attachment-001.html new file mode 100644 index 0000000000..b68f8ee1cc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-clip-001.html new file mode 100644 index 0000000000..417f715414 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-color-001.html new file mode 100644 index 0000000000..52e07c3f03 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-image-001.html new file mode 100644 index 0000000000..27c6a2668f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-origin-001.html new file mode 100644 index 0000000000..06963ba20d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-position-001.html new file mode 100644 index 0000000000..e6e1c180be --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-size-001.html new file mode 100644 index 0000000000..0fec1738a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-color-001.html new file mode 100644 index 0000000000..a35424ba40 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-style-001.html new file mode 100644 index 0000000000..471287ca74 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-width-001.html new file mode 100644 index 0000000000..7010081f1b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-color-001.html new file mode 100644 index 0000000000..c8861b4a76 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-style-001.html new file mode 100644 index 0000000000..510214f2ee --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-width-001.html new file mode 100644 index 0000000000..c9ebdbebcc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-color-001.html new file mode 100644 index 0000000000..8db0902fff --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..8bee975ead --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..00ac753675 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-style-001.html new file mode 100644 index 0000000000..ac19679451 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-width-001.html new file mode 100644 index 0000000000..c18b4dcf0a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-end-radius-001.html new file mode 100644 index 0000000000..bb8fa354bb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-start-radius-001.html new file mode 100644 index 0000000000..1263823068 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-outset-001.html new file mode 100644 index 0000000000..ab9b973ffa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-repeat-001.html new file mode 100644 index 0000000000..32eb2a38ff --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-slice-001.html new file mode 100644 index 0000000000..1a6486e9d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-source-001.html new file mode 100644 index 0000000000..2ae8d4d475 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-width-001.html new file mode 100644 index 0000000000..f22d5bfa5f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-color-001.html new file mode 100644 index 0000000000..86c142554b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-style-001.html new file mode 100644 index 0000000000..dd0df7f55b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-width-001.html new file mode 100644 index 0000000000..31ef531d5a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-color-001.html new file mode 100644 index 0000000000..b721fb5211 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-style-001.html new file mode 100644 index 0000000000..a521fa1a91 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-width-001.html new file mode 100644 index 0000000000..d8ad23661e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-color-001.html new file mode 100644 index 0000000000..c2ec8d3269 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-style-001.html new file mode 100644 index 0000000000..33c793aed5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-width-001.html new file mode 100644 index 0000000000..f8d2311a08 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-color-001.html new file mode 100644 index 0000000000..6affa83d96 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-style-001.html new file mode 100644 index 0000000000..4d508dbb30 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-width-001.html new file mode 100644 index 0000000000..c32ba83dbf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-end-radius-001.html new file mode 100644 index 0000000000..62be943c75 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-start-radius-001.html new file mode 100644 index 0000000000..84362f3e8d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-color-001.html new file mode 100644 index 0000000000..f41ae3c623 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-left-radius-001.html new file mode 100644 index 0000000000..ec8ed2996c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-right-radius-001.html new file mode 100644 index 0000000000..9c29f074f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-style-001.html new file mode 100644 index 0000000000..34c6b54a1d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-width-001.html new file mode 100644 index 0000000000..73b8261ae6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-link-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for link</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-link-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a id="link">a</a> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-attachment-001.html new file mode 100644 index 0000000000..f9760122e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-clip-001.html new file mode 100644 index 0000000000..dd353eb00a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-color-001.html new file mode 100644 index 0000000000..2d6f903a06 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-image-001.html new file mode 100644 index 0000000000..2217eba409 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-origin-001.html new file mode 100644 index 0000000000..8c2321227d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-position-001.html new file mode 100644 index 0000000000..b82a498119 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-size-001.html new file mode 100644 index 0000000000..2e3fa56313 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-color-001.html new file mode 100644 index 0000000000..2b0742dec1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-style-001.html new file mode 100644 index 0000000000..cf733efffa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-width-001.html new file mode 100644 index 0000000000..44bcd7d590 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-color-001.html new file mode 100644 index 0000000000..c03b5eb012 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-style-001.html new file mode 100644 index 0000000000..5ed90d3684 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-width-001.html new file mode 100644 index 0000000000..0dae7defc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-color-001.html new file mode 100644 index 0000000000..bc3d1bb8e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..aad197d192 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..2ea501c5ce --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-style-001.html new file mode 100644 index 0000000000..887fe56ec6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-width-001.html new file mode 100644 index 0000000000..5af8fffb41 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-end-radius-001.html new file mode 100644 index 0000000000..bacfb1d979 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-start-radius-001.html new file mode 100644 index 0000000000..0a4d9bcd32 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-outset-001.html new file mode 100644 index 0000000000..f89f6c8c10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-repeat-001.html new file mode 100644 index 0000000000..c87a7194a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-slice-001.html new file mode 100644 index 0000000000..ebb7d24679 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-source-001.html new file mode 100644 index 0000000000..a823e2281c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-width-001.html new file mode 100644 index 0000000000..c0d4f43d6a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-color-001.html new file mode 100644 index 0000000000..624c594d41 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-style-001.html new file mode 100644 index 0000000000..233c4f2811 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-width-001.html new file mode 100644 index 0000000000..4d25da679a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-color-001.html new file mode 100644 index 0000000000..49d0c1d9f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-style-001.html new file mode 100644 index 0000000000..0a48844dee --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-width-001.html new file mode 100644 index 0000000000..ae7382c574 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-color-001.html new file mode 100644 index 0000000000..f5cde670ff --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-style-001.html new file mode 100644 index 0000000000..48c1740146 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-width-001.html new file mode 100644 index 0000000000..0aca1fbaa7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-color-001.html new file mode 100644 index 0000000000..b7b2360792 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-style-001.html new file mode 100644 index 0000000000..24d4b2eeca --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-width-001.html new file mode 100644 index 0000000000..a3659d5662 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-end-radius-001.html new file mode 100644 index 0000000000..ac4ec661e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-start-radius-001.html new file mode 100644 index 0000000000..62d5d57d2b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-color-001.html new file mode 100644 index 0000000000..28210d6f67 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-left-radius-001.html new file mode 100644 index 0000000000..cf25cc4894 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-right-radius-001.html new file mode 100644 index 0000000000..24f15a54b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-style-001.html new file mode 100644 index 0000000000..37ba183f77 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-width-001.html new file mode 100644 index 0000000000..c10fce34f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-meter-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-meter-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <meter id="meter" value=0.5></meter> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-attachment-001.html new file mode 100644 index 0000000000..b85186c680 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-clip-001.html new file mode 100644 index 0000000000..e3df1f06a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-color-001.html new file mode 100644 index 0000000000..8e935212c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-image-001.html new file mode 100644 index 0000000000..87e895e043 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-origin-001.html new file mode 100644 index 0000000000..a4958abd24 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-position-001.html new file mode 100644 index 0000000000..ed117a9d97 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-size-001.html new file mode 100644 index 0000000000..3047ef8414 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-color-001.html new file mode 100644 index 0000000000..3f0846230f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-style-001.html new file mode 100644 index 0000000000..1cddf916cc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-width-001.html new file mode 100644 index 0000000000..fe21ae809f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-color-001.html new file mode 100644 index 0000000000..67b5b8330e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-style-001.html new file mode 100644 index 0000000000..5359a78b25 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-width-001.html new file mode 100644 index 0000000000..1019a98b3e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-color-001.html new file mode 100644 index 0000000000..366236c704 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..6dce72a618 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..86eb1e7e76 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-style-001.html new file mode 100644 index 0000000000..900c7961ba --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-width-001.html new file mode 100644 index 0000000000..67e97920d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-end-radius-001.html new file mode 100644 index 0000000000..0f78fb7c16 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-start-radius-001.html new file mode 100644 index 0000000000..9f74da94cb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-outset-001.html new file mode 100644 index 0000000000..306c1611a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-repeat-001.html new file mode 100644 index 0000000000..2ba0e04b0d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-slice-001.html new file mode 100644 index 0000000000..42d6560f9c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-source-001.html new file mode 100644 index 0000000000..80e6fdcc2b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-width-001.html new file mode 100644 index 0000000000..5086cbae92 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-color-001.html new file mode 100644 index 0000000000..88427b7892 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-style-001.html new file mode 100644 index 0000000000..e16bb5a948 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-width-001.html new file mode 100644 index 0000000000..88f5615387 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-color-001.html new file mode 100644 index 0000000000..a94c23d717 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-style-001.html new file mode 100644 index 0000000000..479a0faa2d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-width-001.html new file mode 100644 index 0000000000..480fbc7207 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-color-001.html new file mode 100644 index 0000000000..0f6a3c6fcb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-style-001.html new file mode 100644 index 0000000000..aab0719b9b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-width-001.html new file mode 100644 index 0000000000..6c24d4e733 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-color-001.html new file mode 100644 index 0000000000..2f0aa1351c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-style-001.html new file mode 100644 index 0000000000..02dfe722a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-width-001.html new file mode 100644 index 0000000000..4f438b5320 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-end-radius-001.html new file mode 100644 index 0000000000..bdab3fd0ec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-start-radius-001.html new file mode 100644 index 0000000000..5c5f06890f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-color-001.html new file mode 100644 index 0000000000..62c0d5f2b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-left-radius-001.html new file mode 100644 index 0000000000..7c6b62f826 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-right-radius-001.html new file mode 100644 index 0000000000..f412a90350 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-style-001.html new file mode 100644 index 0000000000..c8601df503 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-width-001.html new file mode 100644 index 0000000000..ea5c5c49fa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-progress-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for progress</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-progress-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-attachment-001.html new file mode 100644 index 0000000000..8c7e8ea16e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-clip-001.html new file mode 100644 index 0000000000..cbb6a7ec10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-color-001.html new file mode 100644 index 0000000000..ce5b79bbe2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-image-001.html new file mode 100644 index 0000000000..e15e9e4c15 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-origin-001.html new file mode 100644 index 0000000000..0e81e6fe38 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-position-001.html new file mode 100644 index 0000000000..4fa8e7af26 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-size-001.html new file mode 100644 index 0000000000..1a989ed6df --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-color-001.html new file mode 100644 index 0000000000..d7708ce4cc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-style-001.html new file mode 100644 index 0000000000..4707f09aa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-width-001.html new file mode 100644 index 0000000000..a0098cc0ec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-color-001.html new file mode 100644 index 0000000000..0375cd802f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-style-001.html new file mode 100644 index 0000000000..ec17b48c6b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-width-001.html new file mode 100644 index 0000000000..2e3d9443cd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-color-001.html new file mode 100644 index 0000000000..1cbebba1d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..f9c253da89 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..5f1458598c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-style-001.html new file mode 100644 index 0000000000..96c8932201 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-width-001.html new file mode 100644 index 0000000000..be80a5af60 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-end-radius-001.html new file mode 100644 index 0000000000..f03b3ffdc2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-start-radius-001.html new file mode 100644 index 0000000000..954a4ff433 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-outset-001.html new file mode 100644 index 0000000000..8965306856 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-repeat-001.html new file mode 100644 index 0000000000..662f9ca648 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-slice-001.html new file mode 100644 index 0000000000..f15ebe31a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-source-001.html new file mode 100644 index 0000000000..539ebb7b5d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-width-001.html new file mode 100644 index 0000000000..a17d8475dd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-color-001.html new file mode 100644 index 0000000000..8772070068 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-style-001.html new file mode 100644 index 0000000000..271f4e37fd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-width-001.html new file mode 100644 index 0000000000..7f61c6fb59 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-color-001.html new file mode 100644 index 0000000000..6c25f25d17 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-style-001.html new file mode 100644 index 0000000000..5ced60d4ba --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-width-001.html new file mode 100644 index 0000000000..f39286a771 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-color-001.html new file mode 100644 index 0000000000..b19deb2c66 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-style-001.html new file mode 100644 index 0000000000..56e7d9ef18 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-width-001.html new file mode 100644 index 0000000000..2ee2531b68 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-color-001.html new file mode 100644 index 0000000000..8fbb9f4115 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-style-001.html new file mode 100644 index 0000000000..df88bff3fc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-width-001.html new file mode 100644 index 0000000000..22ce6e076f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-end-radius-001.html new file mode 100644 index 0000000000..360b827151 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-start-radius-001.html new file mode 100644 index 0000000000..6a6904d013 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-color-001.html new file mode 100644 index 0000000000..08086865d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-left-radius-001.html new file mode 100644 index 0000000000..426cae160e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-right-radius-001.html new file mode 100644 index 0000000000..b95427553e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-style-001.html new file mode 100644 index 0000000000..ead7b86ce6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-width-001.html new file mode 100644 index 0000000000..c2a867421b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-radio-input-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for radio-input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-radio-input-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="radio-input" type="radio"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-attachment-001.html new file mode 100644 index 0000000000..72c767a514 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-clip-001.html new file mode 100644 index 0000000000..790641dd9d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-color-001.html new file mode 100644 index 0000000000..b3e18adffa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-image-001.html new file mode 100644 index 0000000000..4043b25fe9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-origin-001.html new file mode 100644 index 0000000000..a80b97b2a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-position-001.html new file mode 100644 index 0000000000..895faa0084 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-size-001.html new file mode 100644 index 0000000000..a3513799ae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-color-001.html new file mode 100644 index 0000000000..557070fe80 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-style-001.html new file mode 100644 index 0000000000..b0748f3f5b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-width-001.html new file mode 100644 index 0000000000..f5b075ac17 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-color-001.html new file mode 100644 index 0000000000..28a37eae6a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-style-001.html new file mode 100644 index 0000000000..3ff761c721 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-width-001.html new file mode 100644 index 0000000000..78458b6608 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-color-001.html new file mode 100644 index 0000000000..fabdf0a492 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..4f4b4c6d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..5a0bdd2902 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-style-001.html new file mode 100644 index 0000000000..2478e65d1f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-width-001.html new file mode 100644 index 0000000000..924356441b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-end-radius-001.html new file mode 100644 index 0000000000..96b8ee95c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-start-radius-001.html new file mode 100644 index 0000000000..2c2e4ed67a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-outset-001.html new file mode 100644 index 0000000000..9890eae400 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-repeat-001.html new file mode 100644 index 0000000000..a3602ef173 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-slice-001.html new file mode 100644 index 0000000000..0c8ffa168b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-source-001.html new file mode 100644 index 0000000000..60fcd035a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-width-001.html new file mode 100644 index 0000000000..59098eec89 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-color-001.html new file mode 100644 index 0000000000..16e2c1bd47 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-style-001.html new file mode 100644 index 0000000000..7e664810f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-width-001.html new file mode 100644 index 0000000000..eaff4997e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-color-001.html new file mode 100644 index 0000000000..163694169a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-style-001.html new file mode 100644 index 0000000000..a5b216d1fa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-width-001.html new file mode 100644 index 0000000000..0eb1f6ec6f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-color-001.html new file mode 100644 index 0000000000..02135eae2d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-style-001.html new file mode 100644 index 0000000000..edef1998be --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-width-001.html new file mode 100644 index 0000000000..e9d2804bcd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-color-001.html new file mode 100644 index 0000000000..fb20afa6e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-style-001.html new file mode 100644 index 0000000000..6f4bfe4068 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-width-001.html new file mode 100644 index 0000000000..03422cd5f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-end-radius-001.html new file mode 100644 index 0000000000..c5d4621893 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-start-radius-001.html new file mode 100644 index 0000000000..5c4a81f064 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-color-001.html new file mode 100644 index 0000000000..a8b12f51b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-left-radius-001.html new file mode 100644 index 0000000000..0eefc064b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-right-radius-001.html new file mode 100644 index 0000000000..d43e98ee52 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-style-001.html new file mode 100644 index 0000000000..1e8dec3e85 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-width-001.html new file mode 100644 index 0000000000..a45f6b1427 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-range-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for range</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-range-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <input id="range-input" type="range"> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-attachment-001.html new file mode 100644 index 0000000000..9ba8944274 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-clip-001.html new file mode 100644 index 0000000000..719bec28ed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-color-001.html new file mode 100644 index 0000000000..9092c41bd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-image-001.html new file mode 100644 index 0000000000..972c343dc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-origin-001.html new file mode 100644 index 0000000000..abc9acfc41 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-position-001.html new file mode 100644 index 0000000000..999fff4211 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-size-001.html new file mode 100644 index 0000000000..977bc0e835 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-color-001.html new file mode 100644 index 0000000000..46bdb5b0e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-style-001.html new file mode 100644 index 0000000000..aa3788595a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-width-001.html new file mode 100644 index 0000000000..cebe998f89 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-color-001.html new file mode 100644 index 0000000000..9c238d5760 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-style-001.html new file mode 100644 index 0000000000..7061a367ba --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-width-001.html new file mode 100644 index 0000000000..34578a4782 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-color-001.html new file mode 100644 index 0000000000..d1a7a01295 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..1c70cd361c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..5185032c23 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-style-001.html new file mode 100644 index 0000000000..ceda431954 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-width-001.html new file mode 100644 index 0000000000..3c43f47e59 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-end-radius-001.html new file mode 100644 index 0000000000..182c527cc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-start-radius-001.html new file mode 100644 index 0000000000..efbd14d7de --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-outset-001.html new file mode 100644 index 0000000000..5a0eb9beab --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-repeat-001.html new file mode 100644 index 0000000000..5ad2b2c0f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-slice-001.html new file mode 100644 index 0000000000..3993331322 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-source-001.html new file mode 100644 index 0000000000..9c9da2935a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-width-001.html new file mode 100644 index 0000000000..d03492c583 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-color-001.html new file mode 100644 index 0000000000..b8498148b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-style-001.html new file mode 100644 index 0000000000..13a75cc5cd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-width-001.html new file mode 100644 index 0000000000..40d13678cc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-color-001.html new file mode 100644 index 0000000000..de4241fdf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-style-001.html new file mode 100644 index 0000000000..9ea8f4dfe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-width-001.html new file mode 100644 index 0000000000..dedfa6d40e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-color-001.html new file mode 100644 index 0000000000..5f88004404 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-style-001.html new file mode 100644 index 0000000000..d574ac6850 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-width-001.html new file mode 100644 index 0000000000..0c466b38ea --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-color-001.html new file mode 100644 index 0000000000..ac2c9b29cf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-style-001.html new file mode 100644 index 0000000000..671dd6fccc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-width-001.html new file mode 100644 index 0000000000..2c7baec752 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-end-radius-001.html new file mode 100644 index 0000000000..43c1b27a7e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-start-radius-001.html new file mode 100644 index 0000000000..f902a43179 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-color-001.html new file mode 100644 index 0000000000..b030e5cd21 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-left-radius-001.html new file mode 100644 index 0000000000..35d83e296e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-right-radius-001.html new file mode 100644 index 0000000000..922a101bec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-style-001.html new file mode 100644 index 0000000000..dfddc274eb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-width-001.html new file mode 100644 index 0000000000..30019434db --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-dropdown-box-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for select-dropdown-box</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-dropdown-box-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-attachment-001.html new file mode 100644 index 0000000000..b6f4087456 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-clip-001.html new file mode 100644 index 0000000000..43f87212d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-color-001.html new file mode 100644 index 0000000000..b349902c1b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-image-001.html new file mode 100644 index 0000000000..bf8b706bf1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-origin-001.html new file mode 100644 index 0000000000..dfd1a934a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-position-001.html new file mode 100644 index 0000000000..41b6a7b81b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-size-001.html new file mode 100644 index 0000000000..64fe9a0c89 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-color-001.html new file mode 100644 index 0000000000..17a010be36 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-style-001.html new file mode 100644 index 0000000000..f079e82abc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-width-001.html new file mode 100644 index 0000000000..8f741e2136 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-color-001.html new file mode 100644 index 0000000000..28ff9ee6ae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-style-001.html new file mode 100644 index 0000000000..dc7bcd0952 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-width-001.html new file mode 100644 index 0000000000..0509dde5fb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-color-001.html new file mode 100644 index 0000000000..af7704d0dd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..b38b443531 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..f797e078f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-style-001.html new file mode 100644 index 0000000000..6d895bce48 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-width-001.html new file mode 100644 index 0000000000..14ea0153c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-end-radius-001.html new file mode 100644 index 0000000000..d105047747 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-start-radius-001.html new file mode 100644 index 0000000000..0ca58e5d04 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-outset-001.html new file mode 100644 index 0000000000..367d1f64e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-repeat-001.html new file mode 100644 index 0000000000..558ab52000 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-slice-001.html new file mode 100644 index 0000000000..736ffd422d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-source-001.html new file mode 100644 index 0000000000..987ed46626 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-width-001.html new file mode 100644 index 0000000000..e6d824e21b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-color-001.html new file mode 100644 index 0000000000..269805c299 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-style-001.html new file mode 100644 index 0000000000..74f6794710 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-width-001.html new file mode 100644 index 0000000000..bfb561c4b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-color-001.html new file mode 100644 index 0000000000..7403def5f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-style-001.html new file mode 100644 index 0000000000..235436bb4a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-width-001.html new file mode 100644 index 0000000000..24f6eb28a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-color-001.html new file mode 100644 index 0000000000..107eeec6a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-style-001.html new file mode 100644 index 0000000000..a97d90c5cb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-width-001.html new file mode 100644 index 0000000000..894276bb89 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-color-001.html new file mode 100644 index 0000000000..6ebb3df197 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-style-001.html new file mode 100644 index 0000000000..4cc83727db --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-width-001.html new file mode 100644 index 0000000000..029c608827 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-end-radius-001.html new file mode 100644 index 0000000000..464d7dfd1b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-start-radius-001.html new file mode 100644 index 0000000000..81c7892743 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-color-001.html new file mode 100644 index 0000000000..d7c68ac98d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-left-radius-001.html new file mode 100644 index 0000000000..3b306bb7eb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-right-radius-001.html new file mode 100644 index 0000000000..ae8091382b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-style-001.html new file mode 100644 index 0000000000..8fbbb91e2e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-width-001.html new file mode 100644 index 0000000000..b80972a50e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-listbox-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for select-listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-listbox-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select multiple id="select-listbox"><option>select-listbox</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-attachment-001.html new file mode 100644 index 0000000000..4378b659c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-clip-001.html new file mode 100644 index 0000000000..d62a086486 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-color-001.html new file mode 100644 index 0000000000..bbf309938c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-image-001.html new file mode 100644 index 0000000000..12c9fd5c4a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-origin-001.html new file mode 100644 index 0000000000..336fc8623c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-position-001.html new file mode 100644 index 0000000000..7f4013654f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-size-001.html new file mode 100644 index 0000000000..bb420ccf73 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-color-001.html new file mode 100644 index 0000000000..1a476acc46 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-style-001.html new file mode 100644 index 0000000000..db78458573 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-width-001.html new file mode 100644 index 0000000000..f21984e12c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-color-001.html new file mode 100644 index 0000000000..95308ab790 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-style-001.html new file mode 100644 index 0000000000..1fa80c7eca --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-width-001.html new file mode 100644 index 0000000000..57553cd306 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-color-001.html new file mode 100644 index 0000000000..4666747e22 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..c58d57f709 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..e302b17d54 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-style-001.html new file mode 100644 index 0000000000..c0154d1e83 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-width-001.html new file mode 100644 index 0000000000..1dc70272c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-end-radius-001.html new file mode 100644 index 0000000000..ebedeacd9c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-start-radius-001.html new file mode 100644 index 0000000000..4a02399236 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-outset-001.html new file mode 100644 index 0000000000..015737dca3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-repeat-001.html new file mode 100644 index 0000000000..cb03b812f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-slice-001.html new file mode 100644 index 0000000000..799010070b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-source-001.html new file mode 100644 index 0000000000..1b3838ebb4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-width-001.html new file mode 100644 index 0000000000..d78b9d9f38 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-color-001.html new file mode 100644 index 0000000000..20c896d910 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-style-001.html new file mode 100644 index 0000000000..15048d4353 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-width-001.html new file mode 100644 index 0000000000..ad7b00ede8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-color-001.html new file mode 100644 index 0000000000..4641bb3e77 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-style-001.html new file mode 100644 index 0000000000..ab06492b23 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-width-001.html new file mode 100644 index 0000000000..0e3fcac797 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-color-001.html new file mode 100644 index 0000000000..9fa4d380cf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-style-001.html new file mode 100644 index 0000000000..d1351ee725 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-width-001.html new file mode 100644 index 0000000000..bfcb9e1784 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-color-001.html new file mode 100644 index 0000000000..71d6758b80 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-style-001.html new file mode 100644 index 0000000000..0927300e74 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-width-001.html new file mode 100644 index 0000000000..01928ca8b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-end-radius-001.html new file mode 100644 index 0000000000..7fb7bcf7f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-start-radius-001.html new file mode 100644 index 0000000000..35fef879cc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-color-001.html new file mode 100644 index 0000000000..cf1d4f8260 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-left-radius-001.html new file mode 100644 index 0000000000..8b0eda3d78 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-right-radius-001.html new file mode 100644 index 0000000000..d2ec819ac6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-style-001.html new file mode 100644 index 0000000000..5625d4f132 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-width-001.html new file mode 100644 index 0000000000..536a7ac8f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-select-menulist-button-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for select-menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-select-menulist-button-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <select id="select-menulist-button"><option>select-menulist-button</option></select> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-attachment-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-attachment-001.html new file mode 100644 index 0000000000..ab67317a20 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-attachment-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-attachment disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-attachment."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-attachment"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-clip-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-clip-001.html new file mode 100644 index 0000000000..821cdda277 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-clip-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-clip disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-clip."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-clip"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-color-001.html new file mode 100644 index 0000000000..999bf80ab4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-image-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-image-001.html new file mode 100644 index 0000000000..30171213b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-image-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-image disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-image."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-image"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-origin-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-origin-001.html new file mode 100644 index 0000000000..9eaaeabc50 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-origin-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-origin disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-origin."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-origin"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-position-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-position-001.html new file mode 100644 index 0000000000..42c4f0ad61 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-position-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-position disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-position."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-position"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-size-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-size-001.html new file mode 100644 index 0000000000..00d57199ad --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-background-size-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: background-size disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes background-size."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "background-size"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-color-001.html new file mode 100644 index 0000000000..c44d7d585e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-style-001.html new file mode 100644 index 0000000000..61f2f20b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-width-001.html new file mode 100644 index 0000000000..c18998c5d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-end-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-color-001.html new file mode 100644 index 0000000000..4952f5a7ec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-style-001.html new file mode 100644 index 0000000000..757ace5132 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-width-001.html new file mode 100644 index 0000000000..c32109de55 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-block-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-block-start-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-block-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-block-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-color-001.html new file mode 100644 index 0000000000..6bbcadcc80 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-left-radius-001.html new file mode 100644 index 0000000000..8d1e7c4ba8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-left-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-right-radius-001.html new file mode 100644 index 0000000000..d7efd39f0f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-right-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-style-001.html new file mode 100644 index 0000000000..82c24b5f46 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-width-001.html new file mode 100644 index 0000000000..f26aa76e6a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-bottom-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-bottom-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-bottom-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-bottom-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-end-radius-001.html new file mode 100644 index 0000000000..6f75cec2d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-end-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-start-radius-001.html new file mode 100644 index 0000000000..6820c01f10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-end-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-end-start-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-end-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-end-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-outset-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-outset-001.html new file mode 100644 index 0000000000..eceb94c0b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-outset-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-outset disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-outset."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-outset"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-repeat-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-repeat-001.html new file mode 100644 index 0000000000..c5861b08bd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-repeat-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-repeat disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-repeat."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-repeat"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-slice-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-slice-001.html new file mode 100644 index 0000000000..ffe49fda10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-slice-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-slice disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-slice."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-slice"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-source-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-source-001.html new file mode 100644 index 0000000000..e8c66dd3b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-source-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-source disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-source."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-source"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-width-001.html new file mode 100644 index 0000000000..62848f6c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-image-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-image-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-image-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-image-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-color-001.html new file mode 100644 index 0000000000..96dfb2cb6e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-style-001.html new file mode 100644 index 0000000000..854bb92df6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-width-001.html new file mode 100644 index 0000000000..146a6725d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-end-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-end-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-end-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-end-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-color-001.html new file mode 100644 index 0000000000..21250ce8bf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-style-001.html new file mode 100644 index 0000000000..95fae5cfcd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-width-001.html new file mode 100644 index 0000000000..fa70544fdb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-inline-start-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-inline-start-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-inline-start-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-inline-start-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-color-001.html new file mode 100644 index 0000000000..add41f7ecf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-style-001.html new file mode 100644 index 0000000000..1a5cb56922 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-width-001.html new file mode 100644 index 0000000000..9b76bcef47 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-left-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-left-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-left-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-left-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-color-001.html new file mode 100644 index 0000000000..e5436513b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-style-001.html new file mode 100644 index 0000000000..d01355a909 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-width-001.html new file mode 100644 index 0000000000..de1fefbaf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-right-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-right-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-right-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-right-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-end-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-end-radius-001.html new file mode 100644 index 0000000000..2d5d8dcd75 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-end-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-end-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-end-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-end-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-start-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-start-radius-001.html new file mode 100644 index 0000000000..3c79c908e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-start-start-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-start-start-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-start-start-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-start-start-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-color-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-color-001.html new file mode 100644 index 0000000000..5f79c624f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-color-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-color disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-color."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-color"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-left-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-left-radius-001.html new file mode 100644 index 0000000000..a065111193 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-left-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-left-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-left-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-left-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-right-radius-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-right-radius-001.html new file mode 100644 index 0000000000..786f486e74 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-right-radius-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-right-radius disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-right-radius."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-right-radius"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-style-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-style-001.html new file mode 100644 index 0000000000..92e3f96b65 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-style-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-style disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-style."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-style"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-width-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-width-001.html new file mode 100644 index 0000000000..1363260996 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-generated/kind-of-widget-fallback-textarea-border-top-width-001.html @@ -0,0 +1,27 @@ +<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: border-top-width disables native appearance for textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes border-top-width."> +<link rel="match" href="../compute-kind-widget-fallback-textarea-ref.html"> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <textarea id="textarea">textarea</textarea> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "border-top-width"; +for (const el of elements) { + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-no-fallback-props-001.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-no-fallback-props-001.html new file mode 100644 index 0000000000..0533da654f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-no-fallback-props-001.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: properties that DO NOT disable native appearance for widgets</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes properties that don't disable native appearance."> +<link rel="match" href="compute-kind-widget-no-fallback-ref.html"> + +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> + +<div id="container"> + <a>a</a> + <button id="button">button</button> + <input id="button-input" type="button" value="input-button"> + <input id="submit-input" type="submit" value="input-submit"> + <input id="reset-input" type="reset" value="input-reset"> + + <input id="text-input" type="text" value="input-text"> + <input id="search-text-input" type="search" value="input-search-text"> + <input id="search-input" type="search" value="input-search"> + + <input id="range-input" type="range"> + <input id="checkbox-input" type="checkbox"> + <input id="radio-input" type="radio"> + <input id="color-input" type="color"> + + <textarea id="textarea">textarea</textarea> + <select multiple id="select-listbox"><option>select-listbox</option></select> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> + <select id="select-menulist-button"><option>select-menulist-button</option></select> + <meter id="meter" value=0.5></meter> + <progress id="progress" value=0.5></progress> +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const fallbackProps = new Set([ + 'background-color', + 'border-top-color', + 'border-top-style', + 'border-top-width', + 'border-right-color', + 'border-right-style', + 'border-right-width', + 'border-bottom-color', + 'border-bottom-style', + 'border-bottom-width', + 'border-left-color', + 'border-left-style', + 'border-left-width', + 'border-block-start-color', + 'border-block-end-color', + 'border-inline-start-color', + 'border-inline-end-color', + 'border-block-start-style', + 'border-block-end-style', + 'border-inline-start-style', + 'border-inline-end-style', + 'border-block-start-width', + 'border-block-end-width', + 'border-inline-start-width', + 'border-inline-end-width', + 'background-image', + 'background-attachment', + 'background-position', + 'background-clip', + 'background-origin', + 'background-size', + 'border-image-source', + 'border-image-slice', + 'border-image-width', + 'border-image-outset', + 'border-image-repeat', + 'border-top-left-radius', + 'border-top-right-radius', + 'border-bottom-right-radius', + 'border-bottom-left-radius', + 'border-start-start-radius', + 'border-start-end-radius', + 'border-end-start-radius', + 'border-end-end-radius', +]); + +let mutations = [] + +// Make sure that any supported property that is not in the above list +// does not affect the widget type. +const declarations = getComputedStyle(document.documentElement); + +for (const prop of declarations) { + if (fallbackProps.has(prop)) { + continue; + } + for (const el of elements) { + mutations.push([el, prop, getComputedStyle(el).getPropertyValue(prop)]); + } +} + +// Batch all setProperty calls together (without calling gCS().getPropertyValue +// for each mutation) to avoid excessive style recalcs. +for (let mutation of mutations) { + const [el, prop, value] = mutation; + el.style.setProperty(prop, value); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/compute-kind-widget-no-fallback-ref.html b/testing/web-platform/tests/css/css-ui/compute-kind-widget-no-fallback-ref.html new file mode 100644 index 0000000000..c0e56dc051 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/compute-kind-widget-no-fallback-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: Compute kind of widget - no fallback</title> +<style> + #container { width: 500px; } + #container > #search-text-input { appearance: textfield; } + #container > #select-menulist-button { appearance: none; appearance: menulist-button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + + <input type="text" value="input-text"> + <input id="search-text-input" type="search" value="input-search-text"> + <input type="search" value="input-search"> + + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + + <textarea>textarea</textarea> + <select multiple id="select-listbox"><option>select-listbox</option></select> + <select id="select-dropdown-box"><option>select-dropdown-box</option></select> + <select id="select-menulist-button"><option>select-menulist-button</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/crashtests/outline-scrollIntoView-crash.html b/testing/web-platform/tests/css/css-ui/crashtests/outline-scrollIntoView-crash.html new file mode 100644 index 0000000000..58bbd4c6b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/crashtests/outline-scrollIntoView-crash.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<link rel="help" title="7.1. 'outline' property" href="http://www.w3.org/TR/css3-ui/#outline"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<body onload="run_test()"> + <span id="root"></span> +<script> +function build_tree(n) { + let last_leaf = root; + for (let i = 0; i < n; ++i) { + const div = document.createElement('div'); + const inline_box = document.createElement('span'); + div.appendChild(inline_box); + last_leaf.appendChild(div); + last_leaf = inline_box; + } +} +build_tree(30); + +function run_test() { + root.scrollIntoView(); +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-001.html b/testing/web-platform/tests/css/css-ui/cursor-001.html new file mode 100644 index 0000000000..6f46a6bb2a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-001.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: none</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'none' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: none; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor disappears.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-002.html b/testing/web-platform/tests/css/css-ui/cursor-002.html new file mode 100644 index 0000000000..029a5de9c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: context-menu</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'context-menu' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: context-menu; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates availability of a context menu. + Often rendered as an arrow with a small menu-like graphic next to it.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-003.html b/testing/web-platform/tests/css/css-ui/cursor-003.html new file mode 100644 index 0000000000..f7dbbb94b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-003.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: cell</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'cell' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: cell; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that a cell or set of cells may be selected. + Often rendered as a thick plus-sign with a dot in the middle.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-004.html b/testing/web-platform/tests/css/css-ui/cursor-004.html new file mode 100644 index 0000000000..44c175c2e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-004.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: vertical-text</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'vertical-text' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: vertical-text; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates vertical-text that may be selected. + Often rendered as a horizontal I-beam.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-005.html b/testing/web-platform/tests/css/css-ui/cursor-005.html new file mode 100644 index 0000000000..fc0d9e74c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-005.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: alias</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'alias' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: alias; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates an alias of/shortcut to something is to be created. + Often rendered as an arrow with a small curved arrow next to it.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-006.html b/testing/web-platform/tests/css/css-ui/cursor-006.html new file mode 100644 index 0000000000..acfba8d330 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-006.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: copy</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'copy' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: copy; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates something is to be copied. + Often rendered as an arrow with a small plus sign next to it.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-007.html b/testing/web-platform/tests/css/css-ui/cursor-007.html new file mode 100644 index 0000000000..c93d7655b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-007.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: no-drop</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'no-drop' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: no-drop; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that the dragged item cannot be dropped at the current cursor location. + Often rendered as a hand or pointer with a small circle with a line through it.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-008.html b/testing/web-platform/tests/css/css-ui/cursor-008.html new file mode 100644 index 0000000000..290f10809c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-008.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: not-allowed</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'not-allowed' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: not-allowed; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that the requested action will not be carried out. + Often rendered as a circle with a line through it.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-009.html b/testing/web-platform/tests/css/css-ui/cursor-009.html new file mode 100644 index 0000000000..0c2baf8f23 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-009.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: grab</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'grab' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: grab; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be grabbed (dragged to be moved). + Often rendered as the backside of an open hand.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-010.html b/testing/web-platform/tests/css/css-ui/cursor-010.html new file mode 100644 index 0000000000..0449c8999d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-010.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: grabbing</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'grabbing' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: grabbing; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something is being grabbed (dragged to be moved). + Often rendered as the backside of a hand with fingers closed mostly out of view.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-011.html b/testing/web-platform/tests/css/css-ui/cursor-011.html new file mode 100644 index 0000000000..bc0e73582a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-011.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: ew-resize</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'ew-resize' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: ew-resize; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized horizontally, bidirectionally. + Often rendered as arrows pointing left and right.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-012.html b/testing/web-platform/tests/css/css-ui/cursor-012.html new file mode 100644 index 0000000000..015863017c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-012.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: ns-resize</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'ns-resize' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: ns-resize; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized vertically, bidirectionally. + Often rendered as arrows pointing up and down.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-013.html b/testing/web-platform/tests/css/css-ui/cursor-013.html new file mode 100644 index 0000000000..72947f000b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-013.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: nesw-resize</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'nesw-resize' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: nesw-resize; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized diagonally + along a north-east to south-west axis, bidirectionally. + Often rendered as arrows pointing north-east and south-west.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-014.html b/testing/web-platform/tests/css/css-ui/cursor-014.html new file mode 100644 index 0000000000..a7fa465df8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-014.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: nwse-resize</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'nwse-resize' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: nwse-resize; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized diagonally + along a north-west to south-east axis, bidirectionally. + Often rendered as arrows pointing north-west and south-east.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-015.html b/testing/web-platform/tests/css/css-ui/cursor-015.html new file mode 100644 index 0000000000..88e0a5cbfc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-015.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: col-resize</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'col-resize' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: col-resize; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized horizontally, bidirectionally. + Often rendered as arrows pointing left and right with a vertical bar separating them.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-016.html b/testing/web-platform/tests/css/css-ui/cursor-016.html new file mode 100644 index 0000000000..e4aa0465dd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-016.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: row-resize</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'row-resize' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: row-resize; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be resized vertically, bidirectionally. + Often rendered as arrows pointing up and down with a horizontal bar separating them.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-017.html b/testing/web-platform/tests/css/css-ui/cursor-017.html new file mode 100644 index 0000000000..99528fede3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-017.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: all-scroll</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'all-scroll' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: all-scroll; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that the something can be scrolled in any direction. + Often rendered as arrows pointing up, down, left, and right with a dot in the middle.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-018.html b/testing/web-platform/tests/css/css-ui/cursor-018.html new file mode 100644 index 0000000000..daaa7f69e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-018.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: zoom-in</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'zoom-in' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: zoom-in; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be zoomed in. + Often rendered as a magnifying glass with a "+" in the center of the glass.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-019.html b/testing/web-platform/tests/css/css-ui/cursor-019.html new file mode 100644 index 0000000000..5be9de10b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-019.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: zoom-out</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'zoom-out' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: zoom-out; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor indicates that something can be zoomed out. + Often rendered as a magnifying glass with a "-" in the center of the glass.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-020.html b/testing/web-platform/tests/css/css-ui/cursor-020.html new file mode 100644 index 0000000000..f079d0a56c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-020.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor: pointer</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'pointer' cursor value is supported"> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: pointer; + width: 100px; + height: 100px; + border: solid blue; +} +</style> +<body> +<p>The test passes if, when moved inside the blue box, the cursor indicates a link. Often rendered as the backside of a hand with the index finger poiting and the other fingers closed.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-auto-001.html b/testing/web-platform/tests/css/css-ui/cursor-auto-001.html new file mode 100644 index 0000000000..2b2ee60cbc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-auto-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:auto on text</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'auto' cursor value does the same as 'text' over text."> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + cursor: auto; + color: blue; +} +p { + cursor: text; +} +</style> +<body> + <p>The test passes if, when moved over the blue text, the cursor indicates text that may be selected, like it does when placed over this sentence.</p> + <div>Lorem ipsum</div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-auto-002.html b/testing/web-platform/tests/css/css-ui/cursor-auto-002.html new file mode 100644 index 0000000000..dd0d5a1c05 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-auto-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:auto on links</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'auto' cursor value does the same as 'text' over text. Links are not special."> +<style> +a { + cursor: url("support/cursors/fail.png"), help; /* Override UA styles, regardless of specificity */ + cursor: auto !important; /* Override UA styles, regardless of specificity */ + color: blue; + text-decoration: none; /* Having the link not standout as being a link, to avoid distracting the tester */ +} +p { + cursor: text; +} +</style> +<body> + <p>The test passes if, when moved over the blue text, the cursor indicates text that may be selected, like it does when placed over this sentence.</p> + <a href="#">Lorem ipsum</a> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-auto-003.html b/testing/web-platform/tests/css/css-ui/cursor-auto-003.html new file mode 100644 index 0000000000..a3782dbef5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-auto-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:auto on non-textual links</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'auto' cursor value does the same as 'default' over non textual content. Links are not special."> +<style> +a { + cursor: url("support/cursors/fail.png"), help; /* Override UA styles, regardless of specificity */ + cursor: auto !important; /* Override UA styles, regardless of specificity */ +} +#ref { + cursor: default; + width: 100px; + height: 100px; + border: solid orange; +} +:root { + cursor: help; /* give the root element a different cursor so that + it is easy to tell if something changes when hovering the target.*/ +} +</style> +<body> + <p>The test passes if, when moved over the image below, the cursor is the platform-dependent default cursor.</p> + <p>Place the cursor into the orange box for a reference of what this should look like.</p> + <a href="#"><img src="support/cursors/woolly-64.png"></a> + <div id=ref></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-auto-004.html b/testing/web-platform/tests/css/css-ui/cursor-auto-004.html new file mode 100644 index 0000000000..820a93303c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-auto-004.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:auto on empty space</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'auto' cursor value does the same as 'default' over non-textual content."> +<style> +div { + width: 100px; + height: 100px; +} +#test { + cursor: url("support/cursors/fail.png"), help; + cursor: auto; + border: solid blue; +} +#ref { + cursor: default; + border: solid orange; +} +:root { + cursor: help; /* give the root element a different cursor so that + it is easy to tell if something changes when hovering the target.*/ +} +</style> +<body> + <p>The test passes if, when inside the blue box, the cursor is the platform-dependent default cursor.</p> + <p>Place the cursor into the orange box for a reference of what this should look like.</p> + <div id=test></div> + <div id=ref></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-auto-005.html b/testing/web-platform/tests/css/css-ui/cursor-auto-005.html new file mode 100644 index 0000000000..cb5ab8e5a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-auto-005.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:auto on form elements</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'auto' cursor value does the same as 'default' over everything other than selectable text or editable elements, such as form elements that do not take text input."> +<style> +#test { + border: solid blue; + width: 200px; + cursor: auto; +} +#test * { + cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */ + cursor: auto !important; /* Override UA styles, regardless of specificity */ + resize: none; /* The appearance of the cursor over UA provided resize controls is out of scope. */ + overflow: hidden; /* The appearance of the cursor over UA provided scroll controls is out of scope */ +} +#ref { + width: 100px; + height: 100px; + cursor: default; + border: solid orange; +} +:root { + cursor: help; /* give the root element a different cursor so that + it is easy to tell if something changes when hovering the target.*/ +} +</style> +<body> + <p>The test passes if, when moved over every element inside the blue box, the cursor remains the platform-dependent default cursor.</p> + <p>Place the cursor into the orange box for a reference of what this should look like.</p> + <div id=test> + <button>button</button> + <input type=button value=input-button> + <select></select> + </div> + <div id=ref></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-auto-006.html b/testing/web-platform/tests/css/css-ui/cursor-auto-006.html new file mode 100644 index 0000000000..7385beec8e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-auto-006.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:auto on editable elements</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'auto' cursor value does the same as 'text' over editable elements."> +<style> +#test { + border: solid blue; + width: 200px; + cursor: auto; +} +#test * { + cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */ + cursor: auto !important; /* Override UA styles, regardless of specificity */ + resize: none; /* The appearance of the cursor over UA provided resize controls is out of scope. */ + overflow: hidden; /* The appearance of the cursor over UA provided scroll controls is out of scope */ +} +#ref { + width: 100px; + height: 100px; + cursor: text; + border: solid orange; +} +:root { + cursor: help; /* give the root element a different cursor so that + it is easy to tell if something changes when hovering the target.*/ +} + +[contenteditable] { + border: solid; + height: 1em; + margin: 5px; +} +</style> +<body> + <p>The test passes if, when moved over every element inside the blue box, the cursor looks like the text insertion and selection cursor.</p> + <p>Place the cursor into the orange box for a reference of what this should look like.</p> + <div id=test> + <textarea></textarea> + <input> + <div contenteditable=true style="border:solid"></div> + </div> + <div id=ref></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-auto-007.html b/testing/web-platform/tests/css/css-ui/cursor-auto-007.html new file mode 100644 index 0000000000..0d355ad0d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-auto-007.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:auto on unselectable text</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The 'auto' cursor value does the same as 'default' over unselectable text."> +<style> +#test { + border: solid blue; + width: 200px; + cursor: auto; +} +#test * { + cursor: url("support/cursors/fail.png"), help !important; /* Override UA styles, regardless of specificity */ + cursor: auto !important; /* Override UA styles, regardless of specificity */ +} +#ref { + width: 100px; + height: 100px; + cursor: default; + border: solid orange; +} +:root { + cursor: help; /* give the root element a different cursor so that + it is easy to tell if something changes when hovering the target.*/ +} + +/* Hide the text if we cannot make it unselectable. + user-select is not part of css-ui level 3, so we should not depend on it + but it is nice to test it if it is supported. + Test for level 4 can take the conditional out. */ +.unselectable { display: none; } +@supports (user-select: none) or (-webkit-user-select: none) { + .unselectable { + display: block; + user-select: none; + -webkit-user-select: none; + } +} + +</style> +<body> + <p>The test passes if, when moved over every element inside the blue box, the cursor remains the platform-dependent default cursor.</p> + <p>Place the cursor into the orange box for a reference of what this should look like.</p> + <div id=test> + <!-- text in a button is either not considered text because it's in a replaced element, + or it is text but it is unselectable, eitherway, we should get the default cursor--> + <button>Text in a button</button> + + <div class=unselectable>Unselectable text</div> + </div> + <div id=ref></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-border-area.html b/testing/web-platform/tests/css/css-ui/cursor-border-area.html new file mode 100644 index 0000000000..3f5d9d8c9e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-border-area.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on the border area</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is applied over the border area."> +<style> +div { + border: solid 50px blue; + cursor: crosshair; +} +</style> +<body> + <p>The test passes if, when moved inside the blue rectangle, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-box-004.html b/testing/web-platform/tests/css/css-ui/cursor-box-004.html new file mode 100644 index 0000000000..80728ca8d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-box-004.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on the margin-box</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is not applied over the margin box."> +<style> +#container { + position: absolute; + background: blue; + cursor: crosshair; +} +#test { + margin: 100px 50px; + cursor: url("support/cursors/fail.png"), help; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div id=container><div id=test></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-box-005.html b/testing/web-platform/tests/css/css-ui/cursor-box-005.html new file mode 100644 index 0000000000..36c9be9deb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-box-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on transparent borders</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is applied over the border box, even if the border is transparent."> +<style> +#container { + position: absolute; + background: blue; + cursor: url("support/cursors/fail.png"), help; +} +#test { + border: solid transparent 50px; + cursor: crosshair; +} +</style> +<body> + <p>The test passes if, when moved over the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div id=container><div id=test></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-box-006.html b/testing/web-platform/tests/css/css-ui/cursor-box-006.html new file mode 100644 index 0000000000..135b0a4c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-box-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on border images extending out of the border-box</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is not applied outside of the border box, even if border images do extend further out."> +<style> +#container { + position: absolute; + padding: 50px; + cursor: crosshair; +} +#test{ + border-image: linear-gradient(blue, blue); + border-image-outset: 50px; + border-image-width: 50px; + border-style: solid; + border-width: 5px; + border-color: white; + cursor: url("support/cursors/fail.png"), help; +} +</style> +<body> + <p>The test passes if, when moved over the blue boxes, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign). + The shape of the cursor when it is over white areas is not part of this test.</p> + <div id=container><div id=test></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-box-007.html b/testing/web-platform/tests/css/css-ui/cursor-box-007.html new file mode 100644 index 0000000000..5fe0013b60 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-box-007.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on the margin-box</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is only applied within the border-edge, which follows border-radius."> +<style> +#container { + position: absolute; + background: blue; + cursor: crosshair; +} +#test { + border: solid white 50px; + border-radius: 50%; + cursor: default; +} +</style> +<body> + <p>The test passes if, when moved over the blue areas, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div id=container><div id=test></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-content-area.html b/testing/web-platform/tests/css/css-ui/cursor-content-area.html new file mode 100644 index 0000000000..f0f0d4dc67 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-content-area.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on the content area</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is applied over the content area, as it is strictly inside the border edge."> +<style> +div { + background: blue; + height: 100px; + cursor: crosshair; +} +</style> +<body> + <p>The test passes if, when moved inside the blue rectangle, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-hover-001.html b/testing/web-platform/tests/css/css-ui/cursor-hover-001.html new file mode 100644 index 0000000000..8e6bdc96c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-hover-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor and :hover</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="Checks that the correct cursor is used when :hover appears at the rightmost part of the selector."> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + width: 100px; + height: 100px; + border: solid blue; +} +div:hover { + cursor: crosshair; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-hover-002.html b/testing/web-platform/tests/css/css-ui/cursor-hover-002.html new file mode 100644 index 0000000000..4926d0cf50 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-hover-002.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor and :hover on ancestor</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="Checks that the correct cursor is used when :hover appears in the selector other than at the rightmost part."> +<style> +div { + cursor: url("support/cursors/fail.png"), help; + width: 100px; + height: 100px; + border: solid blue; +} +:hover div { + cursor: crosshair; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-hover-003.html b/testing/web-platform/tests/css/css-ui/cursor-hover-003.html new file mode 100644 index 0000000000..4611be5279 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-hover-003.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor, :hover and inheritance</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="Checks that a cursor set on an ancestor with the :hover pseudo class is properly inherited to the hovered child."> +<style> +#d1 { + width: 0; + height: 0; + position: relative; + cursor: url("support/cursors/fail.png"), help; +} +#d2 { + position: absolute; + top: 0; left: 0; + width: 100px; + height: 100px; + border: solid blue; +} +#d1:hover { + cursor: crosshair; +} +</style> +<body> + <p>The test passes if, when moved inside the blue box, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div id=d1><div id=d2></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-001.html b/testing/web-platform/tests/css/css-ui/cursor-image-001.html new file mode 100644 index 0000000000..de92ec643b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a PNG image supported as a custom cursor."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/woolly-64.png) 41 32, help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-002.html b/testing/web-platform/tests/css/css-ui/cursor-image-002.html new file mode 100644 index 0000000000..2281875e6e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a PNG image supported as a custom cursor, loaded cross-domain with absolute url."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(http://www.w3.org/Style/Woolly/woolly-mc.png) 41 32, help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-003.html b/testing/web-platform/tests/css/css-ui/cursor-image-003.html new file mode 100644 index 0000000000..4391fe3eab --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image may"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that an ICO image is supported as a custom cursor."> + +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/woolly-64.ico), help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-004.html b/testing/web-platform/tests/css/css-ui/cursor-image-004.html new file mode 100644 index 0000000000..3242e3cc6a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image may"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that an ICO image, with its own hotspot, is supported as a custom cursor."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/woolly-64.cur), help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-005-nfs.html b/testing/web-platform/tests/css/css-ui/cursor-image-005-nfs.html new file mode 100644 index 0000000000..e7396d212d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-005-nfs.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<link rel="help" href="http://www.w3.org/TR/css3-images/#default-object-size"> +<meta name="flags" content="interact svg may"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that an SVG image with no fixed size is supported as a custom cursor at the default object size for cursor images."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/woolly.svg) 41 32, help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-005.html b/testing/web-platform/tests/css/css-ui/cursor-image-005.html new file mode 100644 index 0000000000..32ac968342 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact svg"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a fixed size SVG image is supported as a custom cursor."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/woolly-64.svg) 41 32, help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-006.html b/testing/web-platform/tests/css/css-ui/cursor-image-006.html new file mode 100644 index 0000000000..c123a65f2a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image animated may"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that an ANI image, with it's own hotspot, is supported as a custom cursor."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/BlueButterfly.ani), help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like an animated butterfly AND is not a butterfly when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> + <p class="attribution">Cursor by Vlasta, used here under a CC-BY license.</p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-007.html b/testing/web-platform/tests/css/css-ui/cursor-image-007.html new file mode 100644 index 0000000000..6433142e3c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-007.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image svg"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a compressed, fixed size SVG image is supported as a custom cursor."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/woolly-64.svgz) 41 32, help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-008.html b/testing/web-platform/tests/css/css-ui/cursor-image-008.html new file mode 100644 index 0000000000..e5bb5c97bd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-008.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value fallback</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that non-existent images cause the fallback to be used."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/does-not-exist.png) 41 32, help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, a help cursor is displayed AND + there is no help cursor when outside.</p> + <p>If inside the rectangle the cursor does not change, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-009.html b/testing/web-platform/tests/css/css-ui/cursor-image-009.html new file mode 100644 index 0000000000..2336bd0744 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-009.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value, no fallback</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image invalid"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a fallback cursor is required."> +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/fail.cur); + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the the colored rectangle, the + cursor does not change.</p> + <p>If inside the rectangle the cursor changes to the word "FAIL" on a red + background, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-010.html b/testing/web-platform/tests/css/css-ui/cursor-image-010.html new file mode 100644 index 0000000000..3627db1809 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-010.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a GIF image is supported as a custom cursor."> + +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/basn0g08.gif), help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like gray stripes AND is not gray stripes when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-011.html b/testing/web-platform/tests/css/css-ui/cursor-image-011.html new file mode 100644 index 0000000000..85defa6758 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-011.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a GIF image with transparency is supported as a custom cursor."> + +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/tp1n3p08.gif), help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a gray cube AND is not a gray cube when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <p>White haloing around the cursor is acceptable in this test.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-012.html b/testing/web-platform/tests/css/css-ui/cursor-image-012.html new file mode 100644 index 0000000000..122b62cf86 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-012.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, url value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="reviewer" title="Florian Rivoal" href="http://florian.rivoal.net/"> <!-- 2015-04-12 --> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a JPEG/JFIF image is supported as a custom cursor."> + +<style> + div.test{background: #D2B48C; border: 2px solid #555; + cursor:url(support/cursors/rainbow.jpg), help; + width: 128px; height: 128px} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a rainbow AND is not a rainbow when outside.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-013.html b/testing/web-platform/tests/css/css-ui/cursor-image-013.html new file mode 100644 index 0000000000..361b3e2e10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-013.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, gradient image value</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image may"> +<meta charset="UTF-8"> +<meta name="assert" content="For cursors, UAs may support gradients, which are part of <image> value type"> + +<style> +div.test{ + background: #D2B48C; border: 2px solid #555; + cursor: linear-gradient(blue, green), help; + width: 128px; height: 128px; +} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a blue to green gradient.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-014.html b/testing/web-platform/tests/css/css-ui/cursor-image-014.html new file mode 100644 index 0000000000..58b5311f60 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-014.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, image() value</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image may"> +<meta charset="UTF-8"> +<meta name="assert" content="For cursors, UAs may support the image() function, which are part of <image> value type."> + +<style> +div.test{ + background: #D2B48C; border: 2px solid #555; + cursor: image(green), help; + width: 128px; height: 128px; +} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a solid patch of green.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-015.html b/testing/web-platform/tests/css/css-ui/cursor-image-015.html new file mode 100644 index 0000000000..108bb2a137 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-015.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, image-set() value</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="For cursors, UAs must support image-set() containing simple url() based images"> + +<style> +div.test{ + background: #D2B48C; border: 2px solid #555; + cursor: image-set( "support/cursors/woolly-64.ico" 1x), image-set( "support/cursors/woolly-64.png" 1x), help; + width: 128px; height: 128px; +} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a sheep.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-016.html b/testing/web-platform/tests/css/css-ui/cursor-image-016.html new file mode 100644 index 0000000000..a4ab6630f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-016.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, cross-fade image value</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image may"> +<meta charset="UTF-8"> +<meta name="assert" content="For cursors, UAs may support cross-fade(), which is part of <image> value type"> + +<style> +div.test{ + background: #D2B48C; border: 2px solid #555; + cursor: cross-fade( url("support/cursors/woolly-64.ico"), green), cross-fade( url("support/cursors/woolly-64.png"), green), help; + width: 128px; height: 128px; +} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a green sheep.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-017.html b/testing/web-platform/tests/css/css-ui/cursor-image-017.html new file mode 100644 index 0000000000..f60aec02d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-017.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, fallback images</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="If the user agent cannot handle the first cursor of a list of cursors, it must attempt to handle the second, etc."> + +<style> +div.test{ + background: #D2B48C; border: 2px solid #555; + cursor: url("support/cursors/not-an-image.foo"), url("support/cursors/woolly-64.png"), url("support/cursors/woolly-64.ico"), help; + width: 128px; height: 128px; +} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a sheep.</p> + <p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-018.html b/testing/web-platform/tests/css/css-ui/cursor-image-018.html new file mode 100644 index 0000000000..31caf408e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-018.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, fallback keyword</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="If the user agent cannot handle any user-defined cursor, it must use the cursor keyword at the end of the list."> + +<style> +div.test{ + background: #D2B48C; border: 2px solid #555; + cursor: url("support/cursors/not-an-image.foo"), crosshair; + width: 128px; height: 128px; +} +</style> +<body> + <p>The test passes if, when moved inside the colored rectangle, the cursor looks like + a crosshair (i.e. short line segments resembling a "+" sign).</p> + <p>If inside the rectangle the cursor does not change, the test fails.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-001.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-001.html new file mode 100644 index 0000000000..0a99ad2c3b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact image"> +<meta charset="UTF-8"> +<meta name="assert" content="Test checks that a monochrome (type 0) PNG image, 1 bit/pixel, is supported as a CSS custom cursor."> +<style> + div.test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn0g01.png), help; width: 128px; height: 64px} + div.test:before {content: url(support/PTS/basn0g01.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <div class="test"> </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-002.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-002.html new file mode 100644 index 0000000000..bb48743f9c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn0g02.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn0g02.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local monochrome (type 0) PNG image, 2 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-003.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-003.html new file mode 100644 index 0000000000..fbe96fc063 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn0g04.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn0g04.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local monochrome (type 0) PNG image, 4 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-004.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-004.html new file mode 100644 index 0000000000..ea790d1a4d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-004.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn0g08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn0g08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local monochrome (type 0) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-005.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-005.html new file mode 100644 index 0000000000..26842871c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-005.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn0g16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn0g16.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local monochrome (type 0) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-006.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-006.html new file mode 100644 index 0000000000..bc6453d6c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-006.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an RGB PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn2c08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn2c08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local RGB (type 2) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-007.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-007.html new file mode 100644 index 0000000000..93d0ba6233 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-007.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an RGB PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn2c16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn2c16.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local RGB (type 2) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-008.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-008.html new file mode 100644 index 0000000000..d9c2962818 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-008.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn3p01.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn3p01.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local indexed (type 3) PNG image, 1 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-009.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-009.html new file mode 100644 index 0000000000..b942a7a4b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-009.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn3p02.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn3p02.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local indexed (type 3) PNG image, 2 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-010.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-010.html new file mode 100644 index 0000000000..3a65c1d5f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-010.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn3p04.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn3p04.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local indexed (type 3) PNG image, 4 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-011.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-011.html new file mode 100644 index 0000000000..9ad4b0101a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-011.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn3p08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn3p08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local indexed (type 3) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-012.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-012.html new file mode 100644 index 0000000000..437928699f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-012.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a greyscale with alpha PNG image cursor is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/basn4a08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn4a08.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + <!-- changed background colour so grey semitransparent image can be seen --> + <p class="test"> </p> + <p>Local greyscale with alpha (type 4) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-013.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-013.html new file mode 100644 index 0000000000..75651f133e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-013.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a greyscale with alpha PNG image cursor is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/basn4a16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn4a16.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + <!-- changed background colour so grey semitransparent image can be seen --> + <p class="test"> </p> + <p>Local greyscale with alpha (type 4) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-014.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-014.html new file mode 100644 index 0000000000..00c1dc7edc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-014.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an RGB with alpha PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn6a08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn6a08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>Local RGB with alpha (type 6) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-015.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-015.html new file mode 100644 index 0000000000..6109234178 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-015.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an RGB with alpha PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basn6a16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basn6a16.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>Local RGB with alpha (type 6) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-016.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-016.html new file mode 100644 index 0000000000..3d7ad76b25 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-016.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi0g01.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi0g01.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced monochrome (type 0) PNG image, 1 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-017.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-017.html new file mode 100644 index 0000000000..03b6d6f414 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-017.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi0g02.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi0g02.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced monochrome (type 0) PNG image, 2 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-018.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-018.html new file mode 100644 index 0000000000..b7190aadfa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-018.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi0g04.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi0g04.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced monochrome (type 0) PNG image, 4 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-019.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-019.html new file mode 100644 index 0000000000..86a33f7e1d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-019.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi0g08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi0g08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced monochrome (type 0) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-020.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-020.html new file mode 100644 index 0000000000..3c51ed96e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-020.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced black and white PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi0g16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi0g16.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced monochrome (type 0) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-021.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-021.html new file mode 100644 index 0000000000..ea66fd7da3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-021.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced RGB PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi2c08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi2c08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced RGB (type 2) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-022.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-022.html new file mode 100644 index 0000000000..b4767ac2cb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-022.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced RGB PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi2c16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi2c16.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced RGB (type 2) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-023.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-023.html new file mode 100644 index 0000000000..397244e45e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-023.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced, indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi3p01.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi3p01.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced, indexed (type 3) PNG image, 1 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-024.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-024.html new file mode 100644 index 0000000000..986cd8c455 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-024.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced, indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi3p02.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi3p02.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced, indexed (type 3) PNG image, 2 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-025.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-025.html new file mode 100644 index 0000000000..b584da62e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-025.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced, indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi3p04.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi3p04.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced, indexed (type 3) PNG image, 4 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-026.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-026.html new file mode 100644 index 0000000000..e9b68de4d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-026.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced, indexed PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi3p08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi3p08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + <p class="test"> </p> + <p>Local interlaced, indexed (type 3) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-027.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-027.html new file mode 100644 index 0000000000..febbad5316 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-027.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced greyscale with alpha PNG image cursor is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/basi4a08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi4a08.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + <!-- changed background colour so grey semitransparent image can be seen --> + <p class="test"> </p> + <p>Local interlaced greyscale with alpha (type 4) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-028.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-028.html new file mode 100644 index 0000000000..e572419dd3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-028.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced greyscale with alpha PNG image cursor is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/basi4a16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi4a16.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + <!-- changed background colour so grey semitransparent image can be seen --> + <p class="test"> </p> + <p>Local interlaced greyscale with alpha (type 4) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-029.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-029.html new file mode 100644 index 0000000000..9da6d4a537 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-029.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced RGB with alpha PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi6a08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi6a08.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>Local interlaced RGB with alpha (type 6) PNG image, 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-030.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-030.html new file mode 100644 index 0000000000..b35871390d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-030.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an interlaced RGB with alpha PNG image cursor is supported."> +<style> + .test{background: #AAA; border: 2px solid #555; + cursor:url(support/PTS/basi6a16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/basi6a16.png) +</style> +<body> + <p>The test passes if, when moved inside the grey rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>Local interlaced RGB with alpha (type 6) PNG image, 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-031.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-031.html new file mode 100644 index 0000000000..3a95eaa87e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-031.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a greyscale PNG image cursor with transparency is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/tbbn0g04.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/tbbn0g04.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>Greyscale PNG image, with transparency (tRNS), 4 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-032.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-032.html new file mode 100644 index 0000000000..8ae0f52d69 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-032.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a greyscale PNG image cursor with transparency is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/tbwn0g16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/tbwn0g16.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>Greyscale PNG image, with transparency (tRNS), 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-033.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-033.html new file mode 100644 index 0000000000..9331a90d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-033.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an RGB PNG image cursor with transparency is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/tbrn2c08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/tbrn2c08.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>RGB PNG image, with transparency (tRNS), 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-034.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-034.html new file mode 100644 index 0000000000..9331a90d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-034.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an RGB PNG image cursor with transparency is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/tbrn2c08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/tbrn2c08.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>RGB PNG image, with transparency (tRNS), 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-035.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-035.html new file mode 100644 index 0000000000..1bcffe82b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-035.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an RGB PNG image cursor with transparency is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/tbbn2c16.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/tbbn2c16.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>RGB PNG image, with transparency (tRNS), 16 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-036.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-036.html new file mode 100644 index 0000000000..4dabbe3c33 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-036.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an indexed PNG image cursor with transparency is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/tbgn3p08.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/tbgn3p08.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>indexed PNG image, with transparency (tRNS), 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-037.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-037.html new file mode 100644 index 0000000000..dd74499201 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-037.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an indexed PNG image cursor with transparency is supported."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/tm3n3p02.png), help; width :128px; height: 64px} + .test:before {content: url(support/PTS/tm3n3p02.png) +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, the cursor looks like the reference image.</p> + + <p class="test"> </p> + <p>indexed PNG image, with multiple levels of transparency (tRNS), 8 bit/pixel. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-038.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-038.html new file mode 100644 index 0000000000..6c7ac7fd07 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-038.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that gamma correction on PNG image cursor is correct."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/g04n0g16.png), help; width :128px; height: 224px; font-size: 32px; line-height:32px} + +</style> +<body> + <p>The test passes if all the reference images look the same, AND when moved inside the peach rectangle, the cursor looks like the reference images (ignoring the small numeric values in each image).</p> + + <p class="test"> + <img src="support/PTS/g03n0g16.png"><br /> + <img src="support/PTS/g04n0g16.png"><br /> + <img src="support/PTS/g05n0g16.png"><br /> + <img src="support/PTS/g07n0g16.png"><br /> + <img src="support/PTS/g10n0g16.png"><br /> + <img src="support/PTS/g25n0g16.png"><br /> </p> + <p>Greyscale PNG images with various gamma values, 16 bit/pixel. Pixel values adjusted so that, when gamma corrected, the images look the same. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-039.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-039.html new file mode 100644 index 0000000000..fd52b6b013 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-039.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that gamma correction on PNG image cursor is correct."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/g04n2c08.png), help; width :128px; height: 224px; font-size: 32px; line-height:32px} + +</style> +<body> + <p>The test passes if all the reference images look the same, AND when moved inside the peach rectangle, the cursor looks like the reference images (ignoring the small numeric values in each image).</p> + + <p class="test"> + <img src="support/PTS/g03n2c08.png"><br /> + <img src="support/PTS/g04n2c08.png"><br /> + <img src="support/PTS/g05n2c08.png"><br /> + <img src="support/PTS/g07n2c08.png"><br /> + <img src="support/PTS/g10n2c08.png"><br /> + <img src="support/PTS/g25n2c08.png"><br /> </p> + <p>RGB PNG images with various gamma values, 8 bit/pixel. Pixel values adjusted so that, when gamma corrected, the images look the same. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-040.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-040.html new file mode 100644 index 0000000000..49473b3105 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-040.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that gamma correction on PNG image cursor is correct."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/g04n3p04.png), help; width :128px; height: 224px; font-size: 32px; line-height:32px} + +</style> +<body> + <p>The test passes if all the reference images look the same, AND when moved inside the peach rectangle, the cursor looks like the reference images (ignoring the small numeric values in each image).</p> + + <p class="test"> + <img src="support/PTS/g03n3p04.png"><br /> + <img src="support/PTS/g04n3p04.png"><br /> + <img src="support/PTS/g05n3p04.png"><br /> + <img src="support/PTS/g07n3p04.png"><br /> + <img src="support/PTS/g10n3p04.png"><br /> + <img src="support/PTS/g25n3p04.png"><br /> </p> + <p>Indexed PNG images with various gamma values, 4 bit/pixel. Pixel values adjusted so that, when gamma corrected, the images look the same. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-041.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-041.html new file mode 100644 index 0000000000..d817844d06 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-041.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks invalid PNG image cursor skipped, fallback used."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/xs2n0g01.png), help; width :128px; height: 64px} +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, a help cursor is shown.</p> + + <p class="test"> </p> + <p>Invalid PNG image, signature bytes incorrect. Help cursor fallback. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-042.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-042.html new file mode 100644 index 0000000000..e88ed4e23c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-042.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks invalid PNG image cursor skipped, fallback used."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/xhdn0g08.png), help; width :128px; height: 64px} +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, a help cursor is shown.</p> + + <p class="test"> </p> + <p>Invalid PNG image, incorrect header checksum. Help cursor fallback. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-image-png-043.html b/testing/web-platform/tests/css/css-ui/cursor-image-png-043.html new file mode 100644 index 0000000000..0ab16a1fc6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-image-png-043.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Cursor property, PNG</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks invalid PNG image cursor skipped, fallback used."> +<style> + .test{background: #ffe5b4; border: 2px solid #555; + cursor:url(support/PTS/xdtn0g01.png), help; width :128px; height: 64px} +</style> +<body> + <p>The test passes if, when moved inside the peach rectangle, a help cursor is shown.</p> + + <p class="test"> </p> + <p>Invalid PNG image, missing IDAT chunk. Help cursor fallback. +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-outline-area.html b/testing/web-platform/tests/css/css-ui/cursor-outline-area.html new file mode 100644 index 0000000000..d53ecdc401 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-outline-area.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on outline</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor" title="6.1.1. cursor property"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is not applied over outline."> +<style> +div { + margin-top: 66px; + margin-left: 50px; + outline: blue solid 50px; + cursor: url("support/cursors/fail.png"), url("support/cursors/fail.cur"), help; + width: 0px; +} +</style> +<body> + <p>The test passes if, when moved inside the blue square, the cursor is the platform-dependent default cursor. Often rendered as an arrow.</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-padding-area.html b/testing/web-platform/tests/css/css-ui/cursor-padding-area.html new file mode 100644 index 0000000000..aaa993024c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-padding-area.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor on the padding area</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact"> +<meta charset="UTF-8"> +<meta name="assert" content="The cursor property is applied over the padding area, as it is strictly inside the border edge."> +<style> +div { + background: blue; + padding: 50px; + cursor: crosshair; +} +</style> +<body> + <p>The test passes if, when moved inside the blue rectangle, the cursor looks like a crosshair (e.g. short line segments resembling a "+" sign).</p> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-pointer-links-001-manual.html b/testing/web-platform/tests/css/css-ui/cursor-pointer-links-001-manual.html new file mode 100644 index 0000000000..4d4be0d303 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-pointer-links-001-manual.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: pointer cursor on svg links</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="The pointer cursor is applied to SVG links"> +<style> +</style> +<body> + <p>The test passes if, when moved over the blue text, the cursor indicates a link. Often rendered as the backside of a hand with the index finger poiting and the other fingers closed.</p> + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <a xlink:href=""><text x="0" y="16" font-size="16" fill="blue">Hover me</text></a> + </svg> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-pointer-links-002-manual.html b/testing/web-platform/tests/css/css-ui/cursor-pointer-links-002-manual.html new file mode 100644 index 0000000000..fc9c2a3d63 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-pointer-links-002-manual.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: pointer cursor on svg links</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="The pointer cursor is applied to HTML links"> +<style> +</style> +<body> + <p>The test passes if, when moved over the blue text, the cursor indicates a link. Often rendered as the backside of a hand with the index finger poiting and the other fingers closed.</p> + <a href="" style="color: blue">Hover me</a> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-pointer-links-003-manual.html b/testing/web-platform/tests/css/css-ui/cursor-pointer-links-003-manual.html new file mode 100644 index 0000000000..ceaa174847 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-pointer-links-003-manual.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: pointer cursor on svg links</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#cursor"> +<meta name="flags" content="interact"> +<meta name="assert" content="The pointer cursor is applied to HTML image maps"> +<style> +</style> +<body> + <p>The test passes if, when moved over the blue box, the cursor indicates a link. Often rendered as the backside of a hand with the index finger poiting and the other fingers closed.</p> + <map name="m1"><area coords="0,0,100,100" href=""></map> + <img usemap="#m1" src="../support/swatch-blue.png" alt="blue square" width=100 height=100> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-text-001.html b/testing/web-platform/tests/css/css-ui/cursor-text-001.html new file mode 100644 index 0000000000..d894c65b9d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-text-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:text with vertical text</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#writing-mode"> +<meta name="flags" content="interact may"> +<meta charset="UTF-8"> +<meta name="assert" content="User agents may automatically display a horizontal I-beam/cursor (e.g. same as the vertical-text keyword) for vertical text."> +<style> +div { + cursor: text; + color: blue; + writing-mode: vertical-rl; +} +p { + cursor: text; +} +</style> +<body> + <p>The test passes if, when moved over the blue vertical text, the cursor indicates vertical-text that may be selected, + and looks different from the cursor used to indicate that horizontal text may be selected, + such as when placed over this sentence. + Often rendered as a horizontal I-beam.</p> + <p>Disregard this test if there is no vertical text.</p> + <div>Lorem ipsum</div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-text-002.html b/testing/web-platform/tests/css/css-ui/cursor-text-002.html new file mode 100644 index 0000000000..3aec77f4d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-text-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: cursor:text with rotated text</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<link rel="help" href="http://www.w3.org/TR/css3-transforms/#two-d-transform-functions"> +<meta name="flags" content="interact may"> +<meta charset="UTF-8"> +<meta name="assert" content="User agents may automatically display any angle of I-beam/cursor for text that is rendered at any particular angle"> +<style> +div { + cursor: text; + color: blue; + transform: rotate(45deg); + transform-origin: bottom left; +} +p { + cursor: text; +} +</style> +<body> + <p>The test passes if, when moved over the blue rotated text, the cursor that indicates text that may be selected is rotated to match the angle of the text.</p> + <p>Disregard this test if there is no rotated text.</p> + <div>Lorem ipsum</div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/cursor-x-y-001.html b/testing/web-platform/tests/css/css-ui/cursor-x-y-001.html new file mode 100644 index 0000000000..16b147cc2d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-x-y-001.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html onclick="fail()"> +<title>CSS Basic User Interface Test: cursor hotspot coordinates</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact dom"> +<meta charset="UTF-8"> +<meta name="assert" content="The coordnates of the cursor hotspot can be specified."> +<style> +body, html { + cursor: url("support/cursors/arrows.png") 31 31, url("support/cursors/arrows.ico") 31 31, help; +} +div { + margin: 30px; + width: 15px; + height: 15px; + background: green; +} +#fail, #pass { display: none } +</style> + +<p>If you are on a device without a cursor, skip this test. +<p>Otherwise, if the cursor does not look like a red and a green arrow, the test has failed. +<p>Place the cursor so that the tip of the <strong>green arrow</strong> is on the <strong>green box</strong>, then click. +<p>If nothing happens when you click, the test has failed. +<div onclick="pass(event)"></div> +<p id=fail>The test has failed. +<p id=pass>The test passes. + +<script> +function pass(e) { + document.getElementById("pass").style.display="block"; + e.stopPropagation(); +} +function fail() { + document.getElementById("fail").style.display="block"; +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/cursor-x-y-002.html b/testing/web-platform/tests/css/css-ui/cursor-x-y-002.html new file mode 100644 index 0000000000..6aae01eaed --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-x-y-002.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html onclick="fail()"> +<title>CSS Basic User Interface Test: cursor hotspot coordinates clamping</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact dom"> +<meta charset="UTF-8"> +<meta name="assert" content="The coordinates of the hotspot must be clamped if they fall outside of the range of the image."> +<style> +body, html { + cursor: url("support/cursors/arrows.png") 100 100, url("support/cursors/arrows.ico") 100 100, help; +} +div { + margin: 30px; + width: 15px; + height: 15px; + background: green; +} +#fail, #pass { display: none; } +</style> + +<p>If you are on a device without a cursor, skip this test. +<p>Otherwise, if the cursor does not look like a red and a green arrow, the test has failed. +<p>Place the cursor so that the tip of the <strong>green arrow</strong> is on the <strong>green box</strong>, then click. +<p>If nothing happens when you click, the test has failed. +<div onclick="pass(event)"></div> +<p id=fail>The test has failed. +<p id=pass>The test passes. + +<script> +function pass(e) { + document.getElementById("pass").style.display="block"; + e.stopPropagation(); +} +function fail() { + document.getElementById("fail").style.display="block"; +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/cursor-x-y-003.html b/testing/web-platform/tests/css/css-ui/cursor-x-y-003.html new file mode 100644 index 0000000000..cb3b7ae9df --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/cursor-x-y-003.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html onclick="fail()"> +<title>CSS Basic User Interface Test: cursor hotspot coordinates clamping</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#cursor"> +<meta name="flags" content="interact dom"> +<meta charset="UTF-8"> +<meta name="assert" content="The coordinates of the hotspot must be clamped if they fall outside of the range of the image, including negative numbers."> +<style> +body, html { + cursor: url("support/cursors/arrows.png") -100 -100, url("support/cursors/arrows.ico") -100 -100, help; +} +div { + margin: 30px; + width: 15px; + height: 15px; + background: green; +} +#fail, #pass { display: none; } +</style> + +<p>If you are on a device without a cursor, skip this test. +<p>Otherwise, if the cursor does not look like a red and a green arrow, the test has failed. +<p>Place the cursor so that the tip of the <strong>red arrow</strong> is on the <strong>green box</strong>, then click. +<p>If nothing happens when you click, the test has failed. +<div onclick="pass(event)"></div> +<p id=fail>The test has failed. +<p id=pass>The test passes. + +<script> +function pass(e) { + document.getElementById("pass").style.display="block"; + e.stopPropagation(); +} +function fail() { + document.getElementById("fail").style.display="block"; +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-01.html b/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-01.html new file mode 100644 index 0000000000..595df9440e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-01.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>-moz-user-modify should be unsupported in author origin</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#modified { + -moz-user-modify: read-write; +} +</style> +<div id="inherited"></div> +<div id="modified"></div> +<script> + test(function() { + for (const el of [inherited, modified]) { + assert_equals(el.style.MozUserModify, undefined); + assert_equals(el.style.mozUserModify, undefined); + assert_equals(getComputedStyle(el).getPropertyValue('-moz-user-modify'), ''); + } + }, '-moz-user-modify is not supported'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-02.html b/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-02.html new file mode 100644 index 0000000000..e284d0c475 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-02.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>-moz-user-modify should be unsupported in contenteditable</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="contentEditableTrue" contenteditable="true"></div> +<div id="contentEditablePlainText" contenteditable="plaintext-only"></div> +<script> + test(function() { + const contentEditableTrue = document.getElementById('contentEditableTrue'); + assert_equals(getComputedStyle(contentEditableTrue).getPropertyValue('-moz-user-modify'), ''); + }, 'contenteditable="true" doesn\'t use unsupported -moz-user-modify property'); + + test(function() { + const contentEditablePlainText = document.getElementById('contentEditablePlainText'); + assert_equals(getComputedStyle(contentEditablePlainText).getPropertyValue('-moz-user-modify'), ''); + }, 'contenteditable="plaintext-only" doesn\'t use unsupported -moz-user-modify property'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-03.html b/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-03.html new file mode 100644 index 0000000000..e827b404e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/moz-user-modify-03.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>-moz-user-modify should be unsupported in CSS.supports</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@supports (-moz-user-modify: read-only) { + #content { + width: 10px; + height: 10px; + background-color: red; + } +} +</style> +<div id="content"></div> +<script> + test(function() { + const content = document.getElementById('content'); + assert_not_equals(getComputedStyle(content).getPropertyValue('background-color'), 'rgb(255, 0, 0)'); + }, '@supports doesn\'t use unsupported -moz-user-modify property'); + + test(function() { + const supportsMozUserModifyProperty = CSS.supports(`(-moz-user-modify: read-only) or + (-moz-user-modify: read-write) or + (-moz-user-modify: write-only)`); + assert_equals(supportsMozUserModifyProperty, false); + }, 'CSS.supports doesn\'t use unsupported -moz-user-modify property'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/user-modify-01.html b/testing/web-platform/tests/css/css-ui/historical/user-modify-01.html new file mode 100644 index 0000000000..dee93a618f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/user-modify-01.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>user-modify should be unsupported in author origin</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#modified { + user-modify: read-write; +} +</style> +<div id="inherited"></div> +<div id="modified"></div> +<script> + test(function() { + for (const el of [inherited, modified]) { + assert_equals(el.style.userModify, undefined); + assert_equals(el.style.UserModify, undefined); + assert_equals(getComputedStyle(el).getPropertyValue('user-modify'), ''); + } + }, 'user-modify is not supported'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/user-modify-02.html b/testing/web-platform/tests/css/css-ui/historical/user-modify-02.html new file mode 100644 index 0000000000..2a96871d90 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/user-modify-02.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>user-modify should be unsupported in contenteditable</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="contentEditableTrue" contenteditable="true"></div> +<div id="contentEditablePlainText" contenteditable="plaintext-only"></div> +<script> + test(function() { + const contentEditableTrue = document.getElementById('contentEditableTrue'); + assert_equals(getComputedStyle(contentEditableTrue).getPropertyValue('user-modify'), ''); + }, 'contenteditable="true" doesn\'t use unsupported user-modify property'); + + test(function() { + const contentEditablePlainText = document.getElementById('contentEditablePlainText'); + assert_equals(getComputedStyle(contentEditablePlainText).getPropertyValue('user-modify'), ''); + }, 'contenteditable="plaintext-only" doesn\'t use unsupported user-modify property'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/user-modify-03.html b/testing/web-platform/tests/css/css-ui/historical/user-modify-03.html new file mode 100644 index 0000000000..8d47e5259f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/user-modify-03.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>user-modify should be unsupported in CSS.supports</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@supports (user-modify: read-only) { + #content { + width: 10px; + height: 10px; + background-color: red; + } +} +</style> +<div id="content"></div> +<script> + test(function() { + const content = document.getElementById('content'); + assert_not_equals(getComputedStyle(content).getPropertyValue('background-color'), 'rgb(255, 0, 0)'); + }, '@supports doesn\'t use unsupported user-modify property'); + + test(function() { + const supportsUserModifyProperty = CSS.supports(`(user-modify: read-only) or + (user-modify: read-write) or + (user-modify: write-only)`); + assert_equals(supportsUserModifyProperty, false); + }, 'CSS.supports doesn\'t use unsupported user-modify property'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-01.html b/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-01.html new file mode 100644 index 0000000000..f756274d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-01.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>-webkit-user-modify should be unsupported in author origin</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#modified { + -webkit-user-modify: read-write-plaintext-only; +} +</style> +<div id="inherited"></div> +<div id="modified"></div> +<script> + test(function() { + for (const el of [inherited, modified]) { + assert_equals(el.style.WebkitUserModify, undefined); + assert_equals(el.style.webkitUserModify, undefined); + assert_equals(getComputedStyle(el).getPropertyValue('-webkit-user-modify'), ''); + } + }, '-webkit-user-modify is not supported'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-02.html b/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-02.html new file mode 100644 index 0000000000..9db2567467 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-02.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>-webkit-user-modify should be unsupported in contenteditable</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="contentEditableTrue" contenteditable="true"></div> +<div id="contentEditablePlainText" contenteditable="plaintext-only"></div> +<script> + test(function() { + const contentEditableTrue = document.getElementById('contentEditableTrue'); + assert_equals(getComputedStyle(contentEditableTrue).getPropertyValue('-webkit-user-modify'), ''); + }, 'contenteditable="true" doesn\'t use unsupported -webkit-user-modify property'); + + test(function() { + const contentEditablePlainText = document.getElementById('contentEditablePlainText'); + assert_equals(getComputedStyle(contentEditablePlainText).getPropertyValue('-webkit-user-modify'), ''); + }, 'contenteditable="plaintext-only" doesn\'t use unsupported -webkit-user-modify property'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-03.html b/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-03.html new file mode 100644 index 0000000000..e82ceffc37 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/historical/webkit-user-modify-03.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>-webkit-user-modify should be unsupported in CSS.supports</title> +<link rel="help" href="https://developer.mozilla.org/en-US/docs/Web/CSS/user-modify"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@supports (-webkit-user-modify: read-only) { + #content { + width: 10px; + height: 10px; + background-color: red; + } +} +</style> +<div id="content"></div> +<script> + test(function() { + const content = document.getElementById('content'); + assert_not_equals(getComputedStyle(content).getPropertyValue('background-color'), 'rgb(255, 0, 0)'); + }, '@supports doesn\'t use unsupported -webkit-user-modify property'); + + test(function() { + const supportsWebkitUserModifyProperty = CSS.supports(`(-webkit-user-modify: read-only) or + (-webkit-user-modify: read-write) or + (-webkit-user-modify: read-write-plaintext-only) or + (-webkit-user-modify: write-only)`); + assert_equals(supportsWebkitUserModifyProperty, false); + }, 'CSS.supports doesn\'t use unsupported -webkit-user-modify property'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/inheritance.html b/testing/web-platform/tests/css/css-ui/inheritance.html new file mode 100644 index 0000000000..c2aab07a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/inheritance.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Basic User Interface properties</title> +<link rel="help" href="https://drafts.csswg.org/css-ui/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="reference"></div> +<div id="container"> + <div id="target"></div> +</div> +<style> +#reference { + border-style: dotted; /* Avoid border-top-width computed style 0 */ + border-top-width: medium; + color: lime; + background: blue; +} + +#container, #target { + outline-style: dotted; /* Avoid outline-width computed style 0 */ + color: lime; + background: blue; +} +</style> +<script> +const mediumWidth = getComputedStyle(reference).borderTopWidth; // e.g. 3px +const currentColor = getComputedStyle(reference).color; + +assert_not_inherited('appearance', 'none', 'auto'); +assert_inherited('caret-color', currentColor, 'rgba(42, 53, 64, 0.75)'); +assert_inherited('caret-shape', 'auto', 'bar'); +assert_inherited('cursor', 'auto', 'pointer'); +assert_not_inherited('nav-down', 'auto', '#foo'); +assert_not_inherited('nav-left', 'auto', '#foo'); +assert_not_inherited('nav-right', 'auto', '#foo'); +assert_not_inherited('nav-up', 'auto', '#foo'); +if (CSS.supports('outline-color', 'invert')) + assert_not_inherited('outline-color', 'invert', 'rgba(42, 53, 64, 0.75)'); +else + assert_not_inherited('outline-color', currentColor, 'rgba(42, 53, 64, 0.75)'); +assert_not_inherited('outline-offset', '0px', '10px'); +assert_not_inherited('outline-style', 'none', 'auto'); +assert_not_inherited('outline-width', mediumWidth, '10px'); +assert_not_inherited('resize', 'none', 'vertical'); +assert_not_inherited('user-select', 'auto', 'none'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/input-security-auto-sensitive-text-input-ref.html b/testing/web-platform/tests/css/css-ui/input-security-auto-sensitive-text-input-ref.html new file mode 100644 index 0000000000..7eb15e32c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-auto-sensitive-text-input-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<title>Test that input-security: auto obscures text in sensitive text inputs</title> +<style> + input { input-security: auto; } +</style> +<input type="password" value="abcdefg"> diff --git a/testing/web-platform/tests/css/css-ui/input-security-auto-sensitive-text-input.html b/testing/web-platform/tests/css/css-ui/input-security-auto-sensitive-text-input.html new file mode 100644 index 0000000000..3031094055 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-auto-sensitive-text-input.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Test that input-security: auto obscures text in sensitive text inputs</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#input-security"> +<link rel="author" title="Apple Inc"> +<link rel="match" href="input-security-auto-sensitive-text-input-ref.html"> +<style> + input { input-security: auto; } +</style> +<input type="password" value="hunter2"> diff --git a/testing/web-platform/tests/css/css-ui/input-security-computed.html b/testing/web-platform/tests/css/css-ui/input-security-computed.html new file mode 100644 index 0000000000..60a58f9418 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Test computed values for input-security</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#input-security"> +<link rel="author" title="Apple Inc"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #outer { input-security: none; } +</style> +<div id="outer"> + <div id="target"></div> +</div> +<div id="noInputSecurity"></div> +<script> +test_computed_value('input-security', 'initial', 'auto'); +test_computed_value('input-security', 'inherit', 'none'); +test_computed_value('input-security', 'auto', 'auto'); +test_computed_value('input-security', 'none', 'none'); + +// When input-security isn't specified, it should return 'auto' +assert_equals(getComputedStyle(noInputSecurity).inputSecurity, 'auto'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/input-security-non-sensitive-elements-ref.html b/testing/web-platform/tests/css/css-ui/input-security-non-sensitive-elements-ref.html new file mode 100644 index 0000000000..307257de10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-non-sensitive-elements-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Test that input-security: auto does not obscure text in elements that do not accept sensitive text input</title> +<style> + * { input-security: none; } +</style> +<input type="email" value="webkit@webkit.org"> +<input type="number" value="2021"> +<input type="search" value="test"> +<input type="tel" value="555-5555"> +<input type="text" value="test"> +<input type="url" value="webkit.org"> +<div>Test</div> diff --git a/testing/web-platform/tests/css/css-ui/input-security-non-sensitive-elements.html b/testing/web-platform/tests/css/css-ui/input-security-non-sensitive-elements.html new file mode 100644 index 0000000000..a3e1499bb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-non-sensitive-elements.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Test that input-security: auto does not obscure text in elements that do not accept sensitive text input</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#input-security"> +<link rel="author" title="Apple Inc"> +<link rel="match" href="input-security-non-sensitive-elements-ref.html"> +<style> + * { input-security: auto; } +</style> +<input type="email" value="webkit@webkit.org"> +<input type="number" value="2021"> +<input type="search" value="test"> +<input type="tel" value="555-5555"> +<input type="text" value="test"> +<input type="url" value="webkit.org"> +<div>Test</div> diff --git a/testing/web-platform/tests/css/css-ui/input-security-none-sensitive-text-input-ref.html b/testing/web-platform/tests/css/css-ui/input-security-none-sensitive-text-input-ref.html new file mode 100644 index 0000000000..d02c20cb3e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-none-sensitive-text-input-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<title>Test that input-security: none does not obscure text in sensitive text inputs</title> +<input type="text" value="hunter2"> diff --git a/testing/web-platform/tests/css/css-ui/input-security-none-sensitive-text-input.html b/testing/web-platform/tests/css/css-ui/input-security-none-sensitive-text-input.html new file mode 100644 index 0000000000..46af8fdc98 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-none-sensitive-text-input.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<title>Test that input-security: none does not obscure text in sensitive text inputs</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#input-security"> +<link rel="author" title="Apple Inc"> +<link rel="match" href="input-security-none-sensitive-text-input-ref.html"> +<style> + input { input-security: none; } +</style> +<input type="password" value="hunter2"> diff --git a/testing/web-platform/tests/css/css-ui/input-security-parsing.html b/testing/web-platform/tests/css/css-ui/input-security-parsing.html new file mode 100644 index 0000000000..4de9619f82 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/input-security-parsing.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>Test parsing for input-security</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#input-security"> +<link rel="author" title="Apple Inc"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<div id="target"></div> +<script> +test_valid_value('input-security', 'initial'); +test_valid_value('input-security', 'inherit'); +test_valid_value('input-security', 'unset'); +test_valid_value('input-security', 'revert'); +test_valid_value('input-security', 'auto'); +test_valid_value('input-security', 'none'); + +test_invalid_value('input-security', 'auto auto'); +test_invalid_value('input-security', 'disc'); +test_invalid_value('input-security', 'circle'); +test_invalid_value('input-security', 'square'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-001.html b/testing/web-platform/tests/css/css-ui/nav-dir-001.html new file mode 100644 index 0000000000..98250a1d5c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - property inheritance</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-left' property value is not inherited."> +<style> + #parent { + nav-left: #finish; + } + #intermediate { + nav-left: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <div id="parent"><a href="">ignore</a> <a href="" id="intermediate">ignore</a> <a href="">START</a> <a href="" id="finish">ignore</a></div> + + <div><a href="">ignore</a> <a href="" id="end">FINISH</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-002.html b/testing/web-platform/tests/css/css-ui/nav-dir-002.html new file mode 100644 index 0000000000..649dd55482 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-002.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'inherit' property value</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'inherit' value is respected."> +<style> + #parent { + nav-left: #finish; + } + #start { + nav-left: inherit; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <div id="parent"><a href="">ignore</a> <a href="" id="start">START</a> <a href="" id="finish">FINISH</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-003.html b/testing/web-platform/tests/css/css-ui/nav-dir-003.html new file mode 100644 index 0000000000..af2290d8e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - input elements</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that directional focus navigation properties work on input elements."> +<style> + #start { + nav-left: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the text input containing "START" below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" input.</p> + + <div><input value="ignore"> <input value="START" id="start"> <input value="ignore"></div> + + <div><input value="ignore"> <input value="ignore"> <input value="ignore"></div> + + <div><input value="ignore"> <input value="FINISH" id="finish"> <input value="ignore"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-004.html b/testing/web-platform/tests/css/css-ui/nav-dir-004.html new file mode 100644 index 0000000000..f6b5dbeea3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-004.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - floating elements</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that directional focus navigation properties work on floating elements."> +<style> + #container > div { + clear: left; + } + #container > div > a { + float: left; + margin-right: 1ex; + } + #start { + nav-left: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" input.</p> + + <div id="container"> + <div><a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="" id="finish">FINISH</a> <a href="">ignore</a></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-005.html b/testing/web-platform/tests/css/css-ui/nav-dir-005.html new file mode 100644 index 0000000000..2f88a07327 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-005.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - currently focused element</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus doesn't change when navigating to the currently focused element."> +<style> + #start { + nav-left: #start; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if the "START" element remains focused when navigating left.</p> + + <div><a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-missing-1.html b/testing/web-platform/tests/css/css-ui/nav-dir-missing-1.html new file mode 100644 index 0000000000..01c25276a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-missing-1.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - unkown element id</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an unknow element id used as the value of the 'nav-right' property value does not hinder normal spacial navigation."> +<style> +#start { + nav-right: #foo; +} +</style> +</head> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right moves the focus to the "FINISH" link.</p> + + <a href="" id="start">START</a> <a href="" id="finish">FINISH</a> +</body></html> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-missing-2.html b/testing/web-platform/tests/css/css-ui/nav-dir-missing-2.html new file mode 100644 index 0000000000..a231d43871 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-missing-2.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - unkown element id</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an unknow element id used as the value of the 'nav-left' property value does not hinder normal spacial navigation."> +<style> +#start { + nav-left: #foo; +} +</style> +</head> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left moves the focus to the "FINISH" link.</p> + + <a href="" id="finish">FINISH</a> <a href="" id="start">START</a> +</body></html> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-missing-3.html b/testing/web-platform/tests/css/css-ui/nav-dir-missing-3.html new file mode 100644 index 0000000000..327e387edd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-missing-3.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - unkown element id</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an unknow element id used as the value of the 'nav-down' property value does not hinder normal spacial navigation."> +<style> +#start { + nav-down: #foo; +} +</style> +</head> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down moves the focus to the "FINISH" link.</p> + + <a href="" id="start">START</a><br> + <a href="" id="finish">FINISH</a> +</body></html> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-missing-4.html b/testing/web-platform/tests/css/css-ui/nav-dir-missing-4.html new file mode 100644 index 0000000000..643ff67e8a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-missing-4.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - unkown element id</title> +<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that an unknow element id used as the value of the 'nav-up' property value does not hinder normal spacial navigation."> +<style> +#start { + nav-up: #foo; +} +</style> +</head> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up moves the focus to the "FINISH" link.</p> + + <a href="" id="finish">FINISH</a><br> + <a href="" id="start">START</a> +</body></html> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-target-001.html b/testing/web-platform/tests/css/css-ui/nav-dir-target-001.html new file mode 100644 index 0000000000..91c660272c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-target-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'current' target frame</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'current' frame value is respected."> +<style> + #start { + nav-down: #finish current; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">FINISH</a></p> + + <p><a href="" id="start">START</a></p> + + <iframe src="support/nav-dir-target-001-frame.html"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-target-002.html b/testing/web-platform/tests/css/css-ui/nav-dir-target-002.html new file mode 100644 index 0000000000..8c7e5512c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-target-002.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'root' target frame</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'root' frame value is respected."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">FINISH</a></p> + + <iframe src="support/nav-dir-target-002-frame.html"></iframe> + + <p><a href="">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-target-003.html b/testing/web-platform/tests/css/css-ui/nav-dir-target-003.html new file mode 100644 index 0000000000..46e65c4e62 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-target-003.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - named target frame</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named target frame value is respected."> +<style> + #start { + nav-right: #finish "frame"; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="start">START</a> <a href="" id="finish">ignore</a></p> + + <iframe src="support/nav-dir-target-003-frame.html" name="frame"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-target-004.html b/testing/web-platform/tests/css/css-ui/nav-dir-target-004.html new file mode 100644 index 0000000000..82b604598a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-target-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non-existing target frame</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a non-existing target frame value is treated as 'current'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">ignore</a></p> + + <iframe src="support/nav-dir-target-004-frame.html"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-target-005.html b/testing/web-platform/tests/css/css-ui/nav-dir-target-005.html new file mode 100644 index 0000000000..b286df22f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-target-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - sibling target frame</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named frame value also works for sibling frames."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <iframe src="support/nav-dir-target-005-frame.html"></iframe> + <iframe src="support/nav-dir-target-003-frame.html" name="sibling"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-dir-target-006.html b/testing/web-platform/tests/css/css-ui/nav-dir-target-006.html new file mode 100644 index 0000000000..7c9194af53 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-dir-target-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - missing target element</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus does not change to a different frame if the identifier is missing from the target frame."> +<style> + #start { + nav-left: #finish current; + } + #intermediate { + nav-left: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <p><a href="">ignore</a> <a href="" id="intermediate">ignore</a> <a href="" id="start">START</a></p> + + <iframe src="support/nav-dir-target-001-frame.html"></iframe> + + <p><a href="" id="end">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-000.html b/testing/web-platform/tests/css/css-ui/nav-down-000.html new file mode 100644 index 0000000000..47ebd3fa27 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-000.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - property inheritance for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-down' property value is not inherited for 'nav-left'."> +<style type="text/css"> + #parent { + nav-down: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p><a href="">START</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="" id="finish">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-001.html b/testing/web-platform/tests/css/css-ui/nav-down-001.html new file mode 100644 index 0000000000..319be2f89b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation (nav-down) - <id></title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that downward navigation input respects the 'nav-down' property."> +<style> + #start { + nav-down: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <div><a href="" id="finish">FINISH</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-002.html b/testing/web-platform/tests/css/css-ui/nav-down-002.html new file mode 100644 index 0000000000..5d4df4e2d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'auto' value for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'auto' value is implemented for 'nav-down'."> +<style type="text/css"> + #start { + nav-down: #finish; + nav-down: auto; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p><a href="" id="start">START</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="" id="finish">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-003.html b/testing/web-platform/tests/css/css-ui/nav-down-003.html new file mode 100644 index 0000000000..6465279e05 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - ID value for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the ID value is implemented for 'nav-down'."> +<style type="text/css"> + #parent { + nav-down: #finish; + } + + #intermediate { + nav-down: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p><a href="">START</a></p> + <p><a href="" id="intermediate">ignore</a></p> + <p><a href="">ignore</a></p> + </div> + + <div> + <p><a href="">ignore</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="">ignore</a></p> + <p><a href="">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-004.html b/testing/web-platform/tests/css/css-ui/nav-down-004.html new file mode 100644 index 0000000000..a5b9e01ba3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-004.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - input elements for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-down' works for input elements."> +<style type="text/css"> + #parent { + nav-down: #finish; + } + + #intermediate { + nav-down: #end; + } + + input { + display: block; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down twice moves the focus to the "FINISH" text field.</p> + + <div id="parent"> + <input value="ignore"/> + <input value="START"/> + <input value="ignore" id="intermediate"/> + <input value="ignore"/> + </div> + + <div> + <input value="ignore"/> + <input value="FINISH" id="end"/> + <input value="ignore"/> + <input value="ignore"/> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-005.html b/testing/web-platform/tests/css/css-ui/nav-down-005.html new file mode 100644 index 0000000000..908b0b7cea --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-005.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in the writing direction for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-down' works for elements floating to the left."> +<style type="text/css"> + div > a { + float: left; + margin-left: 1em; + margin-right: 1em; + } + + div { + clear: left; + } + + #parent { + nav-down: #finish; + } + + #intermediate { + nav-down: #end; + } + +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore 1</a> + <a href="">START</a> + <a href="" id="end">FINISH</a> + <a href="">ignore 3</a> + </div> + + <div> + <a href="">ignore 4</a> + <a href="" id="intermediate">ignore 2</a> + <a href="">ignore 5</a> + <a href="">ignore 6</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-006.html b/testing/web-platform/tests/css/css-ui/nav-down-006.html new file mode 100644 index 0000000000..74c98430b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-006.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in opposite to the writing direction for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-down' works for elements floating to the right."> +<style type="text/css"> + div > a { + float: right; + margin-left: 1em; + margin-right: 1em; + } + + div { + clear: right; + } + + #parent { + nav-down: #finish; + } + + #intermediate { + nav-down: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore 1</a> + <a href="">ignore 2</a> + <a href="">START</a> + <a href="">ignore 3</a> + </div> + + <div> + <a href="">ignore 4</a> + <a href="" id="end">FINISH</a> + <a href="" id="intermediate">ignore 5</a> + <a href="">ignore 6</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-007.html b/testing/web-platform/tests/css/css-ui/nav-down-007.html new file mode 100644 index 0000000000..da053f2ebb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-007.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non existing ID for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-down' is ignored if the ID does not exist."> +<style type="text/css"> + #parent { + nav-down: #error; + } + + #intermediate { + nav-down: #foobar; + } + +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">START</a></p> + <p><a href="" id="intermediate">ignore</a></p> + <p><a href="" id="end">FINISH</a> + <p><a href="">ignore</a> + </div> + + <div> + <p><a href="">ignore</a> + <p><a href="">ignore</a> + <p><a href="" id="error">ignore</a> + <p><a href="">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-008.html b/testing/web-platform/tests/css/css-ui/nav-down-008.html new file mode 100644 index 0000000000..9f3349adaf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-008.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - currently focused element for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus doesn't change when navigating to the currently focused element for 'nav-down'."> +<style> + #start { + nav-down: #start; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if the "START" element remains focused when navigating down.</p> + + <div> + <p><a href="">ignore</a></p> + <p><a href="" id="start">START</a></p> + <p><a href="">ignore</a></p> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-009.html b/testing/web-platform/tests/css/css-ui/nav-down-009.html new file mode 100644 index 0000000000..782ab20029 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-009.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'current' target frame for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'current' frame value is respected for 'nav-down'."> +<style> + #start { + nav-down: #finish current; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <div> + <p><a href="" id="finish">FINISH</a></p> + <iframe src="support/nav-down-009-frame.html"></iframe> + <p><a href="" id="start">START</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-010.html b/testing/web-platform/tests/css/css-ui/nav-down-010.html new file mode 100644 index 0000000000..a27316104a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'root' target frame for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'root' frame value is respected for 'nav-down'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">FINISH</a></p> + + <iframe src="support/nav-down-010-frame.html"></iframe> + + <p><a href="">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-011.html b/testing/web-platform/tests/css/css-ui/nav-down-011.html new file mode 100644 index 0000000000..50bf586eb8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-011.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - named target frame for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="contributor" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named target frame value is respected for 'nav-down'."> +<style> + #start { + nav-down: #finish "frame"; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <p> + <a href="" id="start">START</a> + </p> + <p> + <a href="" id="finish">ignore</a> + </p> + + <iframe src="support/nav-down-011-frame.html" name="frame"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-012.html b/testing/web-platform/tests/css/css-ui/nav-down-012.html new file mode 100644 index 0000000000..c9952b4632 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-012.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non-existing target frame for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a non-existing target frame value is treated as 'current' for 'nav-down'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <iframe src="support/nav-down-012-frame.html"></iframe> + + <p><a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-013.html b/testing/web-platform/tests/css/css-ui/nav-down-013.html new file mode 100644 index 0000000000..2c20dda7fe --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-013.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - sibling target frame for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named frame value also works for sibling frames for 'nav-down'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down once moves the focus to the "FINISH" link.</p> + + <iframe src="support/nav-down-013-frame.html"></iframe> + <iframe src="support/nav-down-011-frame.html" name="sibling"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-014.html b/testing/web-platform/tests/css/css-ui/nav-down-014.html new file mode 100644 index 0000000000..ff751c89d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-014.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - missing target element for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus does not change to a different frame if the identifier is missing from the target frame for 'nav-down'."> +<style> + #start { + nav-down: #finish current; + } + #intermediate { + nav-down: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p> + + <p><a href="" id="start">START</a></p> + <p><a href="" id="intermediate">ignore</a></p> + <p><a href="">ignore</a></p> + + <iframe src="support/nav-down-009-frame.html"></iframe> + + <p><a href="" id="end">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-015.html b/testing/web-platform/tests/css/css-ui/nav-down-015.html new file mode 100644 index 0000000000..8c5e2cbf0a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-015.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'inherit' value for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'inherit' value is implemented for 'nav-down'."> +<style type="text/css"> + #parent { + nav-down: #end; + } + + #intermediateParent, #intermediate { + nav-down: inherit; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p><a href="">START</a></p> + <p id="intermediateParent"><a href="" id="intermediate">ignore</a></p> + <p><a href="">ignore</a></p> + </div> + + <div> + <p><a href="">ignore</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="">ignore</a></p> + <p><a href="">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-down-016.html b/testing/web-platform/tests/css/css-ui/nav-down-016.html new file mode 100644 index 0000000000..4c247b3575 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-down-016.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - disabled elements are not navigated for 'nav-down'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that disabled elements are not navigated for 'nav-down'."> +<style type="text/css"> + #start { + nav-down: #intermediate; + } + input { + display: block; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating down moves the focus to the "FINISH" text field and not the disabled "ignore" one.</p> + + <div id="parent"> + <input value="START"/> + <input value="ignore" disabled="disabled" id="intermediate"/> + <input value="FINISH"/> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-000.html b/testing/web-platform/tests/css/css-ui/nav-left-000.html new file mode 100644 index 0000000000..6b4302b78f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-000.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - property inheritance for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-left' property value is not inherited for 'nav-left'."> +<style type="text/css"> + #parent { + nav-left: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="" id="end">FINISH</a> + <a href="">START</a> + <a href="" id="finish">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-001.html b/testing/web-platform/tests/css/css-ui/nav-left-001.html new file mode 100644 index 0000000000..7d5bebbfe5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation (nav-left) - <id></title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that leftward navigation input respects the 'nav-left' property."> +<style> + #start { + nav-left: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <div><a href="">ignore</a> <a href="" id="finish">FINISH</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-002.html b/testing/web-platform/tests/css/css-ui/nav-left-002.html new file mode 100644 index 0000000000..0f2618e4c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'auto' value for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'auto' value is implemented for 'nav-left'."> +<style type="text/css"> + #start { + nav-left: #finish; + nav-left: auto; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="" id="end">FINISH</a> + <a href="" id="start">START</a> + <a href="" id="finish">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-003.html b/testing/web-platform/tests/css/css-ui/nav-left-003.html new file mode 100644 index 0000000000..405edba732 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - ID value for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the ID value is implemented for 'nav-left'."> +<style type="text/css"> + #parent { + nav-left: #finish; + } + + #intermediate { + nav-left: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="" id="intermediate">ignore</a> + <a href="">START</a> + <a href="">ignore</a> + </div> + + <div> + <a href="">ignore</a> + <a href="" id="end">FINISH</a> + <a href="">ignore</a> + <a href="">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-004.html b/testing/web-platform/tests/css/css-ui/nav-left-004.html new file mode 100644 index 0000000000..e68fe6ed55 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - input elements for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-left' works for input elements."> +<style type="text/css"> + #parent { + nav-left: #finish; + } + + #intermediate { + nav-left: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" text field.</p> + + <div id="parent"> + <input value="ignore"/> + <input value="ignore" id="intermediate"/> + <input value="START"/> + <input value="ignore"/> + </div> + + <div> + <input value="ignore"/> + <input value="FINISH" id="end"/> + <input value="ignore"/> + <input value="ignore"/> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-005.html b/testing/web-platform/tests/css/css-ui/nav-left-005.html new file mode 100644 index 0000000000..6ac91c161b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-005.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in the writing direction for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-left' works for elements floating to the left."> +<style type="text/css"> + div > a { + float: left; + margin-left: 1em; + margin-right: 1em; + } + + div { + clear: left; + } + + #parent { + nav-left: #finish; + } + + #intermediate { + nav-left: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore 1</a> + <a href="" id="intermediate">ignore 2</a> + <a href="">START</a> + <a href="">ignore 3</a> + </div> + + <div> + <a href="">ignore 4</a> + <a href="" id="end">FINISH</a> + <a href="">ignore 5</a> + <a href="">ignore 6</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-006.html b/testing/web-platform/tests/css/css-ui/nav-left-006.html new file mode 100644 index 0000000000..2e2a93bd87 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-006.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in opposite to the writing direction for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-left' works for elements floating to the right."> +<style type="text/css"> + div > a { + float: right; + margin-left: 1em; + margin-right: 1em; + } + + div { + clear: right; + } + + #parent { + nav-left: #finish; + } + + #intermediate { + nav-left: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore 1</a> + <a href="">ignore 2</a> + <a href="">START</a> + <a href="" id="intermediate">ignore 3</a> + </div> + + <div> + <a href="">ignore 4</a> + <a href="" id="end">FINISH</a> + <a href="">ignore 5</a> + <a href="">ignore 6</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-007.html b/testing/web-platform/tests/css/css-ui/nav-left-007.html new file mode 100644 index 0000000000..42f19dac0f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-007.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non existing ID for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-left' is ignored if the ID does not exist."> +<style type="text/css"> + #parent { + nav-left: #error; + } + + #intermediate { + nav-left: #foobar; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="" id="end">FINISH</a> + <a href="" id="intermediate">ignore</a> + <a href="">START</a> + <a href="">ignore</a> + </div> + + <div> + <a href="">ignore</a> + <a href="">ignore</a> + <a href="" id="error">ignore</a> + <a href="">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-008.html b/testing/web-platform/tests/css/css-ui/nav-left-008.html new file mode 100644 index 0000000000..ed638c2fba --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-008.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - currently focused element for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus doesn't change when navigating to the currently focused element for 'nav-left'."> +<style> + #start { + nav-left: #start; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if the "START" element remains focused when navigating left.</p> + + <div><a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-009.html b/testing/web-platform/tests/css/css-ui/nav-left-009.html new file mode 100644 index 0000000000..d5e18a59a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-009.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'current' target frame for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'current' frame value is respected for 'nav-left'."> +<style> + #start { + nav-left: #finish current; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <div> + <a href="" id="finish">FINISH</a> + <iframe src="support/nav-left-009-frame.html"></iframe> + <a href="" id="start">START</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-010.html b/testing/web-platform/tests/css/css-ui/nav-left-010.html new file mode 100644 index 0000000000..1d1129bef1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'root' target frame for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'root' frame value is respected for 'nav-left'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">FINISH</a></p> + + <iframe src="support/nav-left-010-frame.html"></iframe> + + <p><a href="">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-011.html b/testing/web-platform/tests/css/css-ui/nav-left-011.html new file mode 100644 index 0000000000..545b449774 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-011.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - named target frame for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="contributor" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named target frame value is respected for 'nav-left'."> +<style> + #start { + nav-left: #finish "frame"; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <p> + <a href="" id="finish">ignore</a> + <a href="" id="start">START</a> + </p> + + <iframe src="support/nav-left-011-frame.html" name="frame"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-012.html b/testing/web-platform/tests/css/css-ui/nav-left-012.html new file mode 100644 index 0000000000..c2bcae53eb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-012.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non-existing target frame for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a non-existing target frame value is treated as 'current' for 'nav-left'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <div> + <a href="" id="finish">ignore</a> + <iframe src="support/nav-left-012-frame.html"></iframe> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-013.html b/testing/web-platform/tests/css/css-ui/nav-left-013.html new file mode 100644 index 0000000000..f73eb42379 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-013.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - sibling target frame for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named frame value also works for sibling frames for 'nav-left'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left once moves the focus to the "FINISH" link.</p> + + <iframe src="support/nav-left-013-frame.html"></iframe> + <iframe src="support/nav-left-011-frame.html" name="sibling"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-014.html b/testing/web-platform/tests/css/css-ui/nav-left-014.html new file mode 100644 index 0000000000..a844eda7c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-014.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - missing target element for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus does not change to a different frame if the identifier is missing from the target frame for 'nav-left'."> +<style> + #start { + nav-left: #finish current; + } + #intermediate { + nav-left: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <p><a href="">ignore</a> <a href="" id="intermediate">ignore</a> <a href="" id="start">START</a></p> + + <iframe src="support/nav-left-009-frame.html"></iframe> + + <p><a href="" id="end">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-015.html b/testing/web-platform/tests/css/css-ui/nav-left-015.html new file mode 100644 index 0000000000..971e8830d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-015.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'inherit' value for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'inherit' value is implemented for 'nav-left'."> +<style type="text/css"> + #parent { + nav-left: #end; + } + + #intermediate { + nav-left: inherit; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="" id="intermediate">ignore</a> + <a href="">START</a> + <a href="">ignore</a> + </div> + + <div> + <a href="">ignore</a> + <a href="" id="end">FINISH</a> + <a href="">ignore</a> + <a href="">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-left-016.html b/testing/web-platform/tests/css/css-ui/nav-left-016.html new file mode 100644 index 0000000000..f801bef1f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-left-016.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - disabled elements are not navigated for 'nav-left'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that disabled elements are not navigated for 'nav-left'."> +<style type="text/css"> + #start { + nav-left: #intermediate; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating left moves the focus to the "FINISH" text field and not the disabled "ignore" one.</p> + + <div id="parent"> + <input value="FINISH"/> + <input value="ignore" disabled="disabled" id="intermediate"/> + <input value="START"/> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-000.html b/testing/web-platform/tests/css/css-ui/nav-right-000.html new file mode 100644 index 0000000000..b637f48bdc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-000.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - property inheritance for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-right' property value is not inherited for 'nav-left'."> +<style type="text/css"> + #parent { + nav-right: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="">START</a> + <a href="" id="end">FINISH</a> + <a href="" id="finish">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-001.html b/testing/web-platform/tests/css/css-ui/nav-right-001.html new file mode 100644 index 0000000000..df02289146 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation (nav-right) - <id></title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that rightward navigation input respects the 'nav-right' property."> +<style> + #start { + nav-right: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="" id="finish">FINISH</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-002.html b/testing/web-platform/tests/css/css-ui/nav-right-002.html new file mode 100644 index 0000000000..04be3d7cc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'auto' value for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'auto' value is implemented for 'nav-right'."> +<style type="text/css"> + #start { + nav-right: #finish; + nav-right: auto; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="" id="start">START</a> + <a href="" id="end">FINISH</a> + <a href="" id="finish">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-003.html b/testing/web-platform/tests/css/css-ui/nav-right-003.html new file mode 100644 index 0000000000..447226bf3e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - ID value for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the ID value is implemented for 'nav-right'."> +<style type="text/css"> + #parent { + nav-right: #finish; + } + + #intermediate { + nav-right: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="">START</a> + <a href="" id="intermediate">ignore</a> + <a href="">ignore</a> + </div> + + <div> + <a href="">ignore</a> + <a href="" id="end">FINISH</a> + <a href="">ignore</a> + <a href="">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-004.html b/testing/web-platform/tests/css/css-ui/nav-right-004.html new file mode 100644 index 0000000000..889631920d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-004.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - input elements for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-right' works for input elements."> +<style type="text/css"> + #parent { + nav-right: #finish; + } + + #intermediate { + nav-right: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right twice moves the focus to the "FINISH" text field.</p> + + <div id="parent"> + <input value="ignore"/> + <input value="START"/> + <input value="ignore" id="intermediate"/> + <input value="ignore"/> + </div> + + <div> + <input value="ignore"/> + <input value="FINISH" id="end"/> + <input value="ignore"/> + <input value="ignore"/> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-005.html b/testing/web-platform/tests/css/css-ui/nav-right-005.html new file mode 100644 index 0000000000..bd2a90b94f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-005.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in the writing direction for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-right' works for elements floating to the left."> +<style type="text/css"> + div > a { + float: left; + margin-right: 1em; + margin-right: 1em; + } + + div { + clear: left; + } + + #parent { + nav-right: #finish; + } + + #intermediate { + nav-right: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore 1</a> + <a href="">START</a> + <a href="" id="intermediate">ignore 2</a> + <a href="">ignore 3</a> + </div> + + <div> + <a href="">ignore 4</a> + <a href="" id="end">FINISH</a> + <a href="">ignore 5</a> + <a href="">ignore 6</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-006.html b/testing/web-platform/tests/css/css-ui/nav-right-006.html new file mode 100644 index 0000000000..e713ff0163 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-006.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in opposite to the writing direction for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-right' works for elements floating to the right."> +<style type="text/css"> + div > a { + float: right; + margin-right: 1em; + margin-right: 1em; + } + + div { + clear: right; + } + + #parent { + nav-right: #finish; + } + + #intermediate { + nav-right: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore 1</a> + <a href="" id="intermediate">ignore 2</a> + <a href="">START</a> + <a href="">ignore 3</a> + </div> + + <div> + <a href="">ignore 4</a> + <a href="" id="end">FINISH</a> + <a href="">ignore 5</a> + <a href="">ignore 6</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-007.html b/testing/web-platform/tests/css/css-ui/nav-right-007.html new file mode 100644 index 0000000000..030d9c5e20 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-007.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non existing ID for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-right' is ignored if the ID does not exist."> +<style type="text/css"> + #parent { + nav-right: #error; + } + + #intermediate { + nav-right: #foobar; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">START</a> + <a href="" id="intermediate">ignore</a> + <a href="" id="end">FINISH</a> + <a href="">ignore</a> + </div> + + <div> + <a href="">ignore</a> + <a href="">ignore</a> + <a href="" id="error">ignore</a> + <a href="">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-008.html b/testing/web-platform/tests/css/css-ui/nav-right-008.html new file mode 100644 index 0000000000..ddf154c8a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-008.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - currently focused element for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus doesn't change when navigating to the currently focused element for 'nav-right'."> +<style> + #start { + nav-right: #start; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if the "START" element remains focused when navigating right.</p> + + <div> + <a href="">ignore</a> + <a href="" id="start">START</a> + <a href="">ignore</a> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-009.html b/testing/web-platform/tests/css/css-ui/nav-right-009.html new file mode 100644 index 0000000000..b1fe70bd7d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-009.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'current' target frame for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'current' frame value is respected for 'nav-right'."> +<style> + #start { + nav-right: #finish current; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <div> + <a href="" id="start">START</a> + <iframe src="support/nav-right-009-frame.html"></iframe> + <a href="" id="finish">FINISH</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-010.html b/testing/web-platform/tests/css/css-ui/nav-right-010.html new file mode 100644 index 0000000000..4c20160e6b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'root' target frame for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'root' frame value is respected for 'nav-right'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">FINISH</a></p> + + <iframe src="support/nav-right-010-frame.html"></iframe> + + <p><a href="">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-011.html b/testing/web-platform/tests/css/css-ui/nav-right-011.html new file mode 100644 index 0000000000..5102cb91e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-011.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - named target frame for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="contributor" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named target frame value is respected for 'nav-right'."> +<style> + #start { + nav-right: #finish "frame"; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <p> + <a href="" id="start">START</a> + <a href="" id="finish">ignore</a> + </p> + + <iframe src="support/nav-right-011-frame.html" name="frame"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-012.html b/testing/web-platform/tests/css/css-ui/nav-right-012.html new file mode 100644 index 0000000000..9c5722c8a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-012.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non-existing target frame for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a non-existing target frame value is treated as 'current' for 'nav-right'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <div> + <iframe src="support/nav-right-012-frame.html"></iframe> + <a href="" id="finish">ignore</a> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-013.html b/testing/web-platform/tests/css/css-ui/nav-right-013.html new file mode 100644 index 0000000000..d422042660 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-013.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - sibling target frame for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named frame value also works for sibling frames for 'nav-right'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right once moves the focus to the "FINISH" link.</p> + + <iframe src="support/nav-right-011-frame.html" name="sibling"></iframe> + <iframe src="support/nav-right-013-frame.html"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-014.html b/testing/web-platform/tests/css/css-ui/nav-right-014.html new file mode 100644 index 0000000000..088725a448 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-014.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - missing target element for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus does not change to a different frame if the identifier is missing from the target frame for 'nav-right'."> +<style> + #start { + nav-right: #finish current; + } + #intermediate { + nav-right: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right twice moves the focus to the "FINISH" link.</p> + + <p> + <a href="" id="start">START</a> + <a href="" id="intermediate">ignore</a> + <a href="">ignore</a> + </p> + + <iframe src="support/nav-right-009-frame.html"></iframe> + + <p><a href="" id="end">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-015.html b/testing/web-platform/tests/css/css-ui/nav-right-015.html new file mode 100644 index 0000000000..7b76b0a011 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-015.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'inherit' value for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'inherit' value is implemented for 'nav-right'."> +<style type="text/css"> + #parent { + nav-right: #end; + } + + #intermediate { + nav-right: inherit; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore</a> + <a href="">START</a> + <a href="" id="intermediate">ignore</a> + <a href="">ignore</a> + </div> + + <div> + <a href="">ignore</a> + <a href="" id="end">FINISH</a> + <a href="">ignore</a> + <a href="">ignore</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-right-016.html b/testing/web-platform/tests/css/css-ui/nav-right-016.html new file mode 100644 index 0000000000..5531c5b60c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-right-016.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - disabled elements are not navigated for 'nav-right'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that disabled elements are not navigated for 'nav-right'."> +<style type="text/css"> + #start { + nav-right: #intermediate; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating right moves the focus to the "FINISH" text field and not the disabled "ignore" one.</p> + + <div id="parent"> + <input value="START"/> + <input value="ignore" disabled="disabled" id="intermediate"/> + <input value="FINISH"/> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-000.html b/testing/web-platform/tests/css/css-ui/nav-up-000.html new file mode 100644 index 0000000000..8c71bf5184 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-000.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - property inheritance for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-up' property value is not inherited for 'nav-left'."> +<style type="text/css"> + #parent { + nav-up: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="">START</a></p> + <p><a href="" id="finish">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-001.html b/testing/web-platform/tests/css/css-ui/nav-up-001.html new file mode 100644 index 0000000000..576b349959 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation (nav-up) - <id></title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that upward navigation input respects the 'nav-up' property."> +<style> + #start { + nav-up: #finish; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a> <a href="">ignore</a></div> + + <div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a> <a href="" id="finish">FINISH</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-002.html b/testing/web-platform/tests/css/css-ui/nav-up-002.html new file mode 100644 index 0000000000..cbcf11a924 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-002.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'auto' value for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'auto' value is implemented for 'nav-up'."> +<style type="text/css"> + #start { + nav-up: #finish; + nav-up: auto; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="" id="start">START</a></p> + <p><a href="" id="finish">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-003.html b/testing/web-platform/tests/css/css-ui/nav-up-003.html new file mode 100644 index 0000000000..9353af9425 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-003.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - ID value for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the ID value is implemented for 'nav-up'."> +<style type="text/css"> + #parent { + nav-up: #finish; + } + + #intermediate { + nav-up: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p><a href="" id="intermediate">ignore</a></p> + <p><a href="">START</a></p> + <p><a href="">ignore</a></p> + </div> + + <div> + <p><a href="">ignore</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="">ignore</a></p> + <p><a href="">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-004.html b/testing/web-platform/tests/css/css-ui/nav-up-004.html new file mode 100644 index 0000000000..16eb4fd5cf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-004.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - input elements for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-up' works for input elements."> +<style type="text/css"> + #parent { + nav-up: #finish; + } + + #intermediate { + nav-up: #end; + } + + input { + display: block; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up twice moves the focus to the "FINISH" text field.</p> + + <div id="parent"> + <input value="ignore"/> + <input value="ignore" id="intermediate"/> + <input value="START"/> + <input value="ignore"/> + </div> + + <div> + <input value="ignore"/> + <input value="FINISH" id="end"/> + <input value="ignore"/> + <input value="ignore"/> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-005.html b/testing/web-platform/tests/css/css-ui/nav-up-005.html new file mode 100644 index 0000000000..7598a08e22 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-005.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in the writing direction for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-up' works for elements floating to the left."> +<style type="text/css"> + div > a { + float: up; + margin-up: 1em; + margin-right: 1em; + } + + div { + clear: up; + } + + #parent { + nav-up: #finish; + } + + #intermediate { + nav-up: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore 1</a></p> + <p><a href="" id="intermediate">ignore 2</a></p> + <p><a href="">START</a></p> + <p><a href="">ignore 3</a></p> + </div> + + <div> + <p><a href="">ignore 4</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="">ignore 5</a></p> + <p><a href="">ignore 6</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-006.html b/testing/web-platform/tests/css/css-ui/nav-up-006.html new file mode 100644 index 0000000000..168276514a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-006.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - elements floating in opposite to the writing direction for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that 'nav-up' works for elements floating to the right."> +<style type="text/css"> + div > a { + float: right; + margin-up: 1em; + margin-right: 1em; + } + + div { + clear: right; + } + + #parent { + nav-up: #finish; + } + + #intermediate { + nav-up: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <a href="">ignore 1</a> + <a href="" id="intermediate">ignore 3</a> + <a href="" id="end">FINISH</a> + <a href="">ignore 2</a> + </div> + + <div> + <a href="">ignore 4</a> + <a href="">START</a> + <a href="">ignore 5</a> + <a href="">ignore 6</a> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-007.html b/testing/web-platform/tests/css/css-ui/nav-up-007.html new file mode 100644 index 0000000000..17251afd47 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-007.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non existing ID for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'nav-up' is ignored if the ID does not exist."> +<style type="text/css"> + #parent { + nav-up: #error; + } + + #intermediate { + nav-up: #foobar; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="" id="end">FINISH</a></p> + <p><a href="" id="intermediate">ignore</a></p> + <p><a href="">START</a></p> + <p><a href="">ignore</a></p> + </div> + + <div> + <p><a href="">ignore</a></p> + <p><a href="">ignore</a></p> + <p><a href="" id="error">ignore</a></p> + <p><a href="">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-008.html b/testing/web-platform/tests/css/css-ui/nav-up-008.html new file mode 100644 index 0000000000..c6c53a68df --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-008.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - currently focused element for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus doesn't change when navigating to the currently focused element for 'nav-up'."> +<style> + #start { + nav-up: #start; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if the "START" element remains focused when navigating up.</p> + + <div> + <p><a href="">ignore</a></p> + <p><a href="" id="start">START</a></p> + <p><a href="">ignore</a></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-009.html b/testing/web-platform/tests/css/css-ui/nav-up-009.html new file mode 100644 index 0000000000..757ca6a904 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-009.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'current' target frame for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'current' frame value is respected for 'nav-up'."> +<style> + #start { + nav-up: #finish current; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <div> + <p><a href="" id="finish">FINISH</a></p> + <iframe src="support/nav-up-009-frame.html"></iframe> + <p><a href="" id="start">START</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-010.html b/testing/web-platform/tests/css/css-ui/nav-up-010.html new file mode 100644 index 0000000000..c7e1c0e470 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'root' target frame for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'root' frame value is respected for 'nav-up'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">FINISH</a></p> + + <iframe src="support/nav-up-010-frame.html"></iframe> + + <p><a href="">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-011.html b/testing/web-platform/tests/css/css-ui/nav-up-011.html new file mode 100644 index 0000000000..15cccc5b20 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-011.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - named target frame for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="contributor" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named target frame value is respected for 'nav-up'."> +<style> + #start { + nav-up: #finish "frame"; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">ignore</a></p> + <p><a href="" id="start">START</a></p> + + <iframe src="support/nav-up-011-frame.html" name="frame"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-012.html b/testing/web-platform/tests/css/css-ui/nav-up-012.html new file mode 100644 index 0000000000..aed5f2195d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-012.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - non-existing target frame for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a non-existing target frame value is treated as 'current' for 'nav-up'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <p><a href="" id="finish">ignore</a></p> + + <iframe src="support/nav-up-012-frame.html"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-013.html b/testing/web-platform/tests/css/css-ui/nav-up-013.html new file mode 100644 index 0000000000..2fec4da661 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-013.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - sibling target frame for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that a named frame value also works for sibling frames for 'nav-up'."> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up once moves the focus to the "FINISH" link.</p> + + <iframe src="support/nav-up-013-frame.html"></iframe> + <iframe src="support/nav-up-011-frame.html" name="sibling"></iframe> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-014.html b/testing/web-platform/tests/css/css-ui/nav-up-014.html new file mode 100644 index 0000000000..ceb2954859 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-014.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - missing target element for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that focus does not change to a different frame if the identifier is missing from the target frame for 'nav-up'."> +<style> + #start { + nav-up: #finish current; + } + #intermediate { + nav-up: #end; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up twice moves the focus to the "FINISH" link.</p> + + <p><a href="">ignore</a></p> + <p><a href="" id="intermediate">ignore</a></p> + <p><a href="" id="start">START</a></p> + + <iframe src="support/nav-up-009-frame.html"></iframe> + + <p><a href="" id="end">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-015.html b/testing/web-platform/tests/css/css-ui/nav-up-015.html new file mode 100644 index 0000000000..3680bc0ddf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-015.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - 'inherit' value for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the 'inherit' value is implemented for 'nav-up'."> +<style type="text/css"> + #parent { + nav-up: #end; + } + + #intermediateParent, #intermediate { + nav-up: inherit; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" link below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up twice moves the focus to the "FINISH" link.</p> + + <div id="parent"> + <p><a href="">ignore</a></p> + <p id="intermediateParent"><a href="" id="intermediate">ignore</a></p> + <p><a href="">START</a></p> + <p><a href="">ignore</a></p> + </div> + + <div> + <p><a href="">ignore</a></p> + <p><a href="" id="end">FINISH</a></p> + <p><a href="">ignore</a></p> + <p><a href="">ignore</a></p> + </div> + +</body> diff --git a/testing/web-platform/tests/css/css-ui/nav-up-016.html b/testing/web-platform/tests/css/css-ui/nav-up-016.html new file mode 100644 index 0000000000..bca0f73dde --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nav-up-016.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - disabled elements are not navigated for 'nav-up'</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#nav-dir"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that disabled elements are not navigated for 'nav-up'."> +<style type="text/css"> + #start { + nav-up: #intermediate; + } + + input { + display: block; + } +</style> +<body> + <p>First, use directional navigation to navigate the focus to the "START" text field below.</p> + <!-- In Opera 12.16, directional navigation may be done using Shift+<arrow key>. + In the SmartTV emulator, use the keypad in the GUI. --> + <p>Test passes if navigating up moves the focus to the "FINISH" text field and not the disabled "ignore" one.</p> + + <div id="parent"> + <input value="FINISH"/> + <input value="ignore" disabled="disabled" id="intermediate"/> + <input value="START"/> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/neg-outline-offset-border-radius-crash.html b/testing/web-platform/tests/css/css-ui/neg-outline-offset-border-radius-crash.html new file mode 100644 index 0000000000..eed5702e62 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/neg-outline-offset-border-radius-crash.html @@ -0,0 +1,12 @@ +<!doctype html> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-offset"> +<link rel="help" href="https://crbug.com/1301077"> +<style> +#target { + width: 100px; + height: 10px; + border-radius: 10px; + outline: 20px solid green; + outline-offset: -200px; +</style> +<div id="target"></div> diff --git a/testing/web-platform/tests/css/css-ui/nothing-below-ref.html b/testing/web-platform/tests/css/css-ui/nothing-below-ref.html new file mode 100644 index 0000000000..c8d6508ace --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/nothing-below-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Reference: nothing below</title> +<p>There should be nothing below:</p> diff --git a/testing/web-platform/tests/css/css-ui/outline-001.html b/testing/web-platform/tests/css/css-ui/outline-001.html new file mode 100644 index 0000000000..e669e23136 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline - create outline likes border property</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. 'outline' property" href="http://www.w3.org/TR/css3-ui/#outline"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that the outline property creates outlines around visual objects and makes them stand out"> +<style> + #container { + background-color: red; + height: 100px; + width: 100px; + } + #test { + background-color: green; + height: 60px; + left: 20px; + outline: 20px green solid; + position: relative; + top: 20px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/outline-002.html b/testing/web-platform/tests/css/css-ui/outline-002.html new file mode 100644 index 0000000000..7d8253d454 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-002.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline - inherit (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.1. 'outline' property" href="http://www.w3.org/TR/css3-ui/#outline"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that the outline property inherits the parent's value when outline set inherit"> +<style> + #container { + background-color: red; + height: 100px; + width: 100px; + } + #parent { + background-color: red; + height: 80px; + left: 10px; + outline: 10px green solid; + position: relative; + top: 10px; + width: 80px; + } + #child { + background-color: green; + height: 60px; + left: 10px; + outline: inherit; + position: relative; + top: 10px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="parent"> + <div id="child"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/outline-003.html b/testing/web-platform/tests/css/css-ui/outline-003.html new file mode 100644 index 0000000000..2133930f0f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-003.html @@ -0,0 +1,52 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline & layout</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="Outline does not influence size or position, and has no impact on layout."> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +div { + background: red; + width: 100px; + height: 100px; +} +span:nth-of-type(1) { + float: left; + width: 30px; + height: 30px; + outline: solid 10px green; + background: green; + + position: relative; + top: 10px; + left: 10px; +} +span:nth-of-type(2) { + float: left; + width: 0; + height: 0; + outline: solid 25px green; + background: red; + + position: relative; + top: 25px; + left: 45px; +} +span:nth-of-type(3) { + float: left; + clear: left; + width: 100px; + height: 50px; + background: green; + + position: relative; + top: 20px; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><span></span><span></span><span></span></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-004.html b/testing/web-platform/tests/css/css-ui/outline-004.html new file mode 100644 index 0000000000..35029598ca --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-004.html @@ -0,0 +1,30 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: connected outline parts</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content="ahem should"> + <meta name=assert content="Each part of the outline should be fully connected rather than open on some sides"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +span { + outline: solid green 10px; + color: green; +} +div { + box-sizing: border-box; + width: 100px; + height: 100px; + padding: 10px; + line-height: 40px; + font-size: 40px; + background: red; + font-family: Ahem; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><span>xx<br>xx</span></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-005.html b/testing/web-platform/tests/css/css-ui/outline-005.html new file mode 100644 index 0000000000..69b70ddd75 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-005.html @@ -0,0 +1,33 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline & border-radius</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content="should"> + <meta name=assert content="To the extent that the outline follows the border edge, it should follow the border-radius curve."> + <!-- Allow slight color differences where the outline and the background intersect --> + <meta name=fuzzy content="0-2;0-100"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +body > div { + width: 100px; + height: 100px; + overflow: hidden; + background: red; + display: table-cell; /* Make a BFC */ +} +div > div { + width: 50px; + height: 50px; + margin: 25px; + background: green; + border-radius: 100%; + outline: solid green 100px; + outline-offset: -1px; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><div></div></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-006.html b/testing/web-platform/tests/css/css-ui/outline-006.html new file mode 100644 index 0000000000..29f0ea66d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-006.html @@ -0,0 +1,31 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-color:invert</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="outline-color:invert must do pixel-level color invertion OR fail to parse, in which case the initial value must be currentcolor"> + <link rel="match" href="reference/outline-006-ref.html"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +body > div { + width: 100px; + height: 100px; + display: table-cell; /* Make a BFC */ + background: rgb(255,127,255); /* inverse of green (rgb(0,128,0)) */ +} +div > div { + color: green; + background: green; + margin: 25px; + width: 50px; + height: 50px; + outline: solid 25px; + outline-color: invert; +} + +</style> + + <p>Test passes if there is a filled green square and <strong>no pink</strong>.</p> + <div><div></div></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-007.html b/testing/web-platform/tests/css/css-ui/outline-007.html new file mode 100644 index 0000000000..a805ae2553 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-007.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-style: auto</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="outline-style:auto allows the UA to display any outline it wants, but it must display something."> + <link rel="mismatch" href="reference/outline-007-ref.html"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +div { + width: 100px; + height: 100px; + outline-style: auto; + + /* These values may be ignored by the UA, but just in case they are not, + set them to something that does not result in the outline being invisible */ + outline-width: 5px; + outline-color: green; +} + +</style> + + <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> + <div></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-008.html b/testing/web-platform/tests/css/css-ui/outline-008.html new file mode 100644 index 0000000000..61489472a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-008.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: computed values ouf outline-width</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="outline-width values compute to absolute lengths"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +body > div { + width: 100px; + height: 100px; + background: red; + + font-size: 10px; + + /* stacking of outlines is undefined, so we cannot reliably to have an outline hide another outline. + We are using a border instead, + but still need to create an (invisible) outline to make sure that outline-width does not compute to 0. */ + outline: solid 1em transparent; + border: solid 1em red; + margin-left: -10px; + margin-top: -10px; + +} +div > div { + width: 100px; + height: 100px; + background: green; + + font-size: 5px; + outline-width: inherit; + outline-style: solid; + outline-color: white; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><div></div></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-009.html b/testing/web-platform/tests/css/css-ui/outline-009.html new file mode 100644 index 0000000000..70021b1c47 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-009.html @@ -0,0 +1,29 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: computed values ouf outline-width when outline-style is none</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="outline-width computes to 0 when outline-style is none"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +body { + outline-width: 10px; + outline-style: none; + +} +div { + width: 100px; + height: 100px; + background: green; + + outline-width: inherit; + outline-style: solid; + outline-color: red; +} +</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/outline-010.html b/testing/web-platform/tests/css/css-ui/outline-010.html new file mode 100644 index 0000000000..a33f666f23 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-010.html @@ -0,0 +1,41 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: computed values ouf outline-width</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="outline-offset values compute to absolute lengths"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +body > div { + width: 100px; + height: 100px; + + font-size: 10px; + + /* stacking of outlines is undefined, so we cannot reliably to have an outline hide another outline. + We are using a border instead, + but still need to create an (invisible) outline to make sure that outline-offset does not compute to 0. */ + outline: solid 5px transparent; + outline-offset: 1em; + padding: 10px; + border: solid 5px red; + margin-left: -15px; + margin-top: -15px; + +} +div > div { + width: 100px; + height: 100px; + background: green; + + outline: solid 5px white; + font-size: 5px; + outline-offset: inherit; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><div></div></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-011.html b/testing/web-platform/tests/css/css-ui/outline-011.html new file mode 100644 index 0000000000..963d751959 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-011.html @@ -0,0 +1,29 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-color: currentcolor</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="currentcolor computes to currentcolor on outline-color"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +body > div { + width: 100px; + height: 100px; + background: red; + color: red; + display: table-cell; /* Make a BFC */ +} +div > div { + width: 0; + height: 0; + margin: 50px; + color: green; + outline: solid currentcolor 50px; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><div></div></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-012.html b/testing/web-platform/tests/css/css-ui/outline-012.html new file mode 100644 index 0000000000..286c6c09d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-012.html @@ -0,0 +1,22 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-offset width negative values</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="Negative values on outline-offset must cause the outline to shrink into the border box."> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +div { + width: 100px; + height: 100px; + background: red; + outline: solid 50px green; + outline-offset: -50px; +} +</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/outline-013.html b/testing/web-platform/tests/css/css-ui/outline-013.html new file mode 100644 index 0000000000..4b898a3e18 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-013.html @@ -0,0 +1,22 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-offset width negative values</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content="should"> + <meta name=assert content="Negative values on outline-offset should not cause the height and the width of outside of the shape drawn by the outline to become smaller than twice the computed value of the outline-width property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +div { + width: 100px; + height: 100px; + background: red; + outline: solid 50px green; + outline-offset: -150px; +} +</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/outline-014.html b/testing/web-platform/tests/css/css-ui/outline-014.html new file mode 100644 index 0000000000..b78090439e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-014.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-offset width negative values — long box</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content="should"> + <meta name=assert content="Negative values on outline-offset should not cause the height and the width of outside of the shape drawn by the outline to become smaller than twice the computed value of the outline-width property, applying this constrain independenly in each direction."> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +div { + width: 100px; + height: 100px; + /* The borders makes the box rectangular rather than square */ + border-right: solid white 50px; + border-left: solid white 50px; + background: red; + outline: solid 50px green; + outline-offset: -100px; + margin-left: -50px; +} +</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/outline-015.html b/testing/web-platform/tests/css/css-ui/outline-015.html new file mode 100644 index 0000000000..61b49684cb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-015.html @@ -0,0 +1,26 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-offset width negative values — long box</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content="should"> + <meta name=assert content="Negative values on outline-offset should not cause the height and the width of outside of the shape drawn by the outline to become smaller than twice the computed value of the outline-width property, applying this constrain independenly in each direction."> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +div { + width: 100px; + height: 100px; + /* The borders makes the box rectangular rather than square */ + border-top: solid white 50px; + border-bottom: solid white 50px; + background: red; + outline: solid 50px green; + outline-offset: -100px; + margin-top: -50px; +} +</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/outline-016.html b/testing/web-platform/tests/css/css-ui/outline-016.html new file mode 100644 index 0000000000..e3ca388f7e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-016.html @@ -0,0 +1,35 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline-offset width negative values — long box</title> + <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> + <meta name=flags content="should"> + <meta name=assert content="Negative values on outline-offset should not cause the height and the width of outside of the shape drawn by the outline to become smaller than twice the computed value of the outline-width property, applying this constrain separately for each shape if there are several shapes."> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +span { + outline: solid green 25px; + outline-offset: -35px; /* Any value that makes sure the outlines collide ( < -25px ) + would make the test valid, + -35px is just one such value that happens to make the failures pretty. + I recommend looking at this test in as many UAs as possible, + the results are quite astonishing. + */ + color: red; +} +div { + width: 50px; + height: 50px; + padding: 25px; + background: green; + line-height: 25px; + font-size: 25px; + font-family: Ahem; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><span>xx<br>xx</span></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-017.html b/testing/web-platform/tests/css/css-ui/outline-017.html new file mode 100644 index 0000000000..d3a350d2a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-017.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: interpolable outline-* properties animation</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-outline-style"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@keyframes outline-anim { + from { + outline: solid 1px rgba(1, 0, 0, 0.5); + outline-offset: 1px; + } + to { + outline: solid 3px rgba(3, 0, 0, 0.5); + outline-offset: 3px; + } +} + +#test { + animation: outline-anim 3s -1.5s paused linear; + outline: solid 1px rgba(1, 0, 0, 0.5); + outline-offset: 1px; +} +</style> +<body> + <div id="test"></div> + <div id=log></div> + + <script> + // outline being a render-only property, its animation can be done off the main thread + // checking the values after the first paint is safer, hence requestAnimationFrame + setup({explicit_done:true}); + requestAnimationFrame(function() { + // synchronous tests being run during the page's first paint + test( + function(){ + var test = document.getElementById("test"); + assert_equals(getComputedStyle(test).outlineColor, 'rgba(2, 0, 0, 0.5)'); + }, "outline-color is animated as a color"); + test( + function(){ + var test = document.getElementById("test"); + assert_equals(getComputedStyle(test).outlineWidth, '2px'); + }, "outline-width is animated as a length"); + test( + function(){ + var test = document.getElementById("test"); + assert_equals(getComputedStyle(test).outlineOffset, '2px'); + }, "outline-offset is animated as a length"); + done(); + }); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/outline-018.html b/testing/web-platform/tests/css/css-ui/outline-018.html new file mode 100644 index 0000000000..c2db6f9971 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-018.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: non interpolable outline-style animation</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#propdef-outline-style"> +<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +@keyframes outline-anim { + from { + outline: solid 1px black; + } + to { + outline: dotted 1px black; + } +} + +#test1 { + animation: outline-anim 3s 0s paused linear; + outline: solid 1px black; +} +#test2 { + animation: outline-anim 3s -1s paused linear; + outline: solid 1px black; +} +#test3 { + animation: outline-anim 3s -2s paused linear; + outline: solid 1px black; +} +#test4 { + animation: outline-anim 3s 0s paused reverse linear; + outline: solid 1px black; +} +</style> +<body> + <div id="test1"></div> + <div id="test2"></div> + <div id="test3"></div> + <div id="test4"></div> + <div id=log></div> + + <script> + // outline being a render-only property, its animation can be done off the main thread + // checking the values after the first paint is safer, hence requestAnimationFrame + setup({explicit_done:true}); + requestAnimationFrame(function() { + // synchronous tests being run during the page's first paint + test( + function(){ + var tests = document.querySelectorAll("div[id^='test']"); + assert_equals(getComputedStyle(tests[0]).outlineStyle, 'solid'); + assert_equals(getComputedStyle(tests[1]).outlineStyle, 'solid'); + assert_equals(getComputedStyle(tests[2]).outlineStyle, 'dotted'); + assert_equals(getComputedStyle(tests[3]).outlineStyle, 'dotted'); + }, "outline-style is animated as a discrete type" + ); + done(); + }); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/outline-019.html b/testing/web-platform/tests/css/css-ui/outline-019.html new file mode 100644 index 0000000000..3687bf791c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-019.html @@ -0,0 +1,31 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline currentColor inheritance</title> + <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net"> + <meta name=flags content=""> + <meta name=assert content="currentColor is inherited as a keyword"> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> + <link rel=help href="https://drafts.csswg.org/css-color-4/#resolving-color-values"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<style> +body > div { + color: red; + outline-color: currentcolor; + display: table-cell; /*BFC*/ +} + +div > div { + width: 0; height: 0; + margin-left: 50px; + margin-top: 50px; + color: green; + outline-color: inherit; + outline-width: 50px; + outline-style: solid; +} +</style> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div><div></div></div> + diff --git a/testing/web-platform/tests/css/css-ui/outline-020.html b/testing/web-platform/tests/css/css-ui/outline-020.html new file mode 100644 index 0000000000..457f10ad65 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-020.html @@ -0,0 +1,23 @@ +<!doctype html> +<html lang=en> + <meta charset=utf-8> + <title>CSS-UI test: outline block with outline inline</title> + <link rel="author" title="Aleks Totic <atotic@chromium.org>" href="atotic@"> + <meta name=assert content=""> + <link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> + <link rel="match" href="./reference/outline-020-ref.html"> +<style> +#container { + outline: green solid 5px; + width: 100px; + height: 30px; + padding: 5px; +} +#target { + outline: blue solid 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/outline-021.html b/testing/web-platform/tests/css/css-ui/outline-021.html new file mode 100644 index 0000000000..02e96ea9a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-021.html @@ -0,0 +1,9 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS-UI test: outline works on button inputs</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel=help href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="mismatch" href="./reference/outline-021-notref.html"> + +<input type="submit" style="outline: 10px solid blue"> diff --git a/testing/web-platform/tests/css/css-ui/outline-022.html b/testing/web-platform/tests/css/css-ui/outline-022.html new file mode 100644 index 0000000000..5da549691e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-022.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>CSS-UI test: outline works on nested spans</title> +<link rel="author" href="mailto:atotic@google.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +body { + --outline-width: 10px; + --square-width: 80px; +} +#container { + width: var(--square-width); + padding: var(--outline-width); +} +#target { + font-family: Ahem; + font-size: var(--square-width); + outline: solid var(--outline-width) green; + color: green; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id="container"> + <span> + <span> + <span id="target">x</span> + </span> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-023.html b/testing/web-platform/tests/css/css-ui/outline-023.html new file mode 100644 index 0000000000..a6f35351ce --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-023.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<title>Tests that a paint clip, clips an outline.</title> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline"> +<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html#painting-order"> +<p>Test passes if there is a filled green square.</p> +<div style="overflow: hidden; width: 100px; height: 100px; background: green;"> + <div style="display: block; width: 110px; height: 110px; margin: -5px; outline: solid blue 3px;"></div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-024.html b/testing/web-platform/tests/css/css-ui/outline-024.html new file mode 100644 index 0000000000..38742d8203 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-024.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: outline with padding</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="match" href="reference/outline-024-ref.html"> +<meta name="assert" content="Test checks that 'auto' outline works as expected in an element with padding and overflowing inline block descendant."> +<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="display: inline-block; font: 50px/1 Ahem; color: green;">XX</div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-025.html b/testing/web-platform/tests/css/css-ui/outline-025.html new file mode 100644 index 0000000000..dc679054e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-025.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: outline with padding</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="match" href="reference/outline-024-ref.html"> +<meta name="assert" content="Test checks that 'auto' outline works as expected in an element with padding and overflowing inline descendant."> +<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="display: inline; font: 50px/1 Ahem; color: green;">XX</div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-026.html b/testing/web-platform/tests/css/css-ui/outline-026.html new file mode 100644 index 0000000000..94aa415e74 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-026.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: outline with padding</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="match" href="reference/outline-024-ref.html"> +<meta name="assert" content="Test checks that 'auto' outline works as expected in an element with padding and overflowing SPAN descendant."> +<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;"> + <span style="font: 50px/1 Ahem; color: green;">XX</span> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-027.html b/testing/web-platform/tests/css/css-ui/outline-027.html new file mode 100644 index 0000000000..e5ffc7527f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-027.html @@ -0,0 +1,171 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: outline with padding</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="match" href="reference/outline-027-ref.html"> +<meta name="assert" content="Test checks that 'auto' outline works as expected in an element with different paddings and inline descendant."> +<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 > span > div { + color: lime; +} + +.inline-block-text > .outline-container > span > div { + display: inline-block; +} + +.inline-text > .outline-container > span > div { + display: inline; +} +</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;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-right: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-top: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-bottom: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 0px 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 5px 0px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 5px;"> + <span><div>XX</div></span> + </div> + </div> + <div> + <div class="outline-container" style="padding-left: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-right: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-top: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-bottom: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 0px 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 20px 0px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 20px;"> + <span><div>XX</div></span> + </div> + </div> + <div class="inline-block-text"> + <div class="outline-container" style="padding-left: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-right: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-top: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-bottom: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 0px 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 5px 0px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 5px;"> + <span><div>XX</div></span> + </div> + </div> + <div class="inline-block-text"> + <div class="outline-container" style="padding-left: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-right: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-top: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-bottom: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 0px 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 20px 0px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 20px;"> + <span><div>XX</div></span> + </div> + </div> + <div class="inline-text"> + <div class="outline-container" style="padding-left: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-right: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-top: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-bottom: 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 0px 5px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 5px 0px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 5px;"> + <span><div>XX</div></span> + </div> + </div> + <div class="inline-text"> + <div class="outline-container" style="padding-left: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-right: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-top: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding-bottom: 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 0px 20px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 20px 0px;"> + <span><div>XX</div></span> + </div> + <div class="outline-container" style="padding: 20px;"> + <span><div>XX</div></span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-028.html b/testing/web-platform/tests/css/css-ui/outline-028.html new file mode 100644 index 0000000000..416947d16d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-028.html @@ -0,0 +1,165 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface: outline with floatted descendants</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="match" href="reference/outline-028-ref.html"> +<meta name="assert" content="Test checks that 'auto' outline works as expected in an element with floatted descendants with different margins and paddings."> +<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; +} + +.float { + float: left; + 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"> + <div class="float">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-left: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-right: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-top: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-bottom: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin: 0px 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin: 5px 0px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin: 5px;">X</div> + <span>X</span> + </div> + </div> + <div> + <div class="outline-container"> + <div class="float">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-left: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-right: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-top: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin-bottom: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin: 0px 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin: 20px 0px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="margin: 20px;">X</div> + <span>X</span> + </div> + </div> + <div> + <div class="outline-container"> + <div class="float">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-left: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-right: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-top: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-bottom: 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding: 0px 5px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding: 5px 0px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding: 5px;">X</div> + <span>X</span> + </div> + </div> + <div> + <div class="outline-container"> + <div class="float">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-left: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-right: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-top: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding-bottom: 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding: 0px 20px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding: 20px 0px;">X</div> + <span>X</span> + </div> + <div class="outline-container"> + <div class="float" style="padding: 20px;">X</div> + <span>X</span> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-auto-dynamic-change-ref.html b/testing/web-platform/tests/css/css-ui/outline-auto-dynamic-change-ref.html new file mode 100644 index 0000000000..9128eae260 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-auto-dynamic-change-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> +div { + position: absolute; + top: 10px; + left: 10px; + width: 100px; + height: 100px; + outline-width: 0; + outline-offset: 5px; + outline-color: black; + outline-style: auto; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-ui/outline-auto-dynamic-change.html b/testing/web-platform/tests/css/css-ui/outline-auto-dynamic-change.html new file mode 100644 index 0000000000..f58a14abe7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-auto-dynamic-change.html @@ -0,0 +1,29 @@ +<!doctype html> +<html class="reftest-wait"> +<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://drafts.csswg.org/css-ui/#outline-style"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1759749"> +<link rel="match" href="outline-auto-dynamic-change-ref.html"> +<title>Dynamic change to outline-style: auto works even if effective outline-width is zero</title> +<style> +div { + position: absolute; + top: 10px; + left: 10px; + width: 100px; + height: 100px; + outline-width: 0; + outline-offset: 5px; + outline-color: black; + outline-style: none; +} +</style> +<div></div> +<script> +document.addEventListener("TestRendered", function() { + document.querySelector("div").style.outlineStyle = "auto"; + document.documentElement.className = ""; +}); +</script> diff --git a/testing/web-platform/tests/css/css-ui/outline-color-001.html b/testing/web-platform/tests/css/css-ui/outline-color-001.html new file mode 100644 index 0000000000..82824e47bf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-color-001.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline-color - inherit (basic) </title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="help" title="7.4. 'outline-color' property" href="http://www.w3.org/TR/css3-ui/#outline-color"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that the color of sub element outline is same as the color of parent element outline when outline-color set inherit"> +<style> + #container { + background-color: red; + height: 100px; + width: 100px; + } + #parent { + background-color: red; + height: 80px; + left: 10px; + outline-color: green; + outline-style: solid; + outline-width: 10px; + position: relative; + top: 10px; + width: 80px; + } + #child { + background-color: green; + height: 60px; + left: 10px; + outline-color: inherit; + outline-style: solid; + outline-width: 10px; + position: relative; + top: 10px; + width: 60px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="parent"> + <div id="child"></div> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/outline-negative-offset-composited-scroll.html b/testing/web-platform/tests/css/css-ui/outline-negative-offset-composited-scroll.html new file mode 100644 index 0000000000..4abde0e804 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-negative-offset-composited-scroll.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS-UI test: outline-offset width negative values on scroller</title> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<link rel=help href="https://drafts.csswg.org/css-ui-3/#outline-props"> +<style> +#container { + width: 100px; + height: 100px; + background: red; + will-change: transform; + overflow: scroll; + outline: solid 50px green; + outline-offset: -50px; +} +#child { + position: relative; + will-change: transform; + height: 1000px; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="container"> + <div id="child"></div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-offset-001.html b/testing/web-platform/tests/css/css-ui/outline-offset-001.html new file mode 100644 index 0000000000..8f82eb6480 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-offset-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline-offset - length (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="help" title="7.5. 'outline-offset' property" href="http://www.w3.org/TR/css3-ui/#outline-offset"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Test checks that the outline-offset keeps spacing between outline and element content"> +<style> + #container { + background-color: green; + border: 20px red solid; + height: 60px; + width: 60px; + } + #test { + background-color: green; + height: 20px; + left: 20px; + outline: 20px green solid; + outline-offset: 20px; + position: relative; + top: 20px; + width: 20px; + } +</style> +<body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div id="test"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/outline-offset-table-001-notref.html b/testing/web-platform/tests/css/css-ui/outline-offset-table-001-notref.html new file mode 100644 index 0000000000..aafa2b053c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-offset-table-001-notref.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Rest Reference</title> +<style> +table { + outline: 1px solid blue; + outline-offset: 10px; +} +</style> +<table> + Some content +</table> diff --git a/testing/web-platform/tests/css/css-ui/outline-offset-table-001.html b/testing/web-platform/tests/css/css-ui/outline-offset-table-001.html new file mode 100644 index 0000000000..4b6f46949b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-offset-table-001.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>outline-offset applies to tables</title> +<link rel="help" href="https://drafts.csswg.org/css-ui/#propdef-outline"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1603049"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="mismatch" href="outline-offset-table-001-notref.html"> +<style> +table { outline: 1px solid blue } +</style> +<table> + Some content +</table> diff --git a/testing/web-platform/tests/css/css-ui/outline-offset.html b/testing/web-platform/tests/css/css-ui/outline-offset.html new file mode 100644 index 0000000000..5dee28e3b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-offset.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> + <title>ttwf-reftest-outline-offset-ref</title> + <link rel="author" title="jy-jeung" href="mailto:kein119@naver.com"> + <link rel="help" href="http://www.w3.org/TR/css3-ui/#outline-offset"> + <link rel="match" href="reference/outline-offset.html"> + <style type="text/css"> + div + { + display:inline-block; + outline:2px solid red; + } + div span + { + display:block; + width:180px; + margin:10px; + height:80px; + border:2px solid green; + } + </style> +</head> +<body> + <p>PASS if there a space between the border.</p> + <div> + <span></span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/outline-style-011.html b/testing/web-platform/tests/css/css-ui/outline-style-011.html new file mode 100644 index 0000000000..a4981ed161 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-style-011.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline-style - dotted (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3. 'outline-style' property" href="http://www.w3.org/TR/css3-ui/#outline-style"> +<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#value-def-border-style"> +<link rel="match" href="reference/outline-style-011-ref.html"> +<meta name="assert" content="Test checks that the outline style is dotted when outline-style set dotted"> +<style> + #test { + height: 100px; + margin: 30px; + outline-color: green; + outline-style: dotted; + outline-width: 4px; + 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/outline-style-012.html b/testing/web-platform/tests/css/css-ui/outline-style-012.html new file mode 100644 index 0000000000..30b7f95548 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-style-012.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline-style - inherit (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3. 'outline-style' property" href="http://www.w3.org/TR/css3-ui/#outline-style"> +<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#value-def-border-style"> +<link rel="match" href="reference/outline-style-012-ref.html"> +<meta name="assert" content="Test checks that the sub element outline style is same as parent element outline style when outline-style set inherit"> +<style> + #parent { + height: 110px; + margin: 30px; + outline-color: blue; + outline-style: dotted; + outline-width: 4px; + padding: 20px; + width: 110px; + } + #child { + height: 110px; + outline-color: green; + outline-style: inherit; + outline-width: 4px; + 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/outline-style-013.html b/testing/web-platform/tests/css/css-ui/outline-style-013.html new file mode 100644 index 0000000000..3df338f99d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-style-013.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline-style - dashed (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3. 'outline-style' property" href="http://www.w3.org/TR/css3-ui/#outline-style"> +<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#value-def-border-style"> +<link rel="match" href="reference/outline-style-013-ref.html"> +<meta name="assert" content="Test checks that the outline style is dashed when outline-style set dashed"> +<style> + #test { + height: 150px; + margin: 30px; + outline-color: green; + outline-style: dashed; + outline-width: 2px; + 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/outline-style-014.html b/testing/web-platform/tests/css/css-ui/outline-style-014.html new file mode 100644 index 0000000000..52440db87d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-style-014.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: outline-style - double (basic)</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="7.3. 'outline-style' property" href="http://www.w3.org/TR/css3-ui/#outline-style"> +<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#value-def-border-style"> +<link rel="match" href="reference/outline-style-014-ref.html"> +<meta name="assert" content="Test checks that the outline style is two solid lines when outline-style set double"> +<style> + #test { + height: 150px; + margin: 30px; + outline-color: green; + outline-style: double; + outline-width: 4px; + 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/outline-style-inherit-ref.html b/testing/web-platform/tests/css/css-ui/outline-style-inherit-ref.html new file mode 100644 index 0000000000..e66e037ed0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-style-inherit-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + div { width: 100px; height: 100px } +</style> +<div style="outline-style: solid; outline-color: green"></div> diff --git a/testing/web-platform/tests/css/css-ui/outline-style-inherit.html b/testing/web-platform/tests/css/css-ui/outline-style-inherit.html new file mode 100644 index 0000000000..7a82bc790f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-style-inherit.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>Inheriting outline-style should compute the right outline-width</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#outline-width"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#outline-style"> +<link rel="match" href="outline-style-inherit-ref.html"> +<style> + div { width: 100px; height: 100px } +</style> +<div style="outline-style: solid; outline-color: transparent"> + <div style="outline-style: inherit; outline-color: green"></div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/outline-with-001-crash.html b/testing/web-platform/tests/css/css-ui/outline-with-001-crash.html new file mode 100644 index 0000000000..d46ba8080c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-with-001-crash.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: outline-width very big value</title> +<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-width"> +<div style="outline: solid black 100000000000000000px;"></div> diff --git a/testing/web-platform/tests/css/css-ui/outline-with-padding-001.html b/testing/web-platform/tests/css/css-ui/outline-with-padding-001.html new file mode 100644 index 0000000000..716491ca25 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/outline-with-padding-001.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Outline with padding</title> +<link rel="match" href="reference/outline-with-padding-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-props"> +<link rel="help" href="https://crbug.com/1048070"> +<link rel="author" href="mailto:kojii@chromium.org"> +<meta name="assert" content="Tests the rendering of outline applied to a box with padding"> +<style> +inline-block { + display: inline-block; + width: 65px; + color: transparent; + background: orange; +} +</style> +<body> +<div style="display: flex"> + <span style="padding-left: 99px; outline: auto"> + <span> + <inline-block>Previous</inline-block> + </span> + </span> +</div> + +<div style="width: 50px; padding-left: 99px; outline: auto"> + <span> + <inline-block>Previous</inline-block> + </span> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/parsing/box-sizing-computed.html b/testing/web-platform/tests/css/css-ui/parsing/box-sizing-computed.html new file mode 100644 index 0000000000..9b7f1d1c42 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/box-sizing-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().boxSizing</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<meta name="assert" content="box-sizing computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("box-sizing", "content-box"); +test_computed_value("box-sizing", "border-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/box-sizing-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/box-sizing-invalid.html new file mode 100644 index 0000000000..984475450a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/box-sizing-invalid.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing box-sizing with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<meta name="assert" content="box-sizing supports only the grammar 'content-box | border-box'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("box-sizing", "auto"); +test_invalid_value("box-sizing", "content-box border-box"); +test_invalid_value("box-sizing", "fill-box"); +test_invalid_value("box-sizing", "margin-box"); +test_invalid_value("box-sizing", "padding-box"); +test_invalid_value("box-sizing", "view-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/box-sizing-valid.html b/testing/web-platform/tests/css/css-ui/parsing/box-sizing-valid.html new file mode 100644 index 0000000000..3dfa4f9794 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/box-sizing-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing box-sizing with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#box-sizing"> +<meta name="assert" content="box-sizing supports the full grammar 'content-box | border-box'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("box-sizing", "content-box"); +test_valid_value("box-sizing", "border-box"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/caret-color-computed.html b/testing/web-platform/tests/css/css-ui/parsing/caret-color-computed.html new file mode 100644 index 0000000000..0428c783f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/caret-color-computed.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().caretColor</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#caret-color"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: blue; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; +const currentColor = "rgb(0, 0, 255)"; +test_computed_value("caret-color", "auto", currentColor); +test_computed_value("caret-color", "currentColor", currentColor); +test_computed_value("caret-color", "red", "rgb(255, 0, 0)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/caret-color-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/caret-color-invalid.html new file mode 100644 index 0000000000..a59b01ec2b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/caret-color-invalid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing caret-color with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#caret-color"> +<meta name="assert" content="caret-color supports only the grammar 'auto | <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("caret-color", "none"); +test_invalid_value("caret-color", "invert"); +test_invalid_value("caret-color", "50%"); +test_invalid_value("caret-color", "red green"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/caret-color-valid.html b/testing/web-platform/tests/css/css-ui/parsing/caret-color-valid.html new file mode 100644 index 0000000000..dd35cf8e90 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/caret-color-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing caret-color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#caret-color"> +<meta name="assert" content="caret-color supports the full grammar 'auto | <color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("caret-color", "auto"); +test_valid_value("caret-color", "rgba(10, 20, 30, 0.4)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/cursor-computed.html b/testing/web-platform/tests/css/css-ui/parsing/cursor-computed.html new file mode 100644 index 0000000000..76b3201016 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/cursor-computed.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().cursor</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#cursor"> +<meta name="assert" content="cursor computed value is as specified for keywords."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("cursor", "auto"); +test_computed_value("cursor", "default"); +test_computed_value("cursor", "none"); +test_computed_value("cursor", "context-menu"); +test_computed_value("cursor", "help"); +test_computed_value("cursor", "pointer"); +test_computed_value("cursor", "progress"); +test_computed_value("cursor", "wait"); +test_computed_value("cursor", "cell"); +test_computed_value("cursor", "crosshair"); +test_computed_value("cursor", "text"); +test_computed_value("cursor", "vertical-text"); +test_computed_value("cursor", "alias"); +test_computed_value("cursor", "copy"); +test_computed_value("cursor", "move"); +test_computed_value("cursor", "no-drop"); +test_computed_value("cursor", "not-allowed"); +test_computed_value("cursor", "grab"); +test_computed_value("cursor", "grabbing"); +test_computed_value("cursor", "e-resize"); +test_computed_value("cursor", "n-resize"); +test_computed_value("cursor", "ne-resize"); +test_computed_value("cursor", "nw-resize"); +test_computed_value("cursor", "s-resize"); +test_computed_value("cursor", "se-resize"); +test_computed_value("cursor", "sw-resize"); +test_computed_value("cursor", "w-resize"); +test_computed_value("cursor", "ew-resize"); +test_computed_value("cursor", "ns-resize"); +test_computed_value("cursor", "nesw-resize"); +test_computed_value("cursor", "nwse-resize"); +test_computed_value("cursor", "col-resize"); +test_computed_value("cursor", "row-resize"); +test_computed_value("cursor", "all-scroll"); +test_computed_value("cursor", "zoom-in"); +test_computed_value("cursor", "zoom-out"); + +// Not yet tested: // [ [<url> [<x> <y>]?,]* +// "relative URLs converted to absolute" +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/cursor-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/cursor-invalid.html new file mode 100644 index 0000000000..b7928c85d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/cursor-invalid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing cursor with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#cursor"> +<meta name="assert" content="cursor supports only the grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("cursor", "en-resize"); +test_invalid_value("cursor", 'url("https://example.com/") alias'); +test_invalid_value("cursor", '1 2 url("https://example.com/"), copy'); +test_invalid_value("cursor", 'url("https://example.com/"), url("https://example.com/") 3, move'); + +test_invalid_value("cursor", 'url("https://example.com/") 1px 2px, copy'); +test_invalid_value("cursor", 'url("https://example.com/"), url("https://example.com/") 3% 4%, move'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/cursor-valid.html b/testing/web-platform/tests/css/css-ui/parsing/cursor-valid.html new file mode 100644 index 0000000000..a31a7aed51 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/cursor-valid.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: parsing cursor with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#cursor"> +<meta name="assert" content="cursor supports the full required grammar."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("cursor", "auto"); +test_valid_value("cursor", "default"); +test_valid_value("cursor", "none"); +test_valid_value("cursor", "context-menu"); +test_valid_value("cursor", "help"); +test_valid_value("cursor", "pointer"); +test_valid_value("cursor", "progress"); +test_valid_value("cursor", "wait"); +test_valid_value("cursor", "cell"); +test_valid_value("cursor", "crosshair"); +test_valid_value("cursor", "text"); +test_valid_value("cursor", "vertical-text"); +test_valid_value("cursor", "alias"); +test_valid_value("cursor", "copy"); +test_valid_value("cursor", "move"); +test_valid_value("cursor", "no-drop"); +test_valid_value("cursor", "not-allowed"); +test_valid_value("cursor", "grab"); +test_valid_value("cursor", "grabbing"); +test_valid_value("cursor", "e-resize"); +test_valid_value("cursor", "n-resize"); +test_valid_value("cursor", "ne-resize"); +test_valid_value("cursor", "nw-resize"); +test_valid_value("cursor", "s-resize"); +test_valid_value("cursor", "se-resize"); +test_valid_value("cursor", "sw-resize"); +test_valid_value("cursor", "w-resize"); +test_valid_value("cursor", "ew-resize"); +test_valid_value("cursor", "ns-resize"); +test_valid_value("cursor", "nesw-resize"); +test_valid_value("cursor", "nwse-resize"); +test_valid_value("cursor", "col-resize"); +test_valid_value("cursor", "row-resize"); +test_valid_value("cursor", "all-scroll"); +test_valid_value("cursor", "zoom-in"); +test_valid_value("cursor", "zoom-out"); + +test_valid_value( + "cursor", + 'url("https://example.com/"), alias', + [ + 'url("https://example.com/"), alias', + 'url(https://example.com/), alias' + ] +); + +test_valid_value( + "cursor", + 'url("https://example.com/") 1 calc(2 + 0), copy', + [ + 'url("https://example.com/") 1 calc(2), copy', + 'url("https://example.com/") 1 2, copy', + 'url(https://example.com/) 1 2, copy' + ] +); + +test_valid_value( + "cursor", + 'url("https://example.com/"), url("https://example.com/") 3 -4, move', + [ + 'url("https://example.com/"), url("https://example.com/") 3 -4, move', + 'url(https://example.com/), url(https://example.com/) 3 -4, move' + ] +); + +test_valid_value( + "cursor", + 'url("https://example.com/") 5 6, grab', + [ + 'url("https://example.com/") 5 6, grab', + 'url(https://example.com/) 5 6, grab' + ] +); + +test_valid_value( + "cursor", + 'image-set("https://example.com/" 1x) 5 6, grab', + [ + 'image-set(url("https://example.com/") 1x) 5 6, grab', + 'image-set(url(https://example.com/) 1x) 5 6, grab' + ] +); + +test_valid_value( + "cursor", + 'image-set("https://example.com/" 1x, "https://example.com/highres" 2x) 5 6, grab', + [ + 'image-set(url("https://example.com/") 1x, url("https://example.com/highres") 2x) 5 6, grab', + 'image-set(url(https://example.com/) 1x, url(https://example.com/highres) 2x) 5 6, grab' + ] +); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-color-computed.html b/testing/web-platform/tests/css/css-ui/parsing/outline-color-computed.html new file mode 100644 index 0000000000..b9aab1d230 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-color-computed.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().outlineColor</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-color"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<style> + #target { + color: blue; + } +</style> +</head> +<body> +<div id="target"></div> +<script> +'use strict'; +const currentColor = "rgb(0, 0, 255)"; +test_computed_value("outline-color", "currentColor", currentColor); +test_computed_value("outline-color", "red", "rgb(255, 0, 0)"); + +test(() => { + const target = document.getElementById('target'); + target.style.outlineColor = 'invert'; + if (target.style.outlineColor === 'invert') + assert_equals(getComputedStyle(target).outlineColor, 'invert'); +}, 'invert, if supported, computes to invert'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-color-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-color-invalid.html new file mode 100644 index 0000000000..2b910e8030 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-color-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline-color with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-color"> +<meta name="assert" content="outline-color supports only the grammar '<color> | invert'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("outline-color", "auto"); +test_invalid_value("outline-color", "none"); +test_invalid_value("outline-color", "50%"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-color-valid-mandatory.html b/testing/web-platform/tests/css/css-ui/parsing/outline-color-valid-mandatory.html new file mode 100644 index 0000000000..2af0665824 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-color-valid-mandatory.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline-color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-color"> +<meta name="assert" content="outline-color supports '<color>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("outline-color", "rgba(10, 20, 30, 0.4)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-color-valid-optional.html b/testing/web-platform/tests/css/css-ui/parsing/outline-color-valid-optional.html new file mode 100644 index 0000000000..7993299098 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-color-valid-optional.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline-color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-color"> +<meta name="assert" content="outline-color supports 'invert'."> +<meta name="flags" content="may"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Conformant UAs may ignore the invert value on platforms that do not support color inversion of the pixels on the screen. +test_valid_value("outline-color", "invert"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-invalid.html new file mode 100644 index 0000000000..c43cc3c643 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline"> +<meta name="assert" content="outline supports only the grammar '<outline-color> || <outline> || <outline>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("outline", "invert solid rgba(10, 20, 30, 0.4)"); +test_invalid_value("outline", "double invert groove"); +test_invalid_value("outline", "thin outset thick"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-offset-computed.html b/testing/web-platform/tests/css/css-ui/parsing/outline-offset-computed.html new file mode 100644 index 0000000000..39da9f7349 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-offset-computed.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().outlineOffset</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset"> +<meta name="assert" content="outline-offset computed value is absolute length."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<style> + #target { + font-size: 40px; + } +</style> +<div id="target"></div> +<script> +test_computed_value("outline-offset", "2.5px"); +test_computed_value("outline-offset", "10px"); +test_computed_value("outline-offset", "0.5em", "20px"); +test_computed_value("outline-offset", "calc(10px + 0.5em)", "30px"); +test_computed_value("outline-offset", "calc(10px - 0.5em)", "-10px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-offset-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-offset-invalid.html new file mode 100644 index 0000000000..3ff26e35ae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-offset-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline-offset with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset"> +<meta name="assert" content="outline-offset supports only the grammar '<length>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("outline-offset", "auto"); +test_invalid_value("outline-offset", "1%"); +test_invalid_value("outline-offset", "2px 3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-offset-valid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-offset-valid.html new file mode 100644 index 0000000000..75fc7e60bd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-offset-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline-offset with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset"> +<meta name="assert" content="outline-offset supports the full grammar '<length>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("outline-offset", "0", "0px"); +test_valid_value("outline-offset", "1px"); +test_valid_value("outline-offset", "2em"); +test_valid_value("outline-offset", "calc(3rem + 4vw)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-shorthand.html b/testing/web-platform/tests/css/css-ui/parsing/outline-shorthand.html new file mode 100644 index 0000000000..01239e199e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-shorthand.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: outline sets longhands</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline"> +<link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values"> +<meta name="assert" content="outline supports the full grammar '<outline-color> || <outline> || <outline>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/shorthand-testcommon.js"></script> +</head> +<body> +<script> +test_shorthand_value('outline', '3px ridge blue', { + 'outline-color': 'blue', + 'outline-style': 'ridge', + 'outline-width': '3px' +}); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-style-computed.html b/testing/web-platform/tests/css/css-ui/parsing/outline-style-computed.html new file mode 100644 index 0000000000..3824b8d598 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-style-computed.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().outlineStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-style"> +<meta name="assert" content="outline-style computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("outline-style", "auto"); + +test_computed_value("outline-style", "none"); +test_computed_value("outline-style", "dotted"); +test_computed_value("outline-style", "dashed"); +test_computed_value("outline-style", "solid"); +test_computed_value("outline-style", "double"); +test_computed_value("outline-style", "groove"); +test_computed_value("outline-style", "ridge"); +test_computed_value("outline-style", "inset"); +test_computed_value("outline-style", "outset"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-style-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-style-invalid.html new file mode 100644 index 0000000000..a659b68a55 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-style-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: parsing outline-style with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-style"> +<meta name="assert" content="outline-style supports only the grammar 'auto | <outline-line-style>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("outline-style", "hidden"); +test_invalid_value("outline-style", "dotted dashed"); +test_invalid_value("outline-style", "solid double groove ridge"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-style-valid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-style-valid.html new file mode 100644 index 0000000000..dcaa2d5e7d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-style-valid.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: parsing outline-style with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-style"> +<meta name="assert" content="outline-style supports the full grammar 'auto | <outline-line-style>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("outline-style", "auto"); + +test_valid_value("outline-style", "none"); +test_valid_value("outline-style", "dotted"); +test_valid_value("outline-style", "dashed"); +test_valid_value("outline-style", "solid"); +test_valid_value("outline-style", "double"); +test_valid_value("outline-style", "groove"); +test_valid_value("outline-style", "ridge"); +test_valid_value("outline-style", "inset"); +test_valid_value("outline-style", "outset"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-valid-mandatory.html b/testing/web-platform/tests/css/css-ui/parsing/outline-valid-mandatory.html new file mode 100644 index 0000000000..94d87cb112 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-valid-mandatory.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline"> +<link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values"> +<meta name="assert" content="outline supports the full grammar '<outline-color> || <outline> || <outline>'."> +<meta name="assert" content="outline serializes in canonical order, with shortest possible serialization."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("outline", "rgba(10, 20, 30, 0.4)"); + +test_valid_value("outline", "auto"); +test_valid_value("outline", "none", ["invert", "currentcolor", "none", "medium"]); +test_valid_value("outline", "dotted"); +test_valid_value("outline", "dashed"); +test_valid_value("outline", "solid"); +test_valid_value("outline", "double"); +test_valid_value("outline", "groove"); +test_valid_value("outline", "ridge"); +test_valid_value("outline", "inset"); +test_valid_value("outline", "outset"); + +test_valid_value("outline", "0", "0px"); +test_valid_value("outline", "1px"); +test_valid_value("outline", "calc(2em + 3ex)"); +test_valid_value("outline", "thin"); +test_valid_value("outline", "medium", ["invert", "currentcolor", "none", "medium"]); +test_valid_value("outline", "thick"); + +test_valid_value("outline", "dashed thin"); +test_valid_value("outline", "medium rgba(10, 20, 30, 0.4)", ["rgba(10, 20, 30, 0.4) medium", "rgba(10, 20, 30, 0.4)"]); + +test_valid_value("outline", "3px ridge rgba(10, 20, 30, 0.4)", "rgba(10, 20, 30, 0.4) ridge 3px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-valid-optional.html b/testing/web-platform/tests/css/css-ui/parsing/outline-valid-optional.html new file mode 100644 index 0000000000..8150ffa208 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-valid-optional.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing outline with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline"> +<link rel="help" href="https://drafts.csswg.org/cssom/#serializing-css-values"> +<meta name="assert" content="outline supports the full grammar '<outline-color> || <outline> || <outline>'."> +<meta name="assert" content="outline serializes in canonical order, with shortest possible serialization."> +<meta name="flags" content="may"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +// Conformant UAs may ignore the invert value on platforms that do not support color inversion of the pixels on the screen. +test_valid_value("outline", "invert"); +test_valid_value("outline", "invert dotted 1px"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-width-computed.html b/testing/web-platform/tests/css/css-ui/parsing/outline-width-computed.html new file mode 100644 index 0000000000..ecb719bd75 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-width-computed.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().outlineWidth</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-width"> +<meta name="assert" content="outline-width computed value is absolute length, 0 if the outline style is none."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<style> + #target { + font-size: 40px; + + border-style: dotted; /* Avoid border-*-width computed style 0 */ + border-top-width: thin; + border-right-width: medium; + border-bottom-width: thick; + + outline-style: dotted; /* Avoid outline-width computed style 0 */ + } +</style> +<div id="target"></div> +<script> +test_computed_value("outline-width", "2.5px", "2px"); +test_computed_value("outline-width", "10px"); +test_computed_value("outline-width", "0.5em", "20px"); +test_computed_value("outline-width", "calc(10px + 0.5em)", "30px"); +test_computed_value("outline-width", "calc(10px - 0.5em)", "0px"); + +test_computed_value("outline-width", "thin", getComputedStyle(target).borderTopWidth); +test_computed_value("outline-width", "medium", getComputedStyle(target).borderRightWidth); +test_computed_value("outline-width", "thick", getComputedStyle(target).borderBottomWidth); + +test(() => { + target.style['outline-width'] = '10px'; + target.style['outline-style'] = 'none'; + assert_equals(getComputedStyle(target)['outline-width'], '0px'); + target.style['outline-style'] = ''; +}, 'outline-width is 0 when outline-style is none'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-width-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-width-invalid.html new file mode 100644 index 0000000000..6008fffd94 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-width-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: parsing outline-width with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-width"> +<meta name="assert" content="outline-width supports only the grammar '<border-width>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("outline-width", "auto"); +test_invalid_value("outline-width", "1%"); +test_invalid_value("outline-width", "thin medium thick medium thin"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/outline-width-valid.html b/testing/web-platform/tests/css/css-ui/parsing/outline-width-valid.html new file mode 100644 index 0000000000..2415e005de --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/outline-width-valid.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: parsing outline-width with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#outline-width"> +<meta name="assert" content="outline-width supports the full grammar '<border-width>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("outline-width", "0", "0px"); +test_valid_value("outline-width", "1px"); +test_valid_value("outline-width", "2em"); +test_valid_value("outline-width", "calc(2em + 3ex)"); +test_valid_value("outline-width", "thin"); +test_valid_value("outline-width", "medium"); +test_valid_value("outline-width", "thick"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/resize-computed.html b/testing/web-platform/tests/css/css-ui/parsing/resize-computed.html new file mode 100644 index 0000000000..c4111f7aeb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/resize-computed.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().resize</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="assert" content="resize computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("resize", "none"); +test_computed_value("resize", "both"); +test_computed_value("resize", "horizontal"); +test_computed_value("resize", "vertical"); +test_pseudo_computed_value("::before", "resize", "both"); +test_pseudo_computed_value("::after", "resize", "vertical"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/resize-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/resize-invalid.html new file mode 100644 index 0000000000..7f9698f7aa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/resize-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing resize with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="assert" content="resize supports only the grammar 'none | both | horizontal | vertical'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("resize", "auto"); +test_invalid_value("resize", "horizontal vertical"); +test_invalid_value("resize", "both 0"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/resize-valid.html b/testing/web-platform/tests/css/css-ui/parsing/resize-valid.html new file mode 100644 index 0000000000..d50df443e0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/resize-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing resize with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="assert" content="resize supports the full grammar 'none | both | horizontal | vertical'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("resize", "none"); +test_valid_value("resize", "both"); +test_valid_value("resize", "horizontal"); +test_valid_value("resize", "vertical"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/text-overflow-computed.html b/testing/web-platform/tests/css/css-ui/parsing/text-overflow-computed.html new file mode 100644 index 0000000000..701506e617 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/text-overflow-computed.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: getComputedStyle().textOverflow</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#text-overflow"> +<meta name="assert" content="text-overflow computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("text-overflow", "clip"); +test_computed_value("text-overflow", "ellipsis"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/text-overflow-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/text-overflow-invalid.html new file mode 100644 index 0000000000..aa4169c146 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/text-overflow-invalid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing text-overflow with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#text-overflow"> +<meta name="assert" content="text-overflow supports only the grammar 'clip | ellipsis'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("text-overflow", "auto"); +test_invalid_value("text-overflow", "clip ellipsis clip"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/text-overflow-valid.html b/testing/web-platform/tests/css/css-ui/parsing/text-overflow-valid.html new file mode 100644 index 0000000000..5d40b6839d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/text-overflow-valid.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 3: parsing text-overflow with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#text-overflow"> +<meta name="assert" content="text-overflow supports the full grammar 'clip | ellipsis'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("text-overflow", "clip"); +test_valid_value("text-overflow", "ellipsis"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/user-select-computed.html b/testing/web-platform/tests/css/css-ui/parsing/user-select-computed.html new file mode 100644 index 0000000000..ef8691a076 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/user-select-computed.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: getComputedStyle().userSelect</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection"> +<meta name="assert" content="user-select computed value is as specified."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("user-select", "auto"); +test_computed_value("user-select", "text"); +test_computed_value("user-select", "none"); +test_computed_value("user-select", "contain"); +test_computed_value("user-select", "all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/user-select-invalid.html b/testing/web-platform/tests/css/css-ui/parsing/user-select-invalid.html new file mode 100644 index 0000000000..7fe7feeca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/user-select-invalid.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: parsing user-select with invalid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection"> +<meta name="assert" content="user-select supports only the grammar 'auto | text | none | contain | all'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("user-select", "visible"); +test_invalid_value("user-select", "text contain"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/parsing/user-select-valid.html b/testing/web-platform/tests/css/css-ui/parsing/user-select-valid.html new file mode 100644 index 0000000000..e78ac7ce2b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/parsing/user-select-valid.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS UI Level 4: parsing user-select with valid values</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection"> +<meta name="assert" content="user-select supports the full grammar 'auto | text | none | contain | all'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("user-select", "auto"); +test_valid_value("user-select", "text"); +test_valid_value("user-select", "none"); +test_valid_value("user-select", "contain"); +test_valid_value("user-select", "all"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-001-ref.html b/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-001-ref.html new file mode 100644 index 0000000000..096eb16229 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-001-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<html> +<title>CSS Test Reference: differences in pointer-events shouldn't cause overlay scrollbars to appear</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> + +<style> + +#scroll { + width: 200px; + height: 200px; + overflow: auto; +} + +#big { + width: 500px; + height: 500px; +} + +</style> + + +<div id="scroll"> + <div id="big"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-001.html b/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-001.html new file mode 100644 index 0000000000..fc438f7bea --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<html> +<title>CSS Test: differences in pointer-events shouldn't cause overlay scrollbars to appear</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#pointer-events-control"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414142"> +<meta name="assert" content="Differences in pointer-events shouldn't cause overlay scrollbars to appear. (I concede this could perhaps be allowed by the wording in the spec that makes basically everything related to scrollbar rendering UA-defined. However, there is no allowance for pointer-events affecting scrollbar rendering, so I think it's defensible.)"> +<link rel="match" href="pointer-events-no-scrollbars-001-ref.html"> + +<style> + +#scroll { + width: 200px; + height: 200px; + overflow: auto; + pointer-events: none; +} + +#big { + width: 500px; + height: 500px; +} + +</style> + + +<div id="scroll"> + <div id="big"> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-002.html b/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-002.html new file mode 100644 index 0000000000..1371c12644 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/pointer-events-no-scrollbars-002.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>CSS Test: dynamic changes to pointer-events shouldn't cause overlay scrollbars to appear</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="http://www.google.com/"> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#pointer-events-control"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1414142"> +<meta name="assert" content="Dynamic changes to pointer-events shouldn't cause overlay scrollbars to appear. (I concede this could perhaps be allowed by the wording in the spec that makes basically everything related to scrollbar rendering UA-defined. However, there is no allowance for pointer-events affecting scrollbar rendering, so I think it's defensible.)"> +<link rel="match" href="pointer-events-no-scrollbars-001-ref.html"> + +<style> + +#scroll { + width: 200px; + height: 200px; + overflow: auto; +} + +#big { + width: 500px; + height: 500px; +} + +</style> + + +<div id="scroll"> + <div id="big"> + </div> +</div> + +<script> + +document.documentElement.addEventListener("TestRendered", (event) => { + document.getElementById("scroll").style.pointerEvents = "none"; + document.documentElement.classList.remove("reftest-wait"); +}); + +</script> 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> diff --git a/testing/web-platform/tests/css/css-ui/resize-001.html b/testing/web-platform/tests/css/css-ui/resize-001.html new file mode 100644 index 0000000000..99c7f05e17 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize - both - both width and height adjusted</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.1. 'resize' property" href="http://www.w3.org/TR/css3-ui/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that both width and height adjusted when resize set both."> +<style> + #test { + border: 2px solid blue; + height: 100px; + overflow: auto; + resize: both; + width: 100px; + } +</style> +<body> + <p>Test passes if both <strong>width</strong> and <strong>height</strong> of blue border square below can be adjusted(for instance by dragging the bottom-right corner).</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/resize-002.html b/testing/web-platform/tests/css/css-ui/resize-002.html new file mode 100644 index 0000000000..cccab9c972 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-002.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize - horizontal - only the width can be adjusted</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.1. 'resize' property" href="http://www.w3.org/TR/css3-ui/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that only the width of element can be adjusted when resize set horizontal"> +<style> + #test { + border: 2px solid blue; + height: 100px; + overflow: auto; + resize: horizontal; + width: 100px; + } +</style> +<body> + <p>Test passes if only the <strong>width</strong> of blue border square below can be adjusted(for instance by dragging the bottom-right corner).</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/resize-003.html b/testing/web-platform/tests/css/css-ui/resize-003.html new file mode 100644 index 0000000000..9fe11ec8e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize - inherit - the resize property inherits parent element</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.1. 'resize' property" href="http://www.w3.org/TR/css3-ui/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the resize element inherits parent element"> +<style> + #parent { + border: 2px solid blue; + height: 150px; + overflow: auto; + resize: both; + width: 150px; + } + #child { + border: 2px solid green; + height: 75px; + overflow: auto; + resize: inherit; + width: 75px; + } +</style> +<body> + <p>Test passes if both the height and width of the <strong>green</strong> border square inside blue square can be adjusted(for instance by dragging the bottom-right corner).</p> + <div id="parent"> + <div id="child"></div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/resize-004.html b/testing/web-platform/tests/css/css-ui/resize-004.html new file mode 100644 index 0000000000..3a1f561749 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-004.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize initial value - none</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.1. 'resize' property" href="http://www.w3.org/TR/css3-ui/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that the resize property initial value is none"> +<style> + #test { + border: 2px solid blue; + height: 100px; + overflow: auto; + width: 100px; + } +</style> +<body> + <p>Test passes if <strong>neither</strong> the height <strong>nor</strong> the width of the blue border square can be adjusted(for instance by dragging the bottom-right corner).</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/resize-005.html b/testing/web-platform/tests/css/css-ui/resize-005.html new file mode 100644 index 0000000000..7a9db60405 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-005.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize - none - neither width nor height can be adjusted</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.1. 'resize' property" href="http://www.w3.org/TR/css3-ui/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that neither the width nor the height can be adjusted when resize set none"> +<style> + #test { + border: 2px solid blue; + height: 100px; + overflow: auto; + resize: none; + width: 100px; + } +</style> +<body> + <p>Test passes if <strong>neither</strong> the height <strong>nor</strong> the width of the blue border square can be adjusted(for instance by dragging the bottom-right corner).</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/resize-006.html b/testing/web-platform/tests/css/css-ui/resize-006.html new file mode 100644 index 0000000000..8add5a18f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-006.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize - vertical - only the height can be adjusted</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.1. 'resize' property" href="http://www.w3.org/TR/css3-ui/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that only the height can be adjusted when resize set vertical"> +<style> + #test { + border: 2px solid blue; + height: 100px; + overflow: auto; + resize: vertical; + width: 100px; + } +</style> +<body> + <p>Test passes if only <strong>height</strong> of blue border square below can be adjusted(for instance by dragging the bottom-right corner).</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/resize-007.html b/testing/web-platform/tests/css/css-ui/resize-007.html new file mode 100644 index 0000000000..c596e9dbba --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-007.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize - invalid without overflow property</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.1. 'resize' property" href="http://www.w3.org/TR/css3-ui/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="Test checks that resize property is invalid without overflow property"> +<style> + #test { + border: 2px solid blue; + height: 100px; + resize: both; + width: 100px; + } +</style> +<body> + <p>Test passes if <strong>neither</strong> the height <strong>nor</strong> the width of the blue border square can be adjusted(for instance by dragging the bottom-right corner).</p> + <div id="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/resize-008.html b/testing/web-platform/tests/css/css-ui/resize-008.html new file mode 100644 index 0000000000..0b10155a4a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-008.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing images</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact may"> +<meta name="assert" content="UAs may apply the resize property to <img> regardless of the value of the overflow property."> +<style> +img { resize: both; } +</style> + +<p>Test passes if both <strong>width</strong> and <strong>height</strong> of the orange box below can be adjusted (for instance by dragging the bottom-right corner).</p> + +<img src="support/orange.png" alt=""> diff --git a/testing/web-platform/tests/css/css-ui/resize-009.html b/testing/web-platform/tests/css/css-ui/resize-009.html new file mode 100644 index 0000000000..8662b1a72c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-009.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing sgv</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact may"> +<meta name="assert" content="UAs may apply the resize property to <svg> regardless of the value of the overflow property."> +<style> +svg { resize: both; } +</style> + +<p>Test passes if both <strong>width</strong> and <strong>height</strong> of the orange box below can be adjusted (for instance by dragging the bottom-right corner).</p> + +<svg width="100" height="100" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> +<rect x="0" y="0" width="100" height="100" fill="orange"/> +</svg> diff --git a/testing/web-platform/tests/css/css-ui/resize-010.html b/testing/web-platform/tests/css/css-ui/resize-010.html new file mode 100644 index 0000000000..b7cf271298 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-010.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing pictures</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact may"> +<meta name="assert" content="UAs may apply the resize property to <picture> regardless of the value of the overflow property."> +<style> +picture { resize: both; } +</style> + +<p>Test passes if both <strong>width</strong> and <strong>height</strong> of the orange box below can be adjusted (for instance by dragging the bottom-right corner).</p> + +<picture> + <source srcset="support/orange.svg" type="image/svg+xml"> + <img src="support/orange.png" alt=""> +</picture> diff --git a/testing/web-platform/tests/css/css-ui/resize-011.html b/testing/web-platform/tests/css/css-ui/resize-011.html new file mode 100644 index 0000000000..71a8604366 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-011.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing objects</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact may"> +<meta name="assert" content="UAs may apply the resize property to <object> regardless of the value of the overflow property."> +<style> +object { resize: both; } +</style> + +<p>Test passes if both <strong>width</strong> and <strong>height</strong> of the orange box below can be adjusted (for instance by dragging the bottom-right corner).</p> + +<object data="support/orange.svg" type="image/svg+xml"> + <object> is not supported. This test is non conclusive. +</object> diff --git a/testing/web-platform/tests/css/css-ui/resize-012.html b/testing/web-platform/tests/css/css-ui/resize-012.html new file mode 100644 index 0000000000..717cb5a668 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-012.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing iframes</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact may"> +<meta name="assert" content="UAs may apply the resize property to <iframes> regardless of the value of the overflow property."> +<style> +iframe { resize: both; } +</style> + +<p>Test passes if both <strong>width</strong> and <strong>height</strong> of the box surrounding the orange box below can be adjusted (for instance by dragging the bottom-right corner).</p> + +<iframe src="support/orange.svg"></iframe> diff --git a/testing/web-platform/tests/css/css-ui/resize-013.html b/testing/web-platform/tests/css/css-ui/resize-013.html new file mode 100644 index 0000000000..d8cea0e674 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-013.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing canvas</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact may"> +<meta name="assert" content="UAs may apply the resize property to <canvas> regardless of the value of the overflow property."> +<style> +canvas { resize: both; } +</style> + +<p>Test passes if both <strong>width</strong> and <strong>height</strong> of the orange box below can be adjusted (for instance by dragging the bottom-right corner).</p> + +<canvas id="test" width="100" height="100"> + <canvas> is not supported. This test is non conclusive. +</canvas> +<script> +var canvas = document.getElementById('test'); +if (canvas.getContext) { + var ctx = canvas.getContext('2d'); + ctx.fillStyle = '#FFA500'; + ctx.fillRect (0, 0, 100, 100); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/resize-014.html b/testing/web-platform/tests/css/css-ui/resize-014.html new file mode 100644 index 0000000000..fdbd77e38a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-014.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing videos</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact may"> +<meta name="assert" content="UAs may apply the resize property to <video> regardless of the value of the overflow property."> +<style> +video { resize: both; } +</style> + +<p>Test passes if both <strong>width</strong> and <strong>height</strong> of the video below can be adjusted (for instance by dragging the bottom-right corner).</p> + +<video width="100" autoplay loop> + <source + src="support/test.webm" + type="video/webm"> + <source + src="support/test.mp4" + type="video/mp4"> + <source + src="support/test.ogv" + type="video/ogg"> + <video> is not supported. This test is non conclusive. +</video> diff --git a/testing/web-platform/tests/css/css-ui/resize-015.html b/testing/web-platform/tests/css/css-ui/resize-015.html new file mode 100644 index 0000000000..b613da261c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-015.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing uses the style attribute</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#test { + position: absolute; + width: 100px; + height: 100px; + background: orange; + overflow: hidden; + resize: both; +} +#target { + position: absolute; + width: 150px; + height: 150px; + background: blue; +} +#log { margin-top: 200px; } +</style> + +<p>Enlarge the orange box so that it at least covers the blue box entirely, then press the “done” button.</p> +<!-- There's no actual need to cover the whole box, + but doing so makes sure that the user has resized in both dimensions --> + +<button onclick="verify()">done</button> + +<div id="target"></div> +<div id="test"></div> +<div id=log></div> +<script> +setup({ explicit_done: true }); +function verify() { + test( + function(){ + var test = document.getElementById("test"); + assert_regexp_match(test.style.width, /px$/, "The width property of the style attribute should be set in pixels"); + assert_not_equals(test.style.width, "100px", "The width should be different from the initial one"); + assert_regexp_match(test.style.height, /px$/, "The height property of the style attribute should be set in pixels"); + assert_not_equals(test.style.height, "100px", "The height should be different from the initial one"); + }, "resize works by setting the width and height properties on the style attrbute in pixels"); + test( + function(){ + var test = document.getElementById("test"); + assert_false(test.getAttribute("style").includes("important")); + }, "resize does not set !important"); + done(); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/resize-016.html b/testing/web-platform/tests/css/css-ui/resize-016.html new file mode 100644 index 0000000000..4bc00287f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-016.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing horizontally uses the style attribute</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#test { + width: 100px; + height: 100px; + background: orange; + overflow: hidden; + resize: horizontal; +} +</style> + +<p>Attempt to resize the orange box both horizontally and vertically, then press the “done” button +(Resizing vertically is not expected to be possible but should still be attempted).</p> + +<button onclick="verify()">done</button> + +<div id="test"></div> +<div id=log></div> +<script> +setup({ explicit_done: true }); +function verify() { + test( + function(){ + var test = document.getElementById("test"); + assert_regexp_match(test.style.width, /px$/, "The width property of the style attribute should be set in pixels"); + assert_not_equals(test.style.width, "100px", "The width should be different from the initial one"); + assert_equals(test.style.height, "", "The height property of the style attribute should not be set"); + }, "horizontal resizing only affects the width properties on the style attrbute."); + done(); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/resize-017.html b/testing/web-platform/tests/css/css-ui/resize-017.html new file mode 100644 index 0000000000..98a7d31f28 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-017.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing vertically uses the style attribute</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#test { + width: 100px; + height: 100px; + background: orange; + overflow: hidden; + resize: vertical; +} +</style> + +<p>Attempt to resize the orange box both horizontally and vertically, then press the “done” button +(Resizing horizontally is not expected to be possible but should still be attempted).</p> + +<button onclick="verify()">done</button> + +<div id="test"></div> +<div id=log></div> +<script> +setup({ explicit_done: true }); +function verify() { + test( + function(){ + var test = document.getElementById("test"); + assert_equals(test.style.width, "", "The width property of the style attribute should not be set"); + assert_regexp_match(test.style.height, /px$/, "The height property of the style attribute should be set in pixels"); + assert_not_equals(test.style.height, "100px", "The height should be different from the initial one"); + }, "horizontal resizing only affects the width properties on the style attrbute."); + done(); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/resize-018.html b/testing/web-platform/tests/css/css-ui/resize-018.html new file mode 100644 index 0000000000..6e40d58307 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-018.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: removing the ability to resize keeps the resized dimentions</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#test { + position: absolute; + width: 100px; + height: 100px; + background: orange; + overflow: hidden; + resize: both; +} +#target { + position: absolute; + width: 150px; + height: 150px; + background: blue; +} +#log { margin-top: 200px; } +</style> + +<p>Enlarge the orange box so that it at least covers the blue box entirely, then press the “done” button.</p> +<!-- There's no actual need to cover the whole box, + but doing so makes sure that the user has resized in both dimensions --> + +<button onclick="verify()">done</button> + +<div id="target"></div> +<div id="test"></div> +<div id=log></div> +<script> +setup({ explicit_done: true }); +function verify() { + test( + function(){ + var test = document.getElementById("test"); + var w = test.style.width; + var h = test.style.height; + assert_regexp_match(w, /px$/, "The width property of the style attribute should be set"); + assert_regexp_match(h, /px$/, "The height property of the style attribute should be set"); + document.styleSheets[0].cssRules[0].style.resize= "none"; + assert_equals(test.style.width, w, "The width property of the style attribute should still be set after removing ability to resize"); + assert_equals(test.style.height, h, "The height property of the style attribute should still be set after removing ability to resize"); + }, "Removing the ability to resize an element does not reset its size"); + done(); +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/resize-019.html b/testing/web-platform/tests/css/css-ui/resize-019.html new file mode 100644 index 0000000000..4a6ff7d7d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-019.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing constraints</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="UAs must not place constrains on resizing that would prevent an element from becoming smaller than its original size."> +<style> +#test { + position: absolute; + background: orange; + height: 100px; + width: 100px; + overflow: auto; + resize: both; +} +#ref { + position: absolute; + background: green; + height: 100px; + width: 100px; +} +</style> + +<p>The test passes is you can resize the orange box to be smaller than its initial size. +For reference there is an unresizable green box beneath it. +If you can uncover it, the test passes.</p> + +<div id=ref></div> +<div id=test></div> diff --git a/testing/web-platform/tests/css/css-ui/resize-020.html b/testing/web-platform/tests/css/css-ui/resize-020.html new file mode 100644 index 0000000000..807f788b0a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-020.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing min-height/width constraints</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="min-width and min-height constraints are honored."> +<style> +#test { + position: absolute; + background: orange; + min-height: 50px; + min-width: 50px; + height: 100px; + width: 100px; + overflow: auto; + resize: both; +} +#ref { + position: absolute; + background: red; + height: 50px; + width: 50px; +} +</style> + +<p>Resize the orange box below to the smallest size possible. +There is a smaller unresizable red box beneath it.</p> +<p>If you can uncover any amount of red, the test fails. +If you cannot resize the orange box, the test also fails. +Otherwise, the test passes.</p> + +<div id=ref></div> +<div id=test></div> diff --git a/testing/web-platform/tests/css/css-ui/resize-021.html b/testing/web-platform/tests/css/css-ui/resize-021.html new file mode 100644 index 0000000000..709551f159 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-021.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resizing min-height/width constraints</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#resize"> +<meta name="flags" content="interact"> +<meta name="assert" content="max-width and max-height constraints are honored."> +<style> +#test { + position: absolute; + background: linear-gradient(to right, transparent 200px, red 200px) no-repeat, + linear-gradient(to bottom, transparent 200px, red 200px) no-repeat, + orange; + max-height: 200px; + max-width: 200px; + height: 100px; + width: 100px; + overflow: auto; + resize: both; +} +#ref { + position: absolute; + background: blue; + height: 300px; + width: 300px; +} +</style> + +<p>Attempt to resize the orange box below so that it is large enough to fully cover the blue one.</p> +<p>If you cannot enlarge the orange box, the test fails.<br> +If you can fully cover the blue box, the test fails.<br> +Even if the blue box is not fully covered, if you see any red, the test fails.<br> +Otherwise, the test passes.</p> + +<div id=ref></div> +<div id=test></div> diff --git a/testing/web-platform/tests/css/css-ui/resize-change-margin-ref.html b/testing/web-platform/tests/css/css-ui/resize-change-margin-ref.html new file mode 100644 index 0000000000..b326c5f8d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-change-margin-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<style>body { margin: 0 }</style> +<div style="height: 40px"></div> +<div style="width: 100px; height: 100px; resize: both; overflow: auto; border: 1px solid blue"></div> diff --git a/testing/web-platform/tests/css/css-ui/resize-change-margin.html b/testing/web-platform/tests/css/css-ui/resize-change-margin.html new file mode 100644 index 0000000000..a957ac931e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-change-margin.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#resize"> +<link rel="match" href="resize-change-margin-ref.html"> +<style>body { margin: 0 }</style> +<div id="target" style="width: 100px; height: 100px; resize: both; overflow: auto; border: 1px solid blue"></div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.style.marginTop = "40px"; + document.documentElement.classList.remove("reftest-wait"); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-ui/resize-child-will-change-transform-ref.html b/testing/web-platform/tests/css/css-ui/resize-child-will-change-transform-ref.html new file mode 100644 index 0000000000..36f39fc19b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-child-will-change-transform-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<div style="width: 200px; height: 200px; overflow: hidden; resize: both; background: yellow"> +</div> diff --git a/testing/web-platform/tests/css/css-ui/resize-child-will-change-transform.html b/testing/web-platform/tests/css/css-ui/resize-child-will-change-transform.html new file mode 100644 index 0000000000..b8adf53b04 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-child-will-change-transform.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>CSS resize: child with will-change: transform</title> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#resize"> +<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org"> +<link rel="match" href="resize-child-will-change-transform-ref.html"> +<div id="resize" style="width: 200px; height: 200px; overflow: auto; resize: both"> + <div id="will-change" style="width: 100%; height: 100%; background: yellow; will-change: transform"></div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/resize-generated-content.html b/testing/web-platform/tests/css/css-ui/resize-generated-content.html new file mode 100644 index 0000000000..462a81118b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/resize-generated-content.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: resize - generated content</title> +<meta name="assert" content="The resize property should not apply to generated content, the behavior is undefined"> +<link rel="help" href="http://drafts.csswg.org/css-ui/#resize"> +<link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> +<style> + #test::before { + content: ""; + display: block; + width: 100px; + height: 100px; + overflow: hidden; + resize: both; + background: green; + } +</style> +<p>Test passes if there is a filled green square.</p> +<div id="test"></div> diff --git a/testing/web-platform/tests/css/css-ui/select-cursor-001-manual.html b/testing/web-platform/tests/css/css-ui/select-cursor-001-manual.html new file mode 100644 index 0000000000..30aa9b20f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/select-cursor-001-manual.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test (User Interface): cursor property and select element</title> + <link rel="author" title="Chris Rebert" href="http://chrisrebert.com"> + <link rel="help" href="https://drafts.csswg.org/css-ui-3/#cursor"> + <link rel="help" href="https://drafts.csswg.org/css2/ui.html#cursor-props"> + <meta name="flags" content="HTMLonly interact"> + <meta name="assert" content="Hovering the pointer over a select menu on top of an element with a cursor set should not display said cursor"> + <style> +div { + cursor: help; + height: 200px; + width: 200px; + background-color: blue; +} + </style> +</head> +<body> + <ol> + <li>If clicking a <select> opens a native widget which is modal, then SKIP this test.</li> + <li>Click on the <select> below. A selection widget appears.</li> + <li>Move the pointer so that it is hovering within the intersection area of the selection widget and the blue box below.</li> + <li>If the "help" cursor is displayed, then the test result is FAILED. Otherwise, it is PASSED.</li> + </ol> + <select> + <option>AAAAAAAA</option> + <option>BBBBBBBB</option> + <option>CCCCCCCC</option> + <option>DDDDDDDD</option> + <option>EEEEEEEE</option> + <option>FFFFFFFF</option> + <option>GGGGGGGG</option> + <option>HHHHHHHH</option> + </select> + <div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/support/1x1-red.png b/testing/web-platform/tests/css/css-ui/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/1x1-red.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.LICENSE b/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.LICENSE new file mode 100644 index 0000000000..8d4d1d0777 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.LICENSE @@ -0,0 +1,9 @@ +PngSuite +-------- + +Permission to use, copy, modify and distribute these images for any +purpose and without fee is hereby granted. + + +(c) Willem van Schaik, 1996, 2011 + diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.README b/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.README new file mode 100644 index 0000000000..94df6ccffa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.README @@ -0,0 +1,25 @@ + PNGSUITE +---------------- + + testset for PNG-(de)coders + created by Willem van Schaik +------------------------------------ + +This is a collection of graphics images created to test the png applications +like viewers, converters and editors. All (as far as that is possible) +formats supported by the PNG standard are represented. + +The suite consists of the following files: + +- PngSuite.README - this file +- PngSuite.LICENSE - the PngSuite is freeware +- PngSuite.png - image with PngSuite logo +- PngSuite.tgz - archive of all PNG testfiles +- PngSuite.zip - same in .zip format for PCs + + +-------- + (c) Willem van Schaik + willem@schaik.com + Calgary, April 2011 + diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.png b/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.png Binary files differnew file mode 100644 index 0000000000..205460d828 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/PngSuite.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g01.png Binary files differnew file mode 100644 index 0000000000..556fa72704 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi0g02.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g02.png Binary files differnew file mode 100644 index 0000000000..ce09821ef1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g04.png Binary files differnew file mode 100644 index 0000000000..3853273f93 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g08.png Binary files differnew file mode 100644 index 0000000000..faed8bec44 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g16.png Binary files differnew file mode 100644 index 0000000000..a9f28165ef --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi2c08.png Binary files differnew file mode 100644 index 0000000000..2aab44d42b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi2c16.png Binary files differnew file mode 100644 index 0000000000..cd7e50f914 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p01.png Binary files differnew file mode 100644 index 0000000000..00a7cea6c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p02.png Binary files differnew file mode 100644 index 0000000000..bb16b44b30 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p04.png Binary files differnew file mode 100644 index 0000000000..b4e888e247 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p08.png Binary files differnew file mode 100644 index 0000000000..50a6d1cac7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi4a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi4a08.png Binary files differnew file mode 100644 index 0000000000..398132be5f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi4a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi4a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi4a16.png Binary files differnew file mode 100644 index 0000000000..51192e7311 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi4a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi6a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi6a08.png Binary files differnew file mode 100644 index 0000000000..aecb32e0d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi6a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basi6a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basi6a16.png Binary files differnew file mode 100644 index 0000000000..4181533ad8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basi6a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g01.png Binary files differnew file mode 100644 index 0000000000..1d722423aa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn0g02.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g02.png Binary files differnew file mode 100644 index 0000000000..508332418f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g04.png Binary files differnew file mode 100644 index 0000000000..0bf3687863 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g08.png Binary files differnew file mode 100644 index 0000000000..23c82379a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g16.png Binary files differnew file mode 100644 index 0000000000..e7c82f78eb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn2c08.png Binary files differnew file mode 100644 index 0000000000..db5ad15865 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn2c16.png Binary files differnew file mode 100644 index 0000000000..50c1cb91a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p01.png Binary files differnew file mode 100644 index 0000000000..b145c2b8ef --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p02.png Binary files differnew file mode 100644 index 0000000000..8985b3d818 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p04.png Binary files differnew file mode 100644 index 0000000000..0fbf9e827b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p08.png Binary files differnew file mode 100644 index 0000000000..0ddad07e5f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn4a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn4a08.png Binary files differnew file mode 100644 index 0000000000..3e13052201 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn4a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn4a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn4a16.png Binary files differnew file mode 100644 index 0000000000..8243644d07 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn4a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn6a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn6a08.png Binary files differnew file mode 100644 index 0000000000..e608738763 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn6a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/basn6a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/basn6a16.png Binary files differnew file mode 100644 index 0000000000..984a99525f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/basn6a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bgai4a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/bgai4a08.png Binary files differnew file mode 100644 index 0000000000..398132be5f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bgai4a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bgai4a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/bgai4a16.png Binary files differnew file mode 100644 index 0000000000..51192e7311 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bgai4a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bgan6a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/bgan6a08.png Binary files differnew file mode 100644 index 0000000000..e608738763 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bgan6a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bgan6a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/bgan6a16.png Binary files differnew file mode 100644 index 0000000000..984a99525f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bgan6a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bgbn4a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/bgbn4a08.png Binary files differnew file mode 100644 index 0000000000..7cbefc3bff --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bgbn4a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bggn4a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/bggn4a16.png Binary files differnew file mode 100644 index 0000000000..13fd85ba19 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bggn4a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bgwn6a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/bgwn6a08.png Binary files differnew file mode 100644 index 0000000000..a67ff205bb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bgwn6a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/bgyn6a16.png b/testing/web-platform/tests/css/css-ui/support/PTS/bgyn6a16.png Binary files differnew file mode 100644 index 0000000000..ae3e9be58a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/bgyn6a16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ccwn2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/ccwn2c08.png Binary files differnew file mode 100644 index 0000000000..47c24817b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ccwn2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ccwn3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/ccwn3p08.png Binary files differnew file mode 100644 index 0000000000..8bb2c10981 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ccwn3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cdfn2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cdfn2c08.png Binary files differnew file mode 100644 index 0000000000..559e5261e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cdfn2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cdhn2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cdhn2c08.png Binary files differnew file mode 100644 index 0000000000..3e07e8ecbd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cdhn2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cdsn2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cdsn2c08.png Binary files differnew file mode 100644 index 0000000000..076c32cc08 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cdsn2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cdun2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cdun2c08.png Binary files differnew file mode 100644 index 0000000000..846033be6b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cdun2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ch1n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/ch1n3p04.png Binary files differnew file mode 100644 index 0000000000..17cd12dfc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ch1n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ch2n3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/ch2n3p08.png Binary files differnew file mode 100644 index 0000000000..25c17987a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ch2n3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cm0n0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/cm0n0g04.png Binary files differnew file mode 100644 index 0000000000..9fba5db3b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cm0n0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cm7n0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/cm7n0g04.png Binary files differnew file mode 100644 index 0000000000..f7dc46e685 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cm7n0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cm9n0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/cm9n0g04.png Binary files differnew file mode 100644 index 0000000000..dd70911adc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cm9n0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cs3n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/cs3n2c16.png Binary files differnew file mode 100644 index 0000000000..bf5fd20a20 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cs3n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cs3n3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cs3n3p08.png Binary files differnew file mode 100644 index 0000000000..f4a66237bf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cs3n3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cs5n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cs5n2c08.png Binary files differnew file mode 100644 index 0000000000..40f947c33e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cs5n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cs5n3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cs5n3p08.png Binary files differnew file mode 100644 index 0000000000..dfd6e6e6ec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cs5n3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cs8n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cs8n2c08.png Binary files differnew file mode 100644 index 0000000000..8e01d3294f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cs8n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cs8n3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/cs8n3p08.png Binary files differnew file mode 100644 index 0000000000..a44066eb6e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cs8n3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ct0n0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/ct0n0g04.png Binary files differnew file mode 100644 index 0000000000..40d1e062f8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ct0n0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ct1n0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/ct1n0g04.png Binary files differnew file mode 100644 index 0000000000..3ba110aa76 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ct1n0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cten0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/cten0g04.png Binary files differnew file mode 100644 index 0000000000..a6a56faf2b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cten0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ctfn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/ctfn0g04.png Binary files differnew file mode 100644 index 0000000000..353873ebbd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ctfn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ctgn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/ctgn0g04.png Binary files differnew file mode 100644 index 0000000000..453f2b0a49 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ctgn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/cthn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/cthn0g04.png Binary files differnew file mode 100644 index 0000000000..8fce253e6d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/cthn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ctjn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/ctjn0g04.png Binary files differnew file mode 100644 index 0000000000..a77b8d2fee --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ctjn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ctzn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/ctzn0g04.png Binary files differnew file mode 100644 index 0000000000..b4401c9cfc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ctzn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f00n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f00n0g08.png Binary files differnew file mode 100644 index 0000000000..45a0075967 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f00n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f00n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f00n2c08.png Binary files differnew file mode 100644 index 0000000000..d6a1ffff62 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f00n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f01n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f01n0g08.png Binary files differnew file mode 100644 index 0000000000..4a1107b463 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f01n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f01n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f01n2c08.png Binary files differnew file mode 100644 index 0000000000..26fee958ce --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f01n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f02n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f02n0g08.png Binary files differnew file mode 100644 index 0000000000..bfe410c5e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f02n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f02n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f02n2c08.png Binary files differnew file mode 100644 index 0000000000..e590f12348 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f02n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f03n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f03n0g08.png Binary files differnew file mode 100644 index 0000000000..ed01e2923c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f03n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f03n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f03n2c08.png Binary files differnew file mode 100644 index 0000000000..758115059d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f03n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f04n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f04n0g08.png Binary files differnew file mode 100644 index 0000000000..663fdae3e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f04n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f04n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/f04n2c08.png Binary files differnew file mode 100644 index 0000000000..3c8b5116e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f04n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/f99n0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/f99n0g04.png Binary files differnew file mode 100644 index 0000000000..0b521c1d56 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/f99n0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g03n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/g03n0g16.png Binary files differnew file mode 100644 index 0000000000..41083ca80f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g03n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g03n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/g03n2c08.png Binary files differnew file mode 100644 index 0000000000..a9354dbee6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g03n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g03n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/g03n3p04.png Binary files differnew file mode 100644 index 0000000000..60396c95af --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g03n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g04n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/g04n0g16.png Binary files differnew file mode 100644 index 0000000000..32395b76c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g04n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g04n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/g04n2c08.png Binary files differnew file mode 100644 index 0000000000..a652b0ce87 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g04n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g04n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/g04n3p04.png Binary files differnew file mode 100644 index 0000000000..5661cc3131 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g04n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g05n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/g05n0g16.png Binary files differnew file mode 100644 index 0000000000..70b37f01e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g05n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g05n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/g05n2c08.png Binary files differnew file mode 100644 index 0000000000..932c136536 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g05n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g05n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/g05n3p04.png Binary files differnew file mode 100644 index 0000000000..9619930585 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g05n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g07n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/g07n0g16.png Binary files differnew file mode 100644 index 0000000000..d6a47c2d57 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g07n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g07n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/g07n2c08.png Binary files differnew file mode 100644 index 0000000000..597346460f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g07n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g07n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/g07n3p04.png Binary files differnew file mode 100644 index 0000000000..c73fb61365 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g07n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g10n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/g10n0g16.png Binary files differnew file mode 100644 index 0000000000..85f2c958e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g10n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g10n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/g10n2c08.png Binary files differnew file mode 100644 index 0000000000..b3039970c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g10n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g10n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/g10n3p04.png Binary files differnew file mode 100644 index 0000000000..1b6a6be2ca --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g10n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g25n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/g25n0g16.png Binary files differnew file mode 100644 index 0000000000..a9f6787c7a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g25n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g25n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/g25n2c08.png Binary files differnew file mode 100644 index 0000000000..03f505a64b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g25n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/g25n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/g25n3p04.png Binary files differnew file mode 100644 index 0000000000..4f943c6175 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/g25n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi1n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi1n0g16.png Binary files differnew file mode 100644 index 0000000000..e7c82f78eb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi1n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi1n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi1n2c16.png Binary files differnew file mode 100644 index 0000000000..50c1cb91a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi1n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi2n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi2n0g16.png Binary files differnew file mode 100644 index 0000000000..14d64c583d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi2n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi2n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi2n2c16.png Binary files differnew file mode 100644 index 0000000000..4c2e3e3352 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi2n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi4n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi4n0g16.png Binary files differnew file mode 100644 index 0000000000..69e73ede31 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi4n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi4n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi4n2c16.png Binary files differnew file mode 100644 index 0000000000..93691e373a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi4n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi9n0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi9n0g16.png Binary files differnew file mode 100644 index 0000000000..9248413576 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi9n0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/oi9n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/oi9n2c16.png Binary files differnew file mode 100644 index 0000000000..f0512e49f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/oi9n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/pp0n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/pp0n2c16.png Binary files differnew file mode 100644 index 0000000000..8f2aad7335 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/pp0n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/pp0n6a08.png b/testing/web-platform/tests/css/css-ui/support/PTS/pp0n6a08.png Binary files differnew file mode 100644 index 0000000000..4ed7a30e4d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/pp0n6a08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ps1n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/ps1n0g08.png Binary files differnew file mode 100644 index 0000000000..99625fa4ba --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ps1n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ps1n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/ps1n2c16.png Binary files differnew file mode 100644 index 0000000000..0c7a6b380e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ps1n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ps2n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/ps2n0g08.png Binary files differnew file mode 100644 index 0000000000..90b2979685 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ps2n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/ps2n2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/ps2n2c16.png Binary files differnew file mode 100644 index 0000000000..a4a181e4ec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/ps2n2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s01i3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s01i3p01.png Binary files differnew file mode 100644 index 0000000000..6c0fad1fc9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s01i3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s01n3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s01n3p01.png Binary files differnew file mode 100644 index 0000000000..cb2c8c7826 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s01n3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s02i3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s02i3p01.png Binary files differnew file mode 100644 index 0000000000..2defaed911 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s02i3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s02n3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s02n3p01.png Binary files differnew file mode 100644 index 0000000000..2b1b669643 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s02n3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s03i3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s03i3p01.png Binary files differnew file mode 100644 index 0000000000..c23fdc4631 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s03i3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s03n3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s03n3p01.png Binary files differnew file mode 100644 index 0000000000..6d96ee4f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s03n3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s04i3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s04i3p01.png Binary files differnew file mode 100644 index 0000000000..0e710c2c39 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s04i3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s04n3p01.png b/testing/web-platform/tests/css/css-ui/support/PTS/s04n3p01.png Binary files differnew file mode 100644 index 0000000000..956396c45b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s04n3p01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s05i3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s05i3p02.png Binary files differnew file mode 100644 index 0000000000..d14cbd351a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s05i3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s05n3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s05n3p02.png Binary files differnew file mode 100644 index 0000000000..bf940f0576 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s05n3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s06i3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s06i3p02.png Binary files differnew file mode 100644 index 0000000000..456ada3200 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s06i3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s06n3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s06n3p02.png Binary files differnew file mode 100644 index 0000000000..501064dc25 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s06n3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s07i3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s07i3p02.png Binary files differnew file mode 100644 index 0000000000..44b66bab9e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s07i3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s07n3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s07n3p02.png Binary files differnew file mode 100644 index 0000000000..6a582593d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s07n3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s08i3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s08i3p02.png Binary files differnew file mode 100644 index 0000000000..acf74f3fc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s08i3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s08n3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s08n3p02.png Binary files differnew file mode 100644 index 0000000000..b7094e1b4f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s08n3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s09i3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s09i3p02.png Binary files differnew file mode 100644 index 0000000000..0bfae8e456 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s09i3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s09n3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/s09n3p02.png Binary files differnew file mode 100644 index 0000000000..711ab82451 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s09n3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s32i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s32i3p04.png Binary files differnew file mode 100644 index 0000000000..0841910b72 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s32i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s32n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s32n3p04.png Binary files differnew file mode 100644 index 0000000000..fa58e3e3f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s32n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s33i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s33i3p04.png Binary files differnew file mode 100644 index 0000000000..ab0dc14aba --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s33i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s33n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s33n3p04.png Binary files differnew file mode 100644 index 0000000000..764f1a3dc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s33n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s34i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s34i3p04.png Binary files differnew file mode 100644 index 0000000000..bd99039be4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s34i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s34n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s34n3p04.png Binary files differnew file mode 100644 index 0000000000..9cbc68b3b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s34n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s35i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s35i3p04.png Binary files differnew file mode 100644 index 0000000000..e2a5e0a659 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s35i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s35n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s35n3p04.png Binary files differnew file mode 100644 index 0000000000..90b892ebaf --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s35n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s36i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s36i3p04.png Binary files differnew file mode 100644 index 0000000000..eb61b6f9a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s36i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s36n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s36n3p04.png Binary files differnew file mode 100644 index 0000000000..b38d179774 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s36n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s37i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s37i3p04.png Binary files differnew file mode 100644 index 0000000000..6e2b1e9b79 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s37i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s37n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s37n3p04.png Binary files differnew file mode 100644 index 0000000000..4d3054da51 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s37n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s38i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s38i3p04.png Binary files differnew file mode 100644 index 0000000000..a0a8a140ad --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s38i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s38n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s38n3p04.png Binary files differnew file mode 100644 index 0000000000..1233ed048e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s38n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s39i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s39i3p04.png Binary files differnew file mode 100644 index 0000000000..04fee93eae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s39i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s39n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s39n3p04.png Binary files differnew file mode 100644 index 0000000000..c750100d55 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s39n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s40i3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s40i3p04.png Binary files differnew file mode 100644 index 0000000000..68f358b822 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s40i3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/s40n3p04.png b/testing/web-platform/tests/css/css-ui/support/PTS/s40n3p04.png Binary files differnew file mode 100644 index 0000000000..864b6b9673 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/s40n3p04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbbn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbbn0g04.png Binary files differnew file mode 100644 index 0000000000..39a7050d27 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbbn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbbn2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbbn2c16.png Binary files differnew file mode 100644 index 0000000000..dd3168e5c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbbn2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbbn3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbbn3p08.png Binary files differnew file mode 100644 index 0000000000..0ede3574db --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbbn3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbgn2c16.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbgn2c16.png Binary files differnew file mode 100644 index 0000000000..85cec395c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbgn2c16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbgn3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbgn3p08.png Binary files differnew file mode 100644 index 0000000000..8cf2e6fb6a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbgn3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbrn2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbrn2c08.png Binary files differnew file mode 100644 index 0000000000..5cca0d6210 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbrn2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbwn0g16.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbwn0g16.png Binary files differnew file mode 100644 index 0000000000..99bdeed2b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbwn0g16.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbwn3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbwn3p08.png Binary files differnew file mode 100644 index 0000000000..eacab7a144 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbwn3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tbyn3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tbyn3p08.png Binary files differnew file mode 100644 index 0000000000..656db0989a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tbyn3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tm3n3p02.png b/testing/web-platform/tests/css/css-ui/support/PTS/tm3n3p02.png Binary files differnew file mode 100644 index 0000000000..fb3ef1d0c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tm3n3p02.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tp0n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tp0n0g08.png Binary files differnew file mode 100644 index 0000000000..333465fcdc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tp0n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tp0n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tp0n2c08.png Binary files differnew file mode 100644 index 0000000000..fc6e42cb42 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tp0n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tp0n3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tp0n3p08.png Binary files differnew file mode 100644 index 0000000000..69a69e5872 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tp0n3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/tp1n3p08.png b/testing/web-platform/tests/css/css-ui/support/PTS/tp1n3p08.png Binary files differnew file mode 100644 index 0000000000..a6c9f35a86 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/tp1n3p08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xc1n0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/xc1n0g08.png Binary files differnew file mode 100644 index 0000000000..9404227370 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xc1n0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xc9n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/xc9n2c08.png Binary files differnew file mode 100644 index 0000000000..b11c2a7b40 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xc9n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xcrn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/xcrn0g04.png Binary files differnew file mode 100644 index 0000000000..48abba193a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xcrn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xcsn0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/xcsn0g01.png Binary files differnew file mode 100644 index 0000000000..9863a262ca --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xcsn0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xd0n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/xd0n2c08.png Binary files differnew file mode 100644 index 0000000000..2f001610a8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xd0n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xd3n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/xd3n2c08.png Binary files differnew file mode 100644 index 0000000000..9e4a3ff7ac --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xd3n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xd9n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/xd9n2c08.png Binary files differnew file mode 100644 index 0000000000..2c3b91aa4f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xd9n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xdtn0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/xdtn0g01.png Binary files differnew file mode 100644 index 0000000000..1a81abef82 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xdtn0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xhdn0g08.png b/testing/web-platform/tests/css/css-ui/support/PTS/xhdn0g08.png Binary files differnew file mode 100644 index 0000000000..fcb8737fa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xhdn0g08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xlfn0g04.png b/testing/web-platform/tests/css/css-ui/support/PTS/xlfn0g04.png Binary files differnew file mode 100644 index 0000000000..d9ec53ed94 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xlfn0g04.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xs1n0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/xs1n0g01.png Binary files differnew file mode 100644 index 0000000000..1817c5144f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xs1n0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xs2n0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/xs2n0g01.png Binary files differnew file mode 100644 index 0000000000..b8147f2a84 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xs2n0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xs4n0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/xs4n0g01.png Binary files differnew file mode 100644 index 0000000000..45237a1d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xs4n0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/xs7n0g01.png b/testing/web-platform/tests/css/css-ui/support/PTS/xs7n0g01.png Binary files differnew file mode 100644 index 0000000000..3f307f14ea --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/xs7n0g01.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/z00n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/z00n2c08.png Binary files differnew file mode 100644 index 0000000000..7669eb8385 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/z00n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/z03n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/z03n2c08.png Binary files differnew file mode 100644 index 0000000000..bfb10de8de --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/z03n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/z06n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/z06n2c08.png Binary files differnew file mode 100644 index 0000000000..b90ebc10f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/z06n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/PTS/z09n2c08.png b/testing/web-platform/tests/css/css-ui/support/PTS/z09n2c08.png Binary files differnew file mode 100644 index 0000000000..5f191a78ee --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/PTS/z09n2c08.png diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/.htaccess b/testing/web-platform/tests/css/css-ui/support/cursors/.htaccess new file mode 100644 index 0000000000..016048b735 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/.htaccess @@ -0,0 +1,3 @@ +<Files "woolly-64.svgz"> + Header set Content-Encoding gzip +</Files> diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/BlueButterfly.ani b/testing/web-platform/tests/css/css-ui/support/cursors/BlueButterfly.ani Binary files differnew file mode 100644 index 0000000000..f1d41df9ca --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/BlueButterfly.ani diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/arrows.ico b/testing/web-platform/tests/css/css-ui/support/cursors/arrows.ico Binary files differnew file mode 100644 index 0000000000..af6296cbf6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/arrows.ico diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/arrows.png b/testing/web-platform/tests/css/css-ui/support/cursors/arrows.png Binary files differnew file mode 100644 index 0000000000..c8685dcafa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/arrows.png diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/basn0g08.gif b/testing/web-platform/tests/css/css-ui/support/cursors/basn0g08.gif Binary files differnew file mode 100644 index 0000000000..e5a2aa9fcc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/basn0g08.gif diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/fail.cur b/testing/web-platform/tests/css/css-ui/support/cursors/fail.cur Binary files differnew file mode 100644 index 0000000000..721a4ccd64 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/fail.cur diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/fail.png b/testing/web-platform/tests/css/css-ui/support/cursors/fail.png Binary files differnew file mode 100644 index 0000000000..af0c1578b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/fail.png diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/not-an-image.foo b/testing/web-platform/tests/css/css-ui/support/cursors/not-an-image.foo new file mode 100644 index 0000000000..b4bad3e480 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/not-an-image.foo @@ -0,0 +1 @@ +I am not an actual image file. diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/rainbow.jpg b/testing/web-platform/tests/css/css-ui/support/cursors/rainbow.jpg Binary files differnew file mode 100644 index 0000000000..09d5f377e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/rainbow.jpg diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/tp1n3p08.gif b/testing/web-platform/tests/css/css-ui/support/cursors/tp1n3p08.gif Binary files differnew file mode 100644 index 0000000000..a2bffcb8b9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/tp1n3p08.gif diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.cur b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.cur Binary files differnew file mode 100644 index 0000000000..e9a2010e0f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.cur diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.ico b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.ico Binary files differnew file mode 100644 index 0000000000..9dc4a9b5ec --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.ico diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.png b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.png Binary files differnew file mode 100644 index 0000000000..30cabffbd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.png diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svg b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svg new file mode 100644 index 0000000000..738cdbb343 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svg @@ -0,0 +1,60 @@ +<svg width="64px" height="64px" viewBox="-140 -30 1280 1280" + xmlns="http://www.w3.org/2000/svg"> + +<title>Woolly le Mouton</title> + +<desc> +Woolly is a sheep, originally drawn by Coralie Mercier on 2 March 2000 +and scanned and converted to SVG by Bert Bos, between 3 March 2000 and +5 July 2000. +</desc> + + + +<!-- the pink parts of the sheep --> + +<path style="fill:#ffcc99; stroke:none" d="M569 102.193C572.25 107.814 579.249 118.2 578.581 125C578.215 128.721 566.838 148.105 564.088 152C562.317 154.509 559.003 158.23 558.022 161C555.823 167.214 559.614 176.9 567.001 176.21C569.364 176.215 571.615 175.943 574 176.21C578.433 176.218 582.567 177.782 587 177.961C594.738 178.273 601.492 175.302 609 174.287C640.067 170.089 665.778 165.843 687.919 141.024C692.352 136.056 696.57 132.82 698 126L661 119.323L650 118.241L631 112.533L601 102.193L589 102.193L569 102.193zM89 215C92.4749 217.69 98.8285 221.551 102.912 223.027C105.848 224.089 109.041 223.799 112.004 224.999C114.827 226.142 117.14 228.239 120 229.281C128.704 232.452 139.753 233.888 149 234.673C153.713 235.074 158.251 233.22 163 233.665C165.044 233.638 166.932 233.966 169 233.665C182.069 232.879 194.177 228.878 206 223.46C213.923 219.829 223.082 214.771 230 209.474C233.872 206.509 247.672 193.748 250.999 192.845C254.709 191.837 256.865 194.508 259 197C263.369 193.844 271.995 184.99 273.995 180C277.514 171.216 274.111 141.78 270 133C233.626 137.798 198.547 152.875 167 171.346C154.083 178.91 141.94 187.819 129 195.394C116.27 202.845 101.796 207.746 89 215zM539 169C535.609 179.973 533.497 184.21 523 190.125C503.57 201.075 490.413 189.283 471 187.729C468.915 187.835 466.032 187.16 464.039 187.729C461.073 187.961 446.611 203.185 434 206.097C422.551 208.741 413.256 198.261 405 197.998C401.393 197.883 392.512 203.899 388 205.457C383.245 207.099 378.705 206.417 374 207.53C372.718 207.833 346.418 218.077 346.637 217.853C343.379 221.184 350.864 234.148 350.149 240C348.809 250.962 335.332 257.971 334.612 265C334.334 267.713 336.312 274.724 336.715 278C337.145 281.495 336.459 286.764 337.56 289.832C341.238 300.084 356.332 303.271 357.588 316C358.657 326.837 349.192 334.469 349.847 343C351.197 360.586 349.45 356.395 345 372C350.023 375.031 352.789 378.716 357.207 382.037C360.902 384.814 365.44 385.943 368.894 389.211C371.26 391.45 372.414 394.303 374.491 396.701C378.357 401.163 384.536 406.753 389.039 410.676C393.519 414.579 399.017 417.48 404 420.692C411.364 425.438 418.199 430.876 426 434.96C429.485 436.784 433.405 437.691 437 439.311C440.984 441.106 446.621 445.023 451 444.266C453.414 443.848 455.487 442.501 458 442.299C462.134 441.966 467.822 443.586 472 444.284C478.027 445.292 484.039 448.226 490 448.803C499.018 449.676 517.319 443.769 525 439.048C529.454 436.311 535.248 432.875 538.673 428.958C551.747 414.007 562.897 369.153 564.875 349C565.555 344.535 564.326 339.797 564.875 335C565.577 322.723 564.013 310.231 562.703 298C561.901 290.513 562.382 283.512 560.214 276C558.732 270.867 555.902 266.229 554.428 261C552.882 255.517 553.072 249.176 550.282 244.128C547.026 238.237 542.195 240.676 538.756 228C537.424 223.091 533.81 215.837 534.506 211C535.802 201.993 542.259 201.383 544.939 195.912C545.731 194.296 545.229 175.108 544.402 173.211C543.357 170.814 541.193 170.035 539 169zM392 220.514C394.232 220.296 397.822 221.26 400 221.913C412.883 225.77 412.56 233.907 413.039 245C413.474 255.09 414.475 262.633 401 261.957C370.908 260.448 379.541 221.73 392 220.514zM536.039 386.813C537.825 385.946 540.197 386.054 541.854 386.813C548.262 390.769 542.032 397.555 540.542 402C539.065 406.406 539.896 414.622 534.893 416.805C532.64 417.788 530.09 416.782 528.004 415.851C526.05 414.978 523.508 413.797 522.602 411.729C520.243 406.344 530.99 388.459 536.039 386.813zM468 390C481.697 386.915 491.519 416.012 486.259 421.259C480.655 426.847 469.082 416.641 469.773 409C470.029 406.162 471.835 401.883 471.563 399.424C471.244 396.552 468.774 393.087 468 390zM749 992L762 990C758.901 977.257 765.297 931.234 784.284 935.099C799.904 938.279 783.545 954.018 781.128 960C778.759 965.862 777.447 973.692 777.092 980C776.47 991.042 779.544 994.068 790 991.789C792.352 991.276 795.533 990.709 796.978 988.574C798.432 986.425 797.972 980.686 798.004 978C798.074 971.977 799.814 962.566 802.093 957C803.489 953.589 807.021 949.453 807.377 946C807.733 942.549 804.375 936.753 803.526 933C802.211 927.181 802.181 919.085 801.808 913C801.363 905.746 803.59 898.196 804.575 891C805.669 883.014 805.866 874.97 807.25 867C808.653 858.92 810.888 850.709 813.695 843C816.079 836.45 818.639 833.355 819 826L810 826.523L796 823.391L787 825.33L778.724 828.724L774.004 848L776 883L770.245 916L754.519 957L751.916 972L749 992zM537 988C536.329 985.239 535.877 982.867 536.186 980C536.167 980.178 543.139 947.746 542.567 949.015C543.451 947.052 544.887 945.62 547.019 945.077C549.108 944.545 551.138 945.184 552.775 946.524C562.875 954.792 548.842 976.394 551.637 982.672C553.193 986.167 560.544 983.563 562.402 981.491C564.686 978.942 563.964 972.366 564.004 969C564.134 957.861 572.419 943.245 572.298 940.131C572.111 935.287 559.279 935.366 557.784 918C557.14 910.519 559.292 903.384 559.817 896C560.221 890.33 558.094 884.653 557.759 879C557.323 871.64 564.662 848.414 563.363 845.3C562.409 843.011 543.615 839.215 541 839.613C538.764 839.953 536.749 841.409 535.314 843.107C531.703 847.379 532.938 859.346 533.004 865C533.152 877.712 538.304 891.235 540.274 904C540.893 908.012 542.131 911.902 541.698 916C540.991 922.677 539.872 930.694 537.621 937C533.456 948.664 518.72 974.452 522.57 986.943C524.627 993.616 532.705 990.083 537 988zM422 1127C419.997 1121.44 418.038 1118.16 417.748 1112C417.349 1103.52 423.476 1076.9 433.003 1074.96C437.43 1074.06 440.867 1079.01 440.286 1083C438.779 1093.36 428.02 1107.87 434.606 1118.85C435.496 1120.34 436.355 1121.17 438.128 1121.39C439.644 1121.57 460.538 1115.96 460.978 1115.4C462.394 1113.61 462.024 1107.39 461.996 1105C461.885 1095.49 460.342 1081.67 456.487 1073C453.101 1065.39 447.01 1057.75 444.39 1050C443.404 1047.08 444.065 1043.99 443.198 1041C442.07 1037.11 439.448 1033.92 438.302 1030C434.667 1017.57 434.853 1004.83 435.004 992C435.108 983.13 438.299 973.872 439.572 965C440.581 957.977 439.524 950.901 441.844 944C446.012 931.603 458.739 911.344 456.658 898C455.444 890.216 450.9 890.8 448.174 885.897C445.976 881.946 445.544 877.311 443 873C436.682 874.997 431.525 879.091 425 880.961C413.727 884.191 400.887 877.767 402.183 896C403.659 916.781 410.206 936.944 415.103 957C416.31 961.944 416.548 967.078 417.747 972C419.757 980.251 422.614 988.563 423.712 997C424.396 1002.25 423.177 1006.88 423.177 1012C423.177 1015.32 423.958 1018.63 423.996 1022C424.076 1029.05 422.445 1035.04 421.525 1041.91C420.196 1051.85 419.695 1060.42 415.908 1070C414.08 1074.62 411.135 1078.57 408.98 1083C406.397 1088.31 396.277 1116.81 395.752 1121.98C394.936 1130.02 416.955 1128.84 422 1127zM174 918C174.109 930.076 178.266 943.939 180.385 956C181.377 961.64 181.693 967.336 182.804 973C184.458 981.434 186.955 989.304 186.999 998C187.078 1013.54 191.813 1029.35 191.996 1045C192.403 1079.77 168.188 1108.51 159 1141C162.655 1142.04 170.515 1142.86 173.233 1139.44C175.063 1137.14 172.758 1107.85 185.808 1092.02C196.274 1079.32 205.277 1088.08 201.974 1095C200.563 1097.96 197.678 1100.3 195.798 1103C193.154 1106.8 192.101 1110.52 191.26 1115C189.857 1122.47 189 1129.4 189 1137L193 1137C197.876 1136.97 207.035 1135.15 210.391 1131.35C212.019 1129.51 212.392 1120.17 213 1117C214.388 1109.78 215.279 1101.99 217.597 1095C219.693 1088.67 226.279 1081.79 225.392 1075C224.78 1070.31 222.237 1065.46 220.695 1061C217.923 1052.97 214.104 1040.35 214.004 1032C213.877 1021.45 217.252 1013.13 219.195 1003C221.416 991.425 222.136 979.704 222.004 968C221.574 930.086 245.036 941.504 221 896C202.543 900.223 202.722 917.74 174 918z"/> + +<!-- the white parts of the sheep --> + +<path style="fill:white; stroke:none" d="M218 135C223.108 134.765 229.035 134.291 234 133.102C241.949 131.198 257.242 124.781 264.97 127.724C269.531 129.46 270.749 137.603 272.692 142C283.092 165.53 273.541 175.982 261.145 195C258.419 199.182 258.802 203.83 255.469 207.911C253.081 210.834 249.847 212.869 247 215.298C227.926 231.569 207.81 243.477 183 248.448C177.687 249.513 172.485 251.194 167 250.909C161.075 250.601 155.625 252.091 150 251.793C144.896 251.523 121.892 247.556 119.168 249.026C114.882 251.339 105.79 263.984 105.311 269C105.054 271.694 106.132 274.321 106.249 277C106.418 280.857 104.054 288.508 102.282 291.961C100.69 295.063 98.0907 296.772 95.8635 299.323C86.8546 309.64 73.0782 323.089 70.1267 337C67.0578 351.464 80.5037 360.071 76.8544 370C73.985 377.807 65.5885 383.147 60.0422 389.001C56.0901 393.172 53.6224 398.018 50.8606 403C35.1377 431.359 47.8634 436.171 43.2622 447.986C41.989 451.255 38.9109 453.194 37.0704 456.088C32.4329 463.38 24.2604 480.649 22.5167 489C18.0603 510.342 37.236 519.119 37.3872 524.004C37.4598 526.348 34.0021 531.985 33.1583 535C31.0622 542.49 29.7744 549.66 26.9396 557C22.3597 568.858 16.8447 576.821 17.0037 590C17.2105 607.136 32.1331 610.129 32.833 616.015C33.1651 618.808 30.4354 621.348 29.6574 624C28.9914 626.27 29.415 628.669 28.7283 631C26.7423 637.74 22.594 643.749 22.0957 651C21.3866 661.32 24.2394 679.122 34.1026 684.7C42.021 689.178 50.6502 687.406 54.9946 698C61.2638 713.287 52.3061 725.469 50.4531 740C50.3383 740.901 53.3335 764.879 53.6829 766C54.6135 768.984 57.7665 771.699 59.8324 774C67.624 782.676 80.6918 790.199 79.9072 803C79.6265 807.58 77.2391 812.432 78.4337 817C80.0032 823.002 86.8018 825.892 90.0081 831.004C94.7151 838.507 96.759 848.154 103.327 854.778C106.944 858.427 112.186 859.174 115.775 863.103C123.207 871.237 116.614 882.736 126.211 891.612C128.56 893.785 134.847 896.945 138 897.611C143.918 898.862 154.042 895.856 161 896.014C167.921 896.172 178.498 900.82 184 899.195C191.759 896.904 196.768 889.163 203 884.555C211.847 878.014 215.542 881.778 224 870C218.168 865.714 210.001 860.336 211.106 852C211.564 848.541 212.802 845.607 213 842C215.976 843.567 219.154 843.712 221.986 845.173C227.619 848.078 229.479 853.824 237 854.774C245.023 855.787 260.299 842.539 265.926 836.912C269.174 833.663 272.174 829.385 277 828.458C284.352 827.046 298.991 839.708 308 840.817C319.697 842.256 323.48 834.523 333 831.893C336.936 830.806 340.12 833.195 344 833.381C362.055 834.246 354.781 851.595 370 856.815C379.088 859.933 387.463 849.331 395 850.345C405.269 851.727 410.189 863.698 420 863.518C428.722 863.358 439.45 854.786 448 852.029C456.848 849.176 465.579 850.272 474 845.589C478.329 843.181 481.903 839.056 484.673 835C491.131 825.54 483.256 820.786 490.226 813.103C494.123 808.808 499.639 808.133 503.828 804.585C511.533 798.058 521.305 783.441 525.121 774C528.778 764.95 520.423 750.564 524.175 743C528.036 735.219 538.566 731.906 544.985 726.534C551.471 721.106 561.707 698.49 561.424 690C560.867 673.334 588.06 667.174 593.075 649C594.103 645.273 596.79 634.401 596.62 631C596.341 625.41 594.668 618.338 592.972 613C590.45 605.063 583.309 594.123 588.734 586.043C590.434 583.511 593.654 580.72 596.774 582.705C599.925 584.71 600.004 589.796 601.361 593C606.589 605.347 613.647 617.033 613.986 631C614.121 636.582 609.737 658.487 606.998 663C603.223 669.219 595.889 675.557 590.832 680.985C587.934 684.095 582.823 686.662 580.687 690.103C578.802 693.137 580.424 696.697 579.566 700C578.547 703.925 575.222 707.043 573.758 711C566.062 731.794 563.495 734.429 546.057 747.899C543.281 750.044 540.617 754.215 543.855 757.359C547.266 760.671 565.113 747.708 571 746.768C575.053 746.121 579.07 747.536 583 748.336C587.029 749.155 591.016 749.252 595 750.439C605.311 753.51 607.165 756.738 619 754.181C651.33 747.195 617.066 722.858 662 722.999C669.486 723.023 679.485 723.205 686 719.187C710.493 704.08 695.855 697.731 707.103 687.324C711.608 683.156 718.642 678.566 724 675.524C730.205 672 741.038 669.196 743.738 661.985C744.929 658.802 744.367 642.211 743.161 639C741.463 634.476 737.844 631.023 737.226 626C735.037 608.217 762.587 613.962 762.998 579C763.043 575.002 762.994 570.999 762.998 567C763.008 561.84 764.127 546.254 771.999 547.028C774.569 547.281 776.519 549.825 777.49 552.004C779.249 555.954 779.605 569.235 779.558 573.996C779.467 583.225 779.496 594.331 776.187 603C772.755 611.994 758.723 622.248 757.782 626.014C758.226 624.236 760.929 655.497 760.986 658C761.402 676.353 747.488 683.814 733 691.512C729.186 693.539 724.243 694.922 721.313 698.211C721.443 698.064 713.015 720.332 712.865 721C712.318 723.433 713.061 726.607 713.665 729C717.904 745.802 732.707 736.259 732.996 761C733.186 777.246 730.368 784.809 748 792.826C750.947 794.166 754.101 793.13 756.958 794.402C761.422 796.39 761.562 800.564 764.495 803.584C768.114 807.311 780.742 811.229 786 810.957C790.575 810.72 793.726 808.263 798 807.391C804.885 805.987 810.702 810.384 817.943 805.774C824.316 801.717 821.981 786.325 835 786.538C837.788 786.584 840.275 788.196 843 788.581C850.251 789.607 860.751 779.603 862.087 773.035C862.573 770.641 860.58 762.953 860.327 760C859.18 746.643 866.162 746.468 873.817 739.612C876.27 737.415 888.502 719.947 889.351 717C891.632 709.075 880.873 700.929 879.98 691C878.947 679.515 891.726 670.298 897.417 661.961C898.92 659.759 900.894 652.789 901.484 650C904.14 637.439 891.637 633.269 894.392 621C896.62 611.08 911.12 607.309 914.612 591C917.354 578.199 902.621 567.928 909.098 555.004C912.874 547.469 929.298 537.703 930.402 531.912C933.415 516.1 914.191 500.116 913.431 482.83C912.36 458.428 929.665 454.037 930.904 436C932.127 418.204 915.863 408.907 914.38 398C913.168 389.083 926.338 378.759 925.786 368C925.323 358.985 921.437 354.419 917.413 347C915.829 344.078 915.126 340.826 913.316 338C911.37 334.963 908.577 332.519 907.261 329C907.181 328.235 906.829 304.22 907.261 303C908.031 298.623 909.918 295.711 909.996 291C910.618 253.08 876.724 264.117 870.142 247.996C866.135 238.184 871.528 229.777 870.817 220C869.983 208.52 862.63 194.678 851 191.173C844.559 189.232 838.011 189.28 832.039 185.639C819.728 178.131 829.987 167.488 811.999 157.692C808.805 155.953 805.69 153.71 802 153.226C798.951 152.825 796.028 153.823 793 153.823C789.956 153.823 787.085 152.959 784 153.183C778.612 153.574 772.876 155.008 768 157.325C763.841 159.301 756.996 165.783 753.001 165.464C747.888 165.055 737.701 152.722 732 149.51C728.682 147.64 725.589 148.167 722 147.49C716.228 146.525 715.018 145.579 709 147.49C700.798 149.983 690.913 163.968 682 169.538C656.788 185.292 634.797 189.18 606 193.299C600.186 194.13 594.98 195.927 589 195.996L585 195.996C579.665 195.904 571.015 192.233 566.43 195.289C562.661 197.8 565.083 205.053 564.958 209C564.78 214.58 560.306 236.75 560.737 239C561.266 241.764 563.051 244.382 564.075 247C565.478 250.588 565.613 254.489 567.067 258C569.327 263.456 573.077 268.375 575.036 274C577.09 279.897 577.853 288.739 578.014 295C578.213 302.715 580.394 310.339 580.793 318C580.982 321.625 580.047 325.324 580.004 329C579.924 335.787 582.24 342.624 581.894 349C581.433 357.494 578.414 366.654 576.664 375C575.415 380.961 575.002 387.06 573.526 393C570.017 407.115 558.951 433.684 548.817 443.817C540.629 452.004 517.469 462.303 506 465.241C498.898 467.06 491.109 465.918 484 467.247C480.3 462.946 474.148 468.136 469 467.247C465.229 467.025 461.698 465.301 458 464.516C450.259 462.872 445.332 462.35 438 458.515C431.789 455.266 425.036 452.486 419 449.051C411.661 444.875 405.058 439.648 398 435.088C392.385 431.461 386.286 427.963 381.284 423.484C375.496 418.301 340.444 376.59 339.908 376.382C336.846 375.195 321.924 381.724 316 381.961C311.325 382.148 304.184 381.202 302.4 375.959C301.286 372.683 304.124 369.916 307.015 368.826C309.536 368.161 312.382 368.913 315 368.826C321.454 368.084 329.304 365.797 333.775 360.897C341.767 352.138 334.447 342.589 335.923 333C336.566 328.822 340.654 323.97 340.644 320.039C340.635 316.547 329.258 306.158 325.912 305.732C322.257 305.267 318.92 308.334 315.004 307.517C312.857 307.07 311.091 305.742 309.938 303.893C304.372 294.973 318.117 289.848 320.383 283.003C323.06 274.917 307.115 272.705 309.101 264.003C310.744 256.805 330.701 250.773 333.555 239C335.893 229.354 320.202 215.069 327.43 207.391C332.254 202.267 347.128 203.497 353.912 200.504C358.698 198.393 361.533 194.669 367 193.043C373.92 190.984 381.563 191.843 387.956 187.778C394.914 183.353 389.792 168.898 401.999 170.495C409.811 171.516 408.956 178.15 412.699 182.473C416.202 186.52 426.65 190.547 432 189.785C451.501 187.008 450.486 161.436 460 162.576C466.153 163.312 466.487 170.207 470.391 172.84C471.346 173.484 501.748 179.805 504 179.897C506.638 180.004 508.562 179.664 511 178.639C527.346 171.764 515.799 164.643 523.416 156.222C533.975 144.548 546.393 161.853 556.542 134C557.517 131.326 559.022 128.799 559.611 126C560.143 123.476 560.166 119.582 558.262 117.595C556.551 115.809 553.287 115.777 551.103 114.547C549.014 113.371 541.304 103.133 541.62 101.077C541.903 99.2306 543.713 98.1014 545 97C541.837 91.9217 537.983 87.3298 538.466 81C538.841 76.0857 541.754 63.9755 539.259 60.4246C536.987 57.1933 533.157 54.7325 530 52.4471C513.322 40.3742 510.886 50.3303 501.042 45.1615C496.14 42.587 494.507 37.1925 491.241 33.0422C484.72 24.7573 471.657 17.0548 461 16.1863C448.087 15.1339 444.943 26.8054 437 27.8402C425.582 29.3276 420.177 19.2484 410 21.4246C403.395 22.8371 396.89 24.9793 391 28.3365C385.435 31.5086 379.141 39.3683 373 39.7209C360.146 40.4591 359.575 26.2933 345 31.8152C336.416 35.0675 324.788 46.3677 319.812 54C312.62 65.0292 311.913 79.7911 295 79.9963C290.674 80.0488 286.326 80.0472 282 79.9963C277.307 79.9411 272.482 77.9939 268 78.2959C245.577 79.8067 255.555 100.475 246.778 109.893C243.289 113.637 238.135 114.664 234.014 117.572C228.254 121.637 222.346 129.397 218 135zM614 775C610.045 773.865 605.959 773.825 602 772.701C594.495 770.569 579.853 763.526 572 764.817C568.798 765.343 558.483 771.104 555 772.893C551.05 774.921 544.779 777.118 541.904 780.388C538.348 784.431 538.049 789.726 535.16 793.894C533.1 796.867 530.764 797.311 528.324 799.491C526.044 801.528 524.328 804.437 522.695 807C520.41 810.584 518.605 814.706 515.673 817.817C511.754 821.976 499.913 826.538 505.026 834.373C508.997 840.877 515.537 836.352 520 834.373C522.665 832.816 525.143 832.687 527.355 830.431C531.203 826.509 531.649 820.891 538 818.982C541.831 817.831 556.961 824.898 564.999 824.648C571.99 824.431 572.143 820.006 577.042 817.085C582.112 814.063 586.338 816.171 591.897 812.082C592.396 811.715 610.388 784.946 611.446 783C612.826 780.46 613.426 777.801 614 775z"/> + +<!-- the outline of the sheep --> + +<path style="fill:black; stroke:none" d="M215 136C189.171 142.865 165.905 156.159 143 169.463C138.438 172.113 134.486 175.62 130 178.382C125.435 181.193 120.737 182.671 116 184.98C112.226 186.819 108.836 189.375 105 191.098C99.9126 193.383 93.2218 196.634 88 198.202C80.2275 200.536 67.9484 199.789 66.2406 211.004C65.4197 216.394 68.6656 219.337 71.923 223C74.5075 225.906 76.7728 229.84 80.092 231.915C83.7848 234.223 89.9794 237.311 94 239.009C99.2561 241.229 103.845 239.401 107 245C101.552 247.812 91.7448 262.912 91.1078 269C90.3387 276.35 93.3051 280.258 88.9532 287.912C85.7463 293.552 79.7541 296.58 75.4389 301.172C65.695 311.541 56.7426 327.143 53.5996 341C51.5202 350.167 61.5916 360.558 59.6043 367C57.8699 372.622 46.1458 379.432 42.4005 386C36.4026 396.518 29.3294 409.966 27.2101 422C26.1709 428.917 29.0512 436.535 27.2101 443C22.6112 457.834 5.05364 479.11 6.18259 495C6.62543 501.233 7.41269 510.202 9.5574 516C11.3249 520.778 18.0828 527.248 18.0565 531.088C17.9938 540.228 9.53826 557.352 6.01426 566C-2.17066 586.086 -4.0858 610.145 18 622L7.92315 644L9.1313 679L19.5265 695.907L37 708L38 708L39 705C43.033 720.26 29.2929 737.524 32.3267 755C32.8056 757.759 34.0695 760.269 34.6243 763C35.4409 767.02 35.1588 771.065 36.6607 775C39.3761 782.115 48.4919 789.088 53.5904 794.986C55.81 797.553 59.4344 800.141 60.9741 803.088C62.9389 806.849 59.0837 819.4 63.3613 828.999C67.3054 837.85 72.5753 836.245 77.6093 842.103C81.3379 846.442 82.515 853.008 85.4518 858C87.639 861.718 90.0401 865.845 93.1026 868.897C99.1064 874.88 102.751 872.348 103.07 882.039C103.601 898.216 119.168 913.869 135 915.817C142.87 916.785 154.01 914.251 162 913C165.325 931.479 166.019 950.406 168.155 969C169.239 978.44 171.605 987.633 172.613 997C173.046 999.808 172.688 1002.22 172.613 1005C171.75 1017.08 175.851 1030.61 175.998 1043L175.998 1048C175.965 1070.63 134.276 1140.89 138.738 1151.96C144.408 1166.02 177.322 1157.35 188 1155.46C191.327 1154.87 194.698 1155.25 198 1154.67C201.202 1154.11 203.918 1152.49 207 1151.63C215.385 1149.31 230.967 1147.21 234.658 1138C235.702 1135.39 237.213 1118.72 236.725 1116C236.036 1112.16 233.823 1110.34 234.019 1106C234.417 1097.18 243.832 1089.41 243.996 1077C244.223 1059.89 232.14 1045.16 231.093 1028C230.642 1020.62 234.499 1013.27 235.716 1006C238.046 992.062 238.978 978.106 239 964C239.02 951.339 246.844 942.044 246.996 929C247.058 923.691 247.345 918.191 246.102 913C244.573 906.616 232.708 884.733 235.641 880.438C239.64 874.581 261.078 865.235 268.828 858.335C271.634 855.837 275.217 849.641 279.014 849.562C283.265 849.474 298.129 860.716 315 859.954C323.516 859.57 328.233 852.583 336 852L340 848C341.987 860.909 348.906 876.132 364 876.87C370.393 876.997 375.419 875.4 382 876.87C384.808 873.919 387.923 873.037 389.53 878.042C390.339 880.562 387.085 894.338 387.193 899C387.526 913.358 391.468 930.905 394.576 945C396.848 955.3 398.861 965.764 401.235 976C403.242 984.658 405.982 993.085 406.832 1002C407.288 1006.79 406.127 1011.26 406.014 1016C405.6 1033.38 405.247 1049.59 398.549 1066C396.192 1071.77 393.075 1077.16 390.811 1083C387.495 1091.56 384.99 1100.5 381.548 1109C378.908 1115.52 374.194 1122.98 373.363 1130C372.552 1136.85 379.16 1145 386 1145.68C389.916 1146.07 393.875 1143.93 398 1144.1C407.105 1144.49 414.889 1145.86 424 1143.52C433.998 1140.95 443.115 1135.03 453 1132.51C455.681 1131.83 459.265 1130.87 462 1130.77C466.922 1130.59 469.985 1133.8 474.775 1129.57C478.827 1125.99 480.864 1114.34 480.986 1109C481.27 1096.5 478.579 1075.5 473.856 1064C471.183 1057.49 466.599 1052.33 463.879 1046C461.664 1040.84 461.636 1035.13 459.474 1030C456.304 1022.47 453.106 1016.45 452.817 1008C452.927 1001.61 452.129 994.264 452.817 988C453.161 981.39 455.182 974.684 455.832 968C456.401 962.143 456.13 955.726 457.517 950C459.134 943.319 462.836 936.324 465.576 930C478.353 900.513 476.519 893.234 461 866C468.757 863.938 476.973 862.17 484 858.121C487.626 856.033 493.904 848.628 497.014 848.562C499.109 848.518 502.884 850.732 505 851.534C513.922 854.914 517.836 850.817 517.996 864C518.072 870.229 518.192 875.852 519.449 882C521.597 892.51 525.528 903.055 524.908 914C524.584 919.726 523.946 926.643 521.884 932C519.517 938.15 515.685 943.72 513.518 950C509.517 961.595 508.536 973.363 505.255 985C504.018 989.388 500.836 993.623 500.237 998C498.016 1014.22 525.092 1009.33 534 1007.11C542.708 1004.93 551.324 1001.41 560 999.47C565.622 998.212 566.839 1000.71 571 1000.56C578.146 1000.31 583.275 989.302 582.663 983C582.26 978.858 580.829 975.293 581.093 971C581.919 957.526 592.621 948.477 590.817 934C589.254 921.459 578.288 922.569 576.154 916.192C575.171 913.258 576.994 903.027 577 899C577.012 891.146 575.068 883.553 575.077 876C575.084 870.408 581.091 847.562 583.387 842.004C586.427 834.643 600.638 828.717 606.673 821.912C619.343 807.625 621.62 785.737 632.183 770.103C636.351 763.935 644.794 763.047 648.914 755.986C651.071 752.289 651.437 746.263 652 742C667.995 742 684.065 743.061 698 734C702.436 752.886 713.003 752.492 715.283 759.015C716.429 761.822 715.442 765.126 715.283 768C714.426 775.794 713.996 789.526 718.801 795.908C725.497 804.801 758.539 818.839 760.672 828.018C761.489 831.534 757.457 845.613 757.088 851C756.385 861.28 759.823 871.008 759.823 881C759.823 887.449 757.375 893.812 755.898 900C755.108 903.313 755.045 906.684 754.332 910C751.544 922.961 743.767 936.331 739.345 949C737.533 954.191 730.011 993.73 730.419 998C730.759 1001.57 733.443 1006.95 736.327 1009.11C742.654 1013.86 752.212 1008.56 759 1008.1C764.727 1007.7 771.207 1009.12 777 1009.49C784.317 1009.95 790.91 1006.41 798 1005.94C802.868 1005.61 805.17 1008.67 808.999 1008.56C820.499 1008.26 815.968 990.137 816.001 983C816.103 960.991 826.229 959.211 827.778 950C829.165 941.755 825.286 937.221 823.054 930C822.035 926.706 820.34 911.385 820.703 908C820.998 905.25 825 881.37 825.559 880.088C827.575 875.469 831.511 873.665 833.073 868C834.685 862.155 834.37 855.117 835.271 849C836.498 840.671 837.233 832.295 838.428 824C839.203 818.618 840.746 813.442 841 808C856.686 807.847 881.79 789.497 880.957 773C880.71 768.099 876.811 761.648 879.683 757.165C881.622 754.139 885.308 751.827 887.673 748.996C893.984 741.445 905.698 724.732 906.663 715C907.85 703.026 896.849 695.939 897.159 689C897.281 686.251 900.012 680.629 901.254 678C903.042 674.214 904.093 669.69 906.221 666.168C910.896 658.431 914.864 656.031 914.996 646C915.046 642.236 912.271 625.535 912.409 625.088C913.141 622.727 918.391 618.455 920.241 615.996C927.873 605.851 932.146 597.728 931.996 585C931.926 578.995 925.898 563.773 926.41 562.014C928.487 554.879 946.82 549.712 947.907 532C948.299 525.607 943.306 508.749 940.201 503C936.823 496.744 928.874 487.428 928.904 480C928.932 472.972 947.629 454.823 947.983 436C948.071 431.317 948.592 422.182 947.149 418.014C944.476 410.301 934.973 405.741 933.856 396C933.281 390.981 943.424 378.717 942.894 369C942.691 365.294 938.111 349.229 936.273 346C934.469 342.83 931.812 340.22 930.121 337C928.948 334.767 928.49 332.25 927.318 330.014C925.685 326.901 922.02 324.341 921.355 320.961C920.473 316.475 926.78 306.069 928.213 301C929.372 296.902 929.046 292.231 928.996 288C928.72 264.34 911.792 242.733 888 239C888.513 232.673 889.368 226.33 889.817 220C890.999 203.357 877.27 181.6 863 173.914C857.362 170.877 850.399 171.587 845.056 168.69C838.175 164.957 841.952 151.202 819 139.753C810.633 135.58 809.392 134.941 800 135.003C789.213 135.074 778.434 135.315 768 138.439C763.992 139.639 756.129 144.462 753 144.457C748.049 144.449 741.654 137.267 736 135.635C730.607 134.079 724.712 135.972 719 135C722.718 129.854 730.791 125.413 731.759 119C733.029 110.591 726.463 106.67 719 107.092C713.604 107.397 708.468 108.993 703 108.993C691.22 108.993 649.994 101.245 639 97.0474C635.856 95.8469 633.122 93.8356 630 92.6072C626.462 91.2151 622.646 91.0497 619 90.0776C614.941 88.9954 611.215 87.231 607 86.8251C603.354 86.1546 599.673 86.9536 596 86.8251C590.166 87.0642 584.761 86.4184 579 86.092C570.179 85.5924 564.638 91.132 557.146 83.6969C547.989 74.6106 564.085 65.3414 552.789 52.0007C547.886 46.2105 532.182 32.8949 525 30.9269C519.87 29.5211 513.573 31.0399 509 29.0661C500.17 25.2547 493.037 11.6679 483.996 6.36129C453.48 -11.5508 436.754 10.6931 431.284 8.8752C429.407 8.25121 427.778 6.36271 425.961 5.44888C422.858 3.88749 419.391 3.93636 416 4.01426C396.436 4.4638 373.933 20.2318 371.284 20.3551C365.272 20.6351 362.435 2.65017 333 18.7985C325.95 22.6661 311.252 38.8448 307.312 46C305.165 49.8998 302.625 58.8516 299.609 61.2622C296.896 63.4311 287.562 64.1153 284 63.96C279.353 63.7574 275.468 61.805 271 60.9367C264.528 59.679 254.454 63.8214 249.004 67.27C242.89 71.1381 237.803 81.0725 235.926 88C235.075 91.1408 235.393 95.062 233.826 97.8974C231.853 101.464 225.412 104.578 222.183 107.513C215.419 113.663 209.318 127.954 215 136zM545 97C543.093 98.6314 540.794 100.031 541.894 102.926C542.548 104.646 549.429 113.604 551.103 114.547C553.287 115.777 556.551 115.809 558.262 117.595C560.166 119.582 560.143 123.476 559.611 126C559.022 128.799 557.517 131.326 556.542 134C546.393 161.853 533.975 144.548 523.416 156.222C515.799 164.643 527.346 171.764 511 178.639C502.868 182.059 496.72 177.626 489 176.26C483.4 175.27 476.452 175.941 471.211 173.301C466.481 170.918 465.833 162.065 459.004 162.539C450.608 163.122 450.879 187.097 432 189.785C426.65 190.547 416.202 186.52 412.699 182.473C408.956 178.15 409.811 171.516 401.999 170.495C389.792 168.898 394.914 183.353 387.956 187.778C381.563 191.843 373.92 190.984 367 193.043C361.533 194.669 358.698 198.393 353.912 200.504C346.872 203.61 331.227 202.043 326.739 208.211C321.225 215.787 335.81 229.696 333.555 239C330.701 250.773 310.744 256.805 309.101 264.003C307.115 272.705 323.06 274.917 320.383 283.003C318.117 289.848 304.372 294.973 309.938 303.893C311.091 305.742 312.857 307.07 315.004 307.517C318.92 308.334 322.257 305.267 325.912 305.732C329.258 306.158 340.635 316.547 340.644 320.039C340.655 324.391 336.12 329.086 335.826 334C335.416 340.844 339.046 348.092 337.055 355C331.77 373.339 305.385 364.431 302.4 373.053C300.435 378.727 308.814 381.737 313 381.957C320.478 382.35 337.606 374.165 341.673 377.472C344.271 379.584 346.885 385.05 349.042 387.961C351.803 391.686 355.628 393.785 358.613 397.172C361.229 400.14 362.677 403.917 365.327 406.912C380.455 424.007 399.14 437.751 419 449.051C423.131 451.402 427.75 453.067 432 455.258C437.413 458.048 443.112 461.699 449 463.366C454.334 464.876 460.411 465.409 466 466.922C472.071 468.403 480.702 463.387 484 466.922C491.109 465.918 498.898 467.06 506 465.241C517.469 462.303 540.629 452.004 548.817 443.817C558.951 433.684 570.017 407.115 573.526 393C575.002 387.06 575.415 380.961 576.664 375C578.414 366.654 581.433 357.494 581.894 349C582.166 343.972 580.066 339.144 580.004 334L580.004 329C580.047 325.324 580.982 321.625 580.793 318C580.394 310.339 578.213 302.715 578.014 295C577.853 288.739 577.09 279.897 575.036 274C573.077 268.375 569.327 263.456 567.067 258C565.613 254.489 565.478 250.588 564.075 247C563.051 244.382 561.266 241.764 560.737 239C560.306 236.75 564.78 214.58 564.958 209C565.083 205.053 562.661 197.8 566.43 195.289C571.04 192.217 579.645 195.926 585 195.996C592.602 196.097 598.643 194.351 606 193.299C627.445 190.231 653.121 187.103 672 175.688C677.345 172.456 683.146 169.228 687.912 165.196C694.295 159.795 701.245 149.845 709 147.49C715.018 145.579 716.228 146.525 722 147.49C725.589 148.167 728.682 147.64 732 149.51C737.701 152.722 747.888 165.055 753.001 165.464C756.996 165.783 763.841 159.301 768 157.325C772.876 155.008 778.612 153.574 784 153.183C787.085 152.959 789.956 153.823 793 153.823C796.028 153.823 798.951 152.825 802 153.226C805.69 153.71 808.805 155.953 811.999 157.692C829.719 167.343 819.85 175.939 830.183 184.365C836.205 189.274 843.977 189.057 851 191.173C862.63 194.678 869.983 208.52 870.817 220C871.528 229.777 866.135 238.184 870.142 247.996C876.724 264.117 910.618 253.08 909.996 291C909.918 295.711 908.031 298.623 907.261 303C906.829 304.22 907.181 328.235 907.261 329C908.577 332.519 911.37 334.963 913.316 338C915.126 340.826 915.829 344.078 917.413 347C921.437 354.419 925.323 358.985 925.786 368C926.355 379.088 912.375 389.572 914.57 399C915.552 403.217 918.466 405.695 920.664 409.168C925.381 416.619 930.397 423.98 930.908 433C931.841 449.474 915.373 459.248 914.106 471C910.715 502.474 928.53 504.521 930.38 528.996C931.154 539.232 911.809 546.369 908.272 557C904.153 569.379 917.232 578.768 914.612 591C911.12 607.309 896.62 611.08 894.392 621C891.039 635.934 908.927 636.99 898.494 659.996C896.91 663.488 893.949 665.432 891.442 668.168C888.278 671.623 880.451 683.541 879.971 688C878.63 700.448 891.237 707.523 889.594 716C888.917 719.495 876.689 737.039 873.817 739.612C866.162 746.468 859.18 746.643 860.327 760C860.576 762.907 862.529 770.705 862.057 773.088C861.544 775.675 858.772 778.921 857.115 780.985C844.64 796.524 839.338 782.536 830.001 788.01C819.709 794.043 823.993 800.211 819.686 804.445C813.364 810.66 806.112 806.316 799 807.225C792.725 808.027 791.048 811.374 783 810.957C779.186 810.76 767.07 806.236 764.495 803.584C761.85 800.861 761.509 797.106 757.897 794.892C754.73 792.952 752.135 794.291 749 793.231C746.401 792.352 744.22 790.319 742 788.768C734.384 783.447 733.019 783.708 733 774C732.985 766.717 733.936 753.147 730.147 747.015C724.482 737.847 717.123 742.708 713.665 729C713.061 726.607 712.318 723.433 712.865 721C713.015 720.332 721.443 698.064 721.313 698.211C724.243 694.922 729.186 693.539 733 691.512C745.319 684.967 760.604 676.696 760.986 661C761.087 656.84 758.144 624.97 758.114 625.039C760.355 619.916 773.285 613.11 776.924 601C779.326 592.48 781.103 558.179 776.924 551.019C775.986 549.215 774.199 547.245 771.999 547.028C764.127 546.254 763.008 561.84 763 567C762.986 575.696 763.585 589.074 760.032 597C754.87 608.516 735.607 612.85 737.226 626C737.844 631.023 741.463 634.476 743.161 639C744.367 642.211 744.929 658.802 743.738 661.985C741.038 669.196 730.205 672 724 675.524C718.642 678.566 711.608 683.156 707.103 687.324C696.221 697.392 709.537 706.114 685 719.789C677.983 723.7 664.053 723.057 656 722.884C627.509 722.27 642.656 742.545 627.999 750.523C603.432 764.16 584.594 737.79 562 750.523C558.333 752.475 545.392 761.932 542.909 755.851C542.114 753.905 542.411 751.906 543.613 750.208C545.14 748.049 548.792 746.124 551 744.562C555.907 741.09 562.7 735.264 565.586 730C569.109 723.575 571.449 715.728 574.491 709C575.783 706.143 578.179 703.927 579.262 701C580.605 697.374 578.681 693.333 580.687 690.103C582.823 686.662 587.934 684.095 590.832 680.985C595.889 675.557 603.223 669.219 606.998 663C609.083 659.564 613.882 638.301 613.986 634C614.357 618.695 607.065 606.471 601.361 593C600.086 589.991 599.995 585.648 597.57 583.357C595.825 581.709 594.091 581.627 592.042 582.795C580.936 589.13 590.334 604.697 592.972 613C594.668 618.338 596.341 625.41 596.62 631C596.74 633.403 593.663 647.203 592.781 649.999C587.603 666.406 562.925 674.061 561.388 687C561.141 689.343 561.787 691.652 561.388 694C560.468 698.907 550.972 720.354 547.778 723.911C541.224 731.211 528.521 734.24 524.175 743C520.759 749.886 527.118 762.477 526.29 770C525.96 772.998 520.955 783.273 519.189 786C517.5 788.609 505.048 803.748 502.911 805.304C498.753 808.333 493.896 809.057 490.226 813.103C483.256 820.786 491.131 825.54 484.673 835C481.903 839.056 478.329 843.181 474 845.589C465.579 850.272 456.848 849.176 448 852.029C439.603 854.736 427.519 864.109 419 863.501C409.653 862.833 405.046 851.697 395 850.345C387.739 849.368 379.782 859.154 371 857.106C355.068 853.391 362.399 834.263 344 833.381C340.12 833.195 336.936 830.806 333 831.893C323.078 834.634 319.577 842.876 307 840.673C298.913 839.257 285.932 828.635 279 828.317C269.542 827.883 251.167 856.563 237 854.774C230.232 853.919 228.029 848.96 222.961 845.734C220.002 843.85 216.227 843.699 213 842C212.802 845.607 211.564 848.541 211.106 852C210.001 860.336 218.168 865.714 224 870C215.542 881.778 211.847 878.014 203 884.555C196.768 889.163 191.759 896.904 184 899.195C178.498 900.82 167.921 896.172 161 896.014C154.042 895.856 143.918 898.862 138 897.611C134.847 896.945 128.56 893.785 126.211 891.612C116.614 882.736 123.207 871.237 115.775 863.103C112.186 859.174 106.944 858.427 103.327 854.778C96.759 848.154 94.7151 838.507 90.0081 831.004C86.8018 825.892 80.0032 823.002 78.4337 817C77.2391 812.432 79.6265 807.58 79.9072 803C80.6918 790.199 67.624 782.676 59.8324 774C57.7665 771.699 54.6135 768.984 53.6829 766C53.3335 764.879 50.3383 740.901 50.4531 740C52.3061 725.469 61.2638 713.287 54.9946 698C50.6502 687.406 42.021 689.178 34.1026 684.7C24.2394 679.122 21.3866 661.32 22.0957 651C22.594 643.749 26.7423 637.74 28.7283 631C29.415 628.669 28.9914 626.27 29.6574 624C30.4354 621.348 33.1651 618.808 32.833 616.015C32.1331 610.129 17.2105 607.136 17.0037 590C16.8447 576.821 22.3597 568.858 26.9396 557C29.7744 549.66 31.0622 542.49 33.1583 535C34.0021 531.985 37.4598 526.348 37.3872 524.004C37.236 519.119 18.0603 510.342 22.5167 489C24.2604 480.649 32.4329 463.38 37.0704 456.088C38.9109 453.194 41.989 451.255 43.2622 447.986C47.8634 436.171 35.1377 431.359 50.8606 403C53.6224 398.018 56.0901 393.172 60.0422 389.001C65.5885 383.147 73.985 377.807 76.8544 370C80.5037 360.071 67.0578 351.464 70.1267 337C73.0782 323.089 86.8546 309.64 95.8635 299.323C98.0907 296.772 100.69 295.063 102.282 291.961C104.054 288.508 106.418 280.857 106.249 277C106.132 274.321 105.054 271.694 105.311 269C105.79 263.984 114.882 251.339 119.168 249.026C121.892 247.556 144.896 251.523 150 251.793C155.625 252.091 161.075 250.601 167 250.909C188.698 252.036 224.823 234.47 241 220.702C246.765 215.795 261.746 205.93 258.259 197.043C257.509 195.132 255.976 193.427 253.957 192.845C251.656 192.181 249.838 193.14 248 194.43C241.693 198.856 236.131 204.778 230 209.474C221.3 216.136 210.113 221.925 200 226.139C190.652 230.033 176.173 234.425 166 233.821C160.872 233.517 157.02 234.279 152 234.676C144.552 235.266 127.097 231.867 120 229.281C117.138 228.238 114.83 226.132 112.001 224.999C109.018 223.806 105.777 224.145 102.832 223.034C98.748 221.493 92.486 217.698 89 215C101.796 207.746 116.27 202.845 129 195.394C141.94 187.819 154.083 178.91 167 171.346C185.218 160.679 204.285 151.936 224 144.459C234.374 140.524 248.062 135.691 259 134.284C260.815 134.051 270.33 133.786 267.997 129.759C263.687 122.319 239.434 131.964 233 133.332C228.309 134.329 222.798 134.78 218 135C222.346 129.397 228.254 121.637 234.014 117.572C238.135 114.664 243.289 113.637 246.778 109.893C255.555 100.475 245.577 79.8067 268 78.2959C272.482 77.9939 277.307 79.9411 282 79.9963C286.401 80.048 298.411 80.5098 301.961 79.1107C312.661 74.8943 314.315 62.4289 319.812 54C322.509 49.8629 335.67 36.2714 340.001 33.9835C360.302 23.2587 357.98 40.5834 373 39.7209C379.072 39.3722 384.756 32.1105 390 28.9254C396.087 25.2287 405.888 21.6131 413 20.8619C418.487 20.2822 419.632 23.3745 424 25.5482C426.659 26.8712 431.02 27.5933 434 27.8272C445.045 28.6943 447.292 15.0691 461 16.1863C471.657 17.0548 484.72 24.7573 491.241 33.0422C494.507 37.1925 496.14 42.587 501.042 45.1615C510.886 50.3303 513.322 40.3742 530 52.4471C533.157 54.7325 536.987 57.1933 539.259 60.4246C541.754 63.9755 538.841 76.0857 538.466 81C537.983 87.3298 541.837 91.9217 545 97zM698 126C696.57 132.82 692.352 136.056 687.919 141.024C665.778 165.843 640.067 170.089 609 174.287C602.576 175.156 596.529 177.705 590 177.961C584.402 178.18 579.475 176.26 574 176.21C571.615 175.943 569.364 176.215 567.001 176.21C559.614 176.9 555.823 167.214 558.022 161C559.003 158.23 562.317 154.509 564.088 152C566.838 148.105 578.215 128.721 578.581 125C579.249 118.2 572.25 107.814 569 102.193L589 102.193L601 102.193L631 112.533L650 118.241L661 119.323L698 126zM345 372C349.45 356.395 351.197 360.586 349.847 343C349.192 334.469 358.657 326.837 357.588 316C356.332 303.271 341.238 300.084 337.56 289.832C336.459 286.764 337.145 281.495 336.715 278C336.312 274.724 334.334 267.713 334.612 265C335.332 257.971 348.809 250.962 350.149 240C350.864 234.148 343.379 221.184 346.637 217.853C346.418 218.077 372.718 207.833 374 207.53C378.705 206.417 383.245 207.099 388 205.457C392.512 203.899 401.393 197.883 405 197.998C413.256 198.261 422.551 208.741 434 206.097C446.611 203.185 461.073 187.961 464.039 187.729C466.032 187.16 468.915 187.835 471 187.729C490.413 189.283 503.57 201.075 523 190.125C533.497 184.21 535.609 179.973 539 169C541.193 170.035 543.357 170.814 544.402 173.211C545.229 175.108 545.731 194.296 544.939 195.912C542.259 201.383 535.802 201.993 534.506 211C533.81 215.837 537.424 223.091 538.756 228C542.195 240.676 547.026 238.237 550.282 244.128C553.072 249.176 552.882 255.517 554.428 261C555.902 266.229 558.732 270.867 560.214 276C562.382 283.512 561.901 290.513 562.703 298C564.013 310.231 565.577 322.723 564.875 335C564.368 339.222 564.627 341.84 564.875 346C565.75 352.315 561.444 367.418 559.758 374C558.337 379.547 557.865 385.459 556.397 391C554.211 399.249 544.551 421.588 539.473 427.985C535.934 432.443 529.849 436.068 525 439.048C517.319 443.769 499.018 449.676 490 448.803C484.039 448.226 478.027 445.292 472 444.284C467.822 443.586 462.134 441.966 458 442.299C455.487 442.501 453.414 443.848 451 444.266C446.621 445.023 440.984 441.106 437 439.311C433.405 437.691 429.485 436.784 426 434.96C418.199 430.876 411.364 425.438 404 420.692C399.017 417.48 393.519 414.579 389.039 410.676C384.536 406.753 378.357 401.163 374.491 396.701C372.414 394.303 371.26 391.45 368.894 389.211C365.44 385.943 360.902 384.814 357.207 382.037C352.789 378.716 350.023 375.031 345 372zM391.001 220.659C379.755 223.069 371.076 260.456 401 261.957C414.475 262.633 413.474 255.09 413.039 245C412.528 233.172 412.682 225.378 399 221.641C396.542 220.97 393.541 220.114 391.001 220.659zM535.092 387.023C530.526 389.472 520.312 406.501 522.602 411.729C523.508 413.797 526.05 414.978 528.004 415.851C530.09 416.782 532.64 417.788 534.893 416.805C539.896 414.622 539.065 406.406 540.542 402C542.053 397.492 549.329 388.359 539.981 386.333C538.366 385.983 536.546 386.243 535.092 387.023zM468 390C468.789 393.15 471.267 396.637 471.613 399.576C471.86 401.674 470.015 406.326 469.773 409C469.081 416.642 480.656 426.846 486.259 421.259C491.519 416.012 481.697 386.915 468 390zM614 775C613.426 777.801 612.826 780.46 611.446 783C610.388 784.946 592.396 811.715 591.897 812.082C586.338 816.171 582.112 814.063 577.042 817.085C572.143 820.006 571.99 824.431 564.999 824.648C556.961 824.898 541.831 817.831 538 818.982C531.649 820.891 531.203 826.509 527.355 830.431C525.143 832.687 522.665 832.816 520 834.373C515.537 836.352 508.997 840.877 505.026 834.373C499.913 826.538 511.754 821.976 515.673 817.817C518.605 814.706 520.41 810.584 522.695 807C524.328 804.437 526.044 801.528 528.324 799.491C530.764 797.311 533.1 796.867 535.16 793.894C538.049 789.726 538.348 784.431 541.904 780.388C544.779 777.118 551.05 774.921 555 772.893C558.483 771.104 568.798 765.343 572 764.817C579.853 763.526 594.495 770.569 602 772.701C605.959 773.825 610.045 773.865 614 775zM819 826C818.652 833.092 815.603 837.535 813.345 844C810.389 852.459 808.188 861.16 806.754 870C805.628 876.939 805.528 884.042 804.575 891C803.475 899.037 801.25 906.85 801.964 915C802.457 920.624 802.311 927.621 803.526 933C804.375 936.753 807.733 942.549 807.377 946C806.988 949.765 803.122 954.195 801.71 958C798.696 966.119 798.153 974.463 797.996 982.999C797.962 984.788 798.021 987.032 796.978 988.758C794.17 992.722 780.924 994.985 778.401 988.758C775.539 982.09 778.249 968.977 780.442 962C782.453 955.601 787.837 951.87 790.146 946C792.024 941.226 789.969 936.907 785.076 935.339C781.796 934.288 778.671 935.701 776.035 937.646C763.647 946.783 758.506 975.63 762 990L749 992C749.021 984.907 750.708 978.894 751.916 972C752.792 967.004 752.948 961.836 754.519 957C758.793 943.841 765.523 931.308 769.652 918C771.174 913.095 771.578 908 772.661 903C773.982 896.905 775.922 891.309 775.996 885C776.139 872.863 770 837.463 778.724 828.724C780.255 827.189 782.982 826.617 785.001 825.976C800.371 821.095 796.386 824.97 810 826.523C813.014 826.867 816 826.241 819 826zM537 988C532.705 990.083 524.627 993.616 522.57 986.943C518.72 974.452 533.456 948.664 537.621 937C539.872 930.694 540.991 922.677 541.698 916C542.131 911.902 540.893 908.012 540.274 904C538.304 891.235 533.152 877.712 533.004 865C532.938 859.346 531.703 847.379 535.314 843.107C536.749 841.409 538.764 839.953 541 839.613C543.615 839.215 562.409 843.011 563.363 845.3C564.662 848.414 557.323 871.64 557.759 879C558.037 883.706 559.477 888.31 559.817 893C560.418 901.275 557.052 909.532 557.784 918C559.286 935.374 572.111 935.286 572.298 940.131C572.419 943.245 564.134 957.861 564.004 969C563.964 972.366 564.686 978.942 562.402 981.491C560.544 983.563 553.193 986.167 551.637 982.672C548.415 975.435 565.521 948.992 549.985 945.077C547.189 944.372 544.47 945.709 543.012 948.128C543.022 948.111 536.346 978.52 536.186 980C535.877 982.867 536.329 985.239 537 988zM443 873C445.544 877.311 445.976 881.946 448.174 885.897C450.9 890.8 455.444 890.216 456.658 898C458.739 911.344 446.012 931.603 441.844 944C439.623 950.606 440.542 957.275 439.715 964C438.524 973.673 435.046 983.309 435.001 993C434.942 1005.53 434.749 1017.86 438.302 1030C439.448 1033.92 442.07 1037.11 443.198 1041C444.065 1043.99 443.404 1047.08 444.39 1050C447.01 1057.75 453.101 1065.39 456.487 1073C460.342 1081.67 461.885 1095.49 461.996 1105C462.024 1107.39 462.394 1113.61 460.978 1115.4C460.101 1116.51 438.241 1121.9 436.471 1120.89C433.719 1119.31 433.117 1114.84 433.018 1112C432.623 1100.66 438.795 1093.25 440.286 1083C440.867 1079.01 437.43 1074.06 433.003 1074.96C423.476 1076.9 417.349 1103.52 417.748 1112C418.038 1118.16 419.997 1121.44 422 1127C416.955 1128.84 394.936 1130.02 395.752 1121.98C396.277 1116.81 406.397 1088.31 408.98 1083C411.135 1078.57 414.08 1074.62 415.908 1070C419.709 1060.39 420.17 1051.79 421.539 1041.83C422.479 1034.99 424.076 1029.02 423.996 1022C423.958 1018.63 423.177 1015.32 423.177 1012C423.177 1006.88 424.396 1002.25 423.712 997C422.614 988.563 419.757 980.251 417.747 972C416.548 967.078 416.31 961.944 415.103 957C410.206 936.944 403.659 916.781 402.183 896C400.887 877.767 413.727 884.191 425 880.961C431.525 879.091 436.682 874.997 443 873zM221 896C245.036 941.504 221.574 930.086 222.004 968C222.136 979.704 221.416 991.425 219.195 1003C217.252 1013.13 213.877 1021.45 214.004 1032C214.104 1040.35 217.923 1052.97 220.695 1061C222.237 1065.46 224.78 1070.31 225.392 1075C226.279 1081.79 219.693 1088.67 217.597 1095C215.279 1101.99 214.388 1109.78 213 1117C212.392 1120.17 212.019 1129.51 210.391 1131.35C207.035 1135.15 197.876 1136.97 193 1137L189 1137C189 1129.4 189.857 1122.47 191.26 1115C192.101 1110.52 193.154 1106.8 195.798 1103C197.678 1100.3 200.563 1097.96 201.974 1095C205.277 1088.08 196.274 1079.32 185.808 1092.02C172.758 1107.85 175.063 1137.14 173.233 1139.44C170.515 1142.86 162.655 1142.04 159 1141C168.188 1108.51 192.403 1079.77 191.996 1045C191.809 1028.99 187.184 1012.95 186.996 997C186.903 989.066 184.573 981.695 183.004 974C181.781 968.001 181.436 961.98 180.385 956C178.266 943.939 174.109 930.076 174 918C202.722 917.74 202.543 900.223 221 896z"/> + +<metadata> + <!-- This metadata is in XMP --> + <?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> + <rdf:RDF + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + <rdf:Description rdf:about=""> + <dc:rights> + <rdf:Bag> + <rdf:li xml:lang="en"> + + Copyright © 2000 Coralie Mercier & Bert Bos. This work is + licensed under a Creative Commons + Attribution-NonCommercial-NoDerivs 3.0 Unported License. Please, + contact bert@w3.org or coralie@w3.org for licenses for other + usages. + + </rdf:li> + <rdf:li xml:lang="zxx" + rdf:resource="http://creativecommons.org/licenses/by-nc-nd/3.0/"/> + </rdf:Bag> + </dc:rights> + <dc:creator> + <rdf:Bag> + <rdf:li>Coralie Mercier</rdf:li> + <rdf:li>Bert Bos</rdf:li> + </rdf:Bag> + </dc:creator> + <dc:date>2000-03-02</dc:date> + </rdf:Description> + </rdf:RDF> + <?xpacket end="w"?> +</metadata> + +</svg> diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svgz b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svgz Binary files differnew file mode 100644 index 0000000000..5b3686579b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svgz diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svgz.headers b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svgz.headers new file mode 100644 index 0000000000..9e2c13e632 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/woolly-64.svgz.headers @@ -0,0 +1 @@ +Content-Encoding: gzip diff --git a/testing/web-platform/tests/css/css-ui/support/cursors/woolly.svg b/testing/web-platform/tests/css/css-ui/support/cursors/woolly.svg new file mode 100644 index 0000000000..de84a62172 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/cursors/woolly.svg @@ -0,0 +1,60 @@ +<svg viewBox="-140 -30 1280 1280" + xmlns="http://www.w3.org/2000/svg"> + +<title>Woolly le Mouton</title> + +<desc> +Woolly is a sheep, originally drawn by Coralie Mercier on 2 March 2000 +and scanned and converted to SVG by Bert Bos, between 3 March 2000 and +5 July 2000. +</desc> + + + +<!-- the pink parts of the sheep --> + +<path style="fill:#ffcc99; stroke:none" d="M569 102.193C572.25 107.814 579.249 118.2 578.581 125C578.215 128.721 566.838 148.105 564.088 152C562.317 154.509 559.003 158.23 558.022 161C555.823 167.214 559.614 176.9 567.001 176.21C569.364 176.215 571.615 175.943 574 176.21C578.433 176.218 582.567 177.782 587 177.961C594.738 178.273 601.492 175.302 609 174.287C640.067 170.089 665.778 165.843 687.919 141.024C692.352 136.056 696.57 132.82 698 126L661 119.323L650 118.241L631 112.533L601 102.193L589 102.193L569 102.193zM89 215C92.4749 217.69 98.8285 221.551 102.912 223.027C105.848 224.089 109.041 223.799 112.004 224.999C114.827 226.142 117.14 228.239 120 229.281C128.704 232.452 139.753 233.888 149 234.673C153.713 235.074 158.251 233.22 163 233.665C165.044 233.638 166.932 233.966 169 233.665C182.069 232.879 194.177 228.878 206 223.46C213.923 219.829 223.082 214.771 230 209.474C233.872 206.509 247.672 193.748 250.999 192.845C254.709 191.837 256.865 194.508 259 197C263.369 193.844 271.995 184.99 273.995 180C277.514 171.216 274.111 141.78 270 133C233.626 137.798 198.547 152.875 167 171.346C154.083 178.91 141.94 187.819 129 195.394C116.27 202.845 101.796 207.746 89 215zM539 169C535.609 179.973 533.497 184.21 523 190.125C503.57 201.075 490.413 189.283 471 187.729C468.915 187.835 466.032 187.16 464.039 187.729C461.073 187.961 446.611 203.185 434 206.097C422.551 208.741 413.256 198.261 405 197.998C401.393 197.883 392.512 203.899 388 205.457C383.245 207.099 378.705 206.417 374 207.53C372.718 207.833 346.418 218.077 346.637 217.853C343.379 221.184 350.864 234.148 350.149 240C348.809 250.962 335.332 257.971 334.612 265C334.334 267.713 336.312 274.724 336.715 278C337.145 281.495 336.459 286.764 337.56 289.832C341.238 300.084 356.332 303.271 357.588 316C358.657 326.837 349.192 334.469 349.847 343C351.197 360.586 349.45 356.395 345 372C350.023 375.031 352.789 378.716 357.207 382.037C360.902 384.814 365.44 385.943 368.894 389.211C371.26 391.45 372.414 394.303 374.491 396.701C378.357 401.163 384.536 406.753 389.039 410.676C393.519 414.579 399.017 417.48 404 420.692C411.364 425.438 418.199 430.876 426 434.96C429.485 436.784 433.405 437.691 437 439.311C440.984 441.106 446.621 445.023 451 444.266C453.414 443.848 455.487 442.501 458 442.299C462.134 441.966 467.822 443.586 472 444.284C478.027 445.292 484.039 448.226 490 448.803C499.018 449.676 517.319 443.769 525 439.048C529.454 436.311 535.248 432.875 538.673 428.958C551.747 414.007 562.897 369.153 564.875 349C565.555 344.535 564.326 339.797 564.875 335C565.577 322.723 564.013 310.231 562.703 298C561.901 290.513 562.382 283.512 560.214 276C558.732 270.867 555.902 266.229 554.428 261C552.882 255.517 553.072 249.176 550.282 244.128C547.026 238.237 542.195 240.676 538.756 228C537.424 223.091 533.81 215.837 534.506 211C535.802 201.993 542.259 201.383 544.939 195.912C545.731 194.296 545.229 175.108 544.402 173.211C543.357 170.814 541.193 170.035 539 169zM392 220.514C394.232 220.296 397.822 221.26 400 221.913C412.883 225.77 412.56 233.907 413.039 245C413.474 255.09 414.475 262.633 401 261.957C370.908 260.448 379.541 221.73 392 220.514zM536.039 386.813C537.825 385.946 540.197 386.054 541.854 386.813C548.262 390.769 542.032 397.555 540.542 402C539.065 406.406 539.896 414.622 534.893 416.805C532.64 417.788 530.09 416.782 528.004 415.851C526.05 414.978 523.508 413.797 522.602 411.729C520.243 406.344 530.99 388.459 536.039 386.813zM468 390C481.697 386.915 491.519 416.012 486.259 421.259C480.655 426.847 469.082 416.641 469.773 409C470.029 406.162 471.835 401.883 471.563 399.424C471.244 396.552 468.774 393.087 468 390zM749 992L762 990C758.901 977.257 765.297 931.234 784.284 935.099C799.904 938.279 783.545 954.018 781.128 960C778.759 965.862 777.447 973.692 777.092 980C776.47 991.042 779.544 994.068 790 991.789C792.352 991.276 795.533 990.709 796.978 988.574C798.432 986.425 797.972 980.686 798.004 978C798.074 971.977 799.814 962.566 802.093 957C803.489 953.589 807.021 949.453 807.377 946C807.733 942.549 804.375 936.753 803.526 933C802.211 927.181 802.181 919.085 801.808 913C801.363 905.746 803.59 898.196 804.575 891C805.669 883.014 805.866 874.97 807.25 867C808.653 858.92 810.888 850.709 813.695 843C816.079 836.45 818.639 833.355 819 826L810 826.523L796 823.391L787 825.33L778.724 828.724L774.004 848L776 883L770.245 916L754.519 957L751.916 972L749 992zM537 988C536.329 985.239 535.877 982.867 536.186 980C536.167 980.178 543.139 947.746 542.567 949.015C543.451 947.052 544.887 945.62 547.019 945.077C549.108 944.545 551.138 945.184 552.775 946.524C562.875 954.792 548.842 976.394 551.637 982.672C553.193 986.167 560.544 983.563 562.402 981.491C564.686 978.942 563.964 972.366 564.004 969C564.134 957.861 572.419 943.245 572.298 940.131C572.111 935.287 559.279 935.366 557.784 918C557.14 910.519 559.292 903.384 559.817 896C560.221 890.33 558.094 884.653 557.759 879C557.323 871.64 564.662 848.414 563.363 845.3C562.409 843.011 543.615 839.215 541 839.613C538.764 839.953 536.749 841.409 535.314 843.107C531.703 847.379 532.938 859.346 533.004 865C533.152 877.712 538.304 891.235 540.274 904C540.893 908.012 542.131 911.902 541.698 916C540.991 922.677 539.872 930.694 537.621 937C533.456 948.664 518.72 974.452 522.57 986.943C524.627 993.616 532.705 990.083 537 988zM422 1127C419.997 1121.44 418.038 1118.16 417.748 1112C417.349 1103.52 423.476 1076.9 433.003 1074.96C437.43 1074.06 440.867 1079.01 440.286 1083C438.779 1093.36 428.02 1107.87 434.606 1118.85C435.496 1120.34 436.355 1121.17 438.128 1121.39C439.644 1121.57 460.538 1115.96 460.978 1115.4C462.394 1113.61 462.024 1107.39 461.996 1105C461.885 1095.49 460.342 1081.67 456.487 1073C453.101 1065.39 447.01 1057.75 444.39 1050C443.404 1047.08 444.065 1043.99 443.198 1041C442.07 1037.11 439.448 1033.92 438.302 1030C434.667 1017.57 434.853 1004.83 435.004 992C435.108 983.13 438.299 973.872 439.572 965C440.581 957.977 439.524 950.901 441.844 944C446.012 931.603 458.739 911.344 456.658 898C455.444 890.216 450.9 890.8 448.174 885.897C445.976 881.946 445.544 877.311 443 873C436.682 874.997 431.525 879.091 425 880.961C413.727 884.191 400.887 877.767 402.183 896C403.659 916.781 410.206 936.944 415.103 957C416.31 961.944 416.548 967.078 417.747 972C419.757 980.251 422.614 988.563 423.712 997C424.396 1002.25 423.177 1006.88 423.177 1012C423.177 1015.32 423.958 1018.63 423.996 1022C424.076 1029.05 422.445 1035.04 421.525 1041.91C420.196 1051.85 419.695 1060.42 415.908 1070C414.08 1074.62 411.135 1078.57 408.98 1083C406.397 1088.31 396.277 1116.81 395.752 1121.98C394.936 1130.02 416.955 1128.84 422 1127zM174 918C174.109 930.076 178.266 943.939 180.385 956C181.377 961.64 181.693 967.336 182.804 973C184.458 981.434 186.955 989.304 186.999 998C187.078 1013.54 191.813 1029.35 191.996 1045C192.403 1079.77 168.188 1108.51 159 1141C162.655 1142.04 170.515 1142.86 173.233 1139.44C175.063 1137.14 172.758 1107.85 185.808 1092.02C196.274 1079.32 205.277 1088.08 201.974 1095C200.563 1097.96 197.678 1100.3 195.798 1103C193.154 1106.8 192.101 1110.52 191.26 1115C189.857 1122.47 189 1129.4 189 1137L193 1137C197.876 1136.97 207.035 1135.15 210.391 1131.35C212.019 1129.51 212.392 1120.17 213 1117C214.388 1109.78 215.279 1101.99 217.597 1095C219.693 1088.67 226.279 1081.79 225.392 1075C224.78 1070.31 222.237 1065.46 220.695 1061C217.923 1052.97 214.104 1040.35 214.004 1032C213.877 1021.45 217.252 1013.13 219.195 1003C221.416 991.425 222.136 979.704 222.004 968C221.574 930.086 245.036 941.504 221 896C202.543 900.223 202.722 917.74 174 918z"/> + +<!-- the white parts of the sheep --> + +<path style="fill:white; stroke:none" d="M218 135C223.108 134.765 229.035 134.291 234 133.102C241.949 131.198 257.242 124.781 264.97 127.724C269.531 129.46 270.749 137.603 272.692 142C283.092 165.53 273.541 175.982 261.145 195C258.419 199.182 258.802 203.83 255.469 207.911C253.081 210.834 249.847 212.869 247 215.298C227.926 231.569 207.81 243.477 183 248.448C177.687 249.513 172.485 251.194 167 250.909C161.075 250.601 155.625 252.091 150 251.793C144.896 251.523 121.892 247.556 119.168 249.026C114.882 251.339 105.79 263.984 105.311 269C105.054 271.694 106.132 274.321 106.249 277C106.418 280.857 104.054 288.508 102.282 291.961C100.69 295.063 98.0907 296.772 95.8635 299.323C86.8546 309.64 73.0782 323.089 70.1267 337C67.0578 351.464 80.5037 360.071 76.8544 370C73.985 377.807 65.5885 383.147 60.0422 389.001C56.0901 393.172 53.6224 398.018 50.8606 403C35.1377 431.359 47.8634 436.171 43.2622 447.986C41.989 451.255 38.9109 453.194 37.0704 456.088C32.4329 463.38 24.2604 480.649 22.5167 489C18.0603 510.342 37.236 519.119 37.3872 524.004C37.4598 526.348 34.0021 531.985 33.1583 535C31.0622 542.49 29.7744 549.66 26.9396 557C22.3597 568.858 16.8447 576.821 17.0037 590C17.2105 607.136 32.1331 610.129 32.833 616.015C33.1651 618.808 30.4354 621.348 29.6574 624C28.9914 626.27 29.415 628.669 28.7283 631C26.7423 637.74 22.594 643.749 22.0957 651C21.3866 661.32 24.2394 679.122 34.1026 684.7C42.021 689.178 50.6502 687.406 54.9946 698C61.2638 713.287 52.3061 725.469 50.4531 740C50.3383 740.901 53.3335 764.879 53.6829 766C54.6135 768.984 57.7665 771.699 59.8324 774C67.624 782.676 80.6918 790.199 79.9072 803C79.6265 807.58 77.2391 812.432 78.4337 817C80.0032 823.002 86.8018 825.892 90.0081 831.004C94.7151 838.507 96.759 848.154 103.327 854.778C106.944 858.427 112.186 859.174 115.775 863.103C123.207 871.237 116.614 882.736 126.211 891.612C128.56 893.785 134.847 896.945 138 897.611C143.918 898.862 154.042 895.856 161 896.014C167.921 896.172 178.498 900.82 184 899.195C191.759 896.904 196.768 889.163 203 884.555C211.847 878.014 215.542 881.778 224 870C218.168 865.714 210.001 860.336 211.106 852C211.564 848.541 212.802 845.607 213 842C215.976 843.567 219.154 843.712 221.986 845.173C227.619 848.078 229.479 853.824 237 854.774C245.023 855.787 260.299 842.539 265.926 836.912C269.174 833.663 272.174 829.385 277 828.458C284.352 827.046 298.991 839.708 308 840.817C319.697 842.256 323.48 834.523 333 831.893C336.936 830.806 340.12 833.195 344 833.381C362.055 834.246 354.781 851.595 370 856.815C379.088 859.933 387.463 849.331 395 850.345C405.269 851.727 410.189 863.698 420 863.518C428.722 863.358 439.45 854.786 448 852.029C456.848 849.176 465.579 850.272 474 845.589C478.329 843.181 481.903 839.056 484.673 835C491.131 825.54 483.256 820.786 490.226 813.103C494.123 808.808 499.639 808.133 503.828 804.585C511.533 798.058 521.305 783.441 525.121 774C528.778 764.95 520.423 750.564 524.175 743C528.036 735.219 538.566 731.906 544.985 726.534C551.471 721.106 561.707 698.49 561.424 690C560.867 673.334 588.06 667.174 593.075 649C594.103 645.273 596.79 634.401 596.62 631C596.341 625.41 594.668 618.338 592.972 613C590.45 605.063 583.309 594.123 588.734 586.043C590.434 583.511 593.654 580.72 596.774 582.705C599.925 584.71 600.004 589.796 601.361 593C606.589 605.347 613.647 617.033 613.986 631C614.121 636.582 609.737 658.487 606.998 663C603.223 669.219 595.889 675.557 590.832 680.985C587.934 684.095 582.823 686.662 580.687 690.103C578.802 693.137 580.424 696.697 579.566 700C578.547 703.925 575.222 707.043 573.758 711C566.062 731.794 563.495 734.429 546.057 747.899C543.281 750.044 540.617 754.215 543.855 757.359C547.266 760.671 565.113 747.708 571 746.768C575.053 746.121 579.07 747.536 583 748.336C587.029 749.155 591.016 749.252 595 750.439C605.311 753.51 607.165 756.738 619 754.181C651.33 747.195 617.066 722.858 662 722.999C669.486 723.023 679.485 723.205 686 719.187C710.493 704.08 695.855 697.731 707.103 687.324C711.608 683.156 718.642 678.566 724 675.524C730.205 672 741.038 669.196 743.738 661.985C744.929 658.802 744.367 642.211 743.161 639C741.463 634.476 737.844 631.023 737.226 626C735.037 608.217 762.587 613.962 762.998 579C763.043 575.002 762.994 570.999 762.998 567C763.008 561.84 764.127 546.254 771.999 547.028C774.569 547.281 776.519 549.825 777.49 552.004C779.249 555.954 779.605 569.235 779.558 573.996C779.467 583.225 779.496 594.331 776.187 603C772.755 611.994 758.723 622.248 757.782 626.014C758.226 624.236 760.929 655.497 760.986 658C761.402 676.353 747.488 683.814 733 691.512C729.186 693.539 724.243 694.922 721.313 698.211C721.443 698.064 713.015 720.332 712.865 721C712.318 723.433 713.061 726.607 713.665 729C717.904 745.802 732.707 736.259 732.996 761C733.186 777.246 730.368 784.809 748 792.826C750.947 794.166 754.101 793.13 756.958 794.402C761.422 796.39 761.562 800.564 764.495 803.584C768.114 807.311 780.742 811.229 786 810.957C790.575 810.72 793.726 808.263 798 807.391C804.885 805.987 810.702 810.384 817.943 805.774C824.316 801.717 821.981 786.325 835 786.538C837.788 786.584 840.275 788.196 843 788.581C850.251 789.607 860.751 779.603 862.087 773.035C862.573 770.641 860.58 762.953 860.327 760C859.18 746.643 866.162 746.468 873.817 739.612C876.27 737.415 888.502 719.947 889.351 717C891.632 709.075 880.873 700.929 879.98 691C878.947 679.515 891.726 670.298 897.417 661.961C898.92 659.759 900.894 652.789 901.484 650C904.14 637.439 891.637 633.269 894.392 621C896.62 611.08 911.12 607.309 914.612 591C917.354 578.199 902.621 567.928 909.098 555.004C912.874 547.469 929.298 537.703 930.402 531.912C933.415 516.1 914.191 500.116 913.431 482.83C912.36 458.428 929.665 454.037 930.904 436C932.127 418.204 915.863 408.907 914.38 398C913.168 389.083 926.338 378.759 925.786 368C925.323 358.985 921.437 354.419 917.413 347C915.829 344.078 915.126 340.826 913.316 338C911.37 334.963 908.577 332.519 907.261 329C907.181 328.235 906.829 304.22 907.261 303C908.031 298.623 909.918 295.711 909.996 291C910.618 253.08 876.724 264.117 870.142 247.996C866.135 238.184 871.528 229.777 870.817 220C869.983 208.52 862.63 194.678 851 191.173C844.559 189.232 838.011 189.28 832.039 185.639C819.728 178.131 829.987 167.488 811.999 157.692C808.805 155.953 805.69 153.71 802 153.226C798.951 152.825 796.028 153.823 793 153.823C789.956 153.823 787.085 152.959 784 153.183C778.612 153.574 772.876 155.008 768 157.325C763.841 159.301 756.996 165.783 753.001 165.464C747.888 165.055 737.701 152.722 732 149.51C728.682 147.64 725.589 148.167 722 147.49C716.228 146.525 715.018 145.579 709 147.49C700.798 149.983 690.913 163.968 682 169.538C656.788 185.292 634.797 189.18 606 193.299C600.186 194.13 594.98 195.927 589 195.996L585 195.996C579.665 195.904 571.015 192.233 566.43 195.289C562.661 197.8 565.083 205.053 564.958 209C564.78 214.58 560.306 236.75 560.737 239C561.266 241.764 563.051 244.382 564.075 247C565.478 250.588 565.613 254.489 567.067 258C569.327 263.456 573.077 268.375 575.036 274C577.09 279.897 577.853 288.739 578.014 295C578.213 302.715 580.394 310.339 580.793 318C580.982 321.625 580.047 325.324 580.004 329C579.924 335.787 582.24 342.624 581.894 349C581.433 357.494 578.414 366.654 576.664 375C575.415 380.961 575.002 387.06 573.526 393C570.017 407.115 558.951 433.684 548.817 443.817C540.629 452.004 517.469 462.303 506 465.241C498.898 467.06 491.109 465.918 484 467.247C480.3 462.946 474.148 468.136 469 467.247C465.229 467.025 461.698 465.301 458 464.516C450.259 462.872 445.332 462.35 438 458.515C431.789 455.266 425.036 452.486 419 449.051C411.661 444.875 405.058 439.648 398 435.088C392.385 431.461 386.286 427.963 381.284 423.484C375.496 418.301 340.444 376.59 339.908 376.382C336.846 375.195 321.924 381.724 316 381.961C311.325 382.148 304.184 381.202 302.4 375.959C301.286 372.683 304.124 369.916 307.015 368.826C309.536 368.161 312.382 368.913 315 368.826C321.454 368.084 329.304 365.797 333.775 360.897C341.767 352.138 334.447 342.589 335.923 333C336.566 328.822 340.654 323.97 340.644 320.039C340.635 316.547 329.258 306.158 325.912 305.732C322.257 305.267 318.92 308.334 315.004 307.517C312.857 307.07 311.091 305.742 309.938 303.893C304.372 294.973 318.117 289.848 320.383 283.003C323.06 274.917 307.115 272.705 309.101 264.003C310.744 256.805 330.701 250.773 333.555 239C335.893 229.354 320.202 215.069 327.43 207.391C332.254 202.267 347.128 203.497 353.912 200.504C358.698 198.393 361.533 194.669 367 193.043C373.92 190.984 381.563 191.843 387.956 187.778C394.914 183.353 389.792 168.898 401.999 170.495C409.811 171.516 408.956 178.15 412.699 182.473C416.202 186.52 426.65 190.547 432 189.785C451.501 187.008 450.486 161.436 460 162.576C466.153 163.312 466.487 170.207 470.391 172.84C471.346 173.484 501.748 179.805 504 179.897C506.638 180.004 508.562 179.664 511 178.639C527.346 171.764 515.799 164.643 523.416 156.222C533.975 144.548 546.393 161.853 556.542 134C557.517 131.326 559.022 128.799 559.611 126C560.143 123.476 560.166 119.582 558.262 117.595C556.551 115.809 553.287 115.777 551.103 114.547C549.014 113.371 541.304 103.133 541.62 101.077C541.903 99.2306 543.713 98.1014 545 97C541.837 91.9217 537.983 87.3298 538.466 81C538.841 76.0857 541.754 63.9755 539.259 60.4246C536.987 57.1933 533.157 54.7325 530 52.4471C513.322 40.3742 510.886 50.3303 501.042 45.1615C496.14 42.587 494.507 37.1925 491.241 33.0422C484.72 24.7573 471.657 17.0548 461 16.1863C448.087 15.1339 444.943 26.8054 437 27.8402C425.582 29.3276 420.177 19.2484 410 21.4246C403.395 22.8371 396.89 24.9793 391 28.3365C385.435 31.5086 379.141 39.3683 373 39.7209C360.146 40.4591 359.575 26.2933 345 31.8152C336.416 35.0675 324.788 46.3677 319.812 54C312.62 65.0292 311.913 79.7911 295 79.9963C290.674 80.0488 286.326 80.0472 282 79.9963C277.307 79.9411 272.482 77.9939 268 78.2959C245.577 79.8067 255.555 100.475 246.778 109.893C243.289 113.637 238.135 114.664 234.014 117.572C228.254 121.637 222.346 129.397 218 135zM614 775C610.045 773.865 605.959 773.825 602 772.701C594.495 770.569 579.853 763.526 572 764.817C568.798 765.343 558.483 771.104 555 772.893C551.05 774.921 544.779 777.118 541.904 780.388C538.348 784.431 538.049 789.726 535.16 793.894C533.1 796.867 530.764 797.311 528.324 799.491C526.044 801.528 524.328 804.437 522.695 807C520.41 810.584 518.605 814.706 515.673 817.817C511.754 821.976 499.913 826.538 505.026 834.373C508.997 840.877 515.537 836.352 520 834.373C522.665 832.816 525.143 832.687 527.355 830.431C531.203 826.509 531.649 820.891 538 818.982C541.831 817.831 556.961 824.898 564.999 824.648C571.99 824.431 572.143 820.006 577.042 817.085C582.112 814.063 586.338 816.171 591.897 812.082C592.396 811.715 610.388 784.946 611.446 783C612.826 780.46 613.426 777.801 614 775z"/> + +<!-- the outline of the sheep --> + +<path style="fill:black; stroke:none" d="M215 136C189.171 142.865 165.905 156.159 143 169.463C138.438 172.113 134.486 175.62 130 178.382C125.435 181.193 120.737 182.671 116 184.98C112.226 186.819 108.836 189.375 105 191.098C99.9126 193.383 93.2218 196.634 88 198.202C80.2275 200.536 67.9484 199.789 66.2406 211.004C65.4197 216.394 68.6656 219.337 71.923 223C74.5075 225.906 76.7728 229.84 80.092 231.915C83.7848 234.223 89.9794 237.311 94 239.009C99.2561 241.229 103.845 239.401 107 245C101.552 247.812 91.7448 262.912 91.1078 269C90.3387 276.35 93.3051 280.258 88.9532 287.912C85.7463 293.552 79.7541 296.58 75.4389 301.172C65.695 311.541 56.7426 327.143 53.5996 341C51.5202 350.167 61.5916 360.558 59.6043 367C57.8699 372.622 46.1458 379.432 42.4005 386C36.4026 396.518 29.3294 409.966 27.2101 422C26.1709 428.917 29.0512 436.535 27.2101 443C22.6112 457.834 5.05364 479.11 6.18259 495C6.62543 501.233 7.41269 510.202 9.5574 516C11.3249 520.778 18.0828 527.248 18.0565 531.088C17.9938 540.228 9.53826 557.352 6.01426 566C-2.17066 586.086 -4.0858 610.145 18 622L7.92315 644L9.1313 679L19.5265 695.907L37 708L38 708L39 705C43.033 720.26 29.2929 737.524 32.3267 755C32.8056 757.759 34.0695 760.269 34.6243 763C35.4409 767.02 35.1588 771.065 36.6607 775C39.3761 782.115 48.4919 789.088 53.5904 794.986C55.81 797.553 59.4344 800.141 60.9741 803.088C62.9389 806.849 59.0837 819.4 63.3613 828.999C67.3054 837.85 72.5753 836.245 77.6093 842.103C81.3379 846.442 82.515 853.008 85.4518 858C87.639 861.718 90.0401 865.845 93.1026 868.897C99.1064 874.88 102.751 872.348 103.07 882.039C103.601 898.216 119.168 913.869 135 915.817C142.87 916.785 154.01 914.251 162 913C165.325 931.479 166.019 950.406 168.155 969C169.239 978.44 171.605 987.633 172.613 997C173.046 999.808 172.688 1002.22 172.613 1005C171.75 1017.08 175.851 1030.61 175.998 1043L175.998 1048C175.965 1070.63 134.276 1140.89 138.738 1151.96C144.408 1166.02 177.322 1157.35 188 1155.46C191.327 1154.87 194.698 1155.25 198 1154.67C201.202 1154.11 203.918 1152.49 207 1151.63C215.385 1149.31 230.967 1147.21 234.658 1138C235.702 1135.39 237.213 1118.72 236.725 1116C236.036 1112.16 233.823 1110.34 234.019 1106C234.417 1097.18 243.832 1089.41 243.996 1077C244.223 1059.89 232.14 1045.16 231.093 1028C230.642 1020.62 234.499 1013.27 235.716 1006C238.046 992.062 238.978 978.106 239 964C239.02 951.339 246.844 942.044 246.996 929C247.058 923.691 247.345 918.191 246.102 913C244.573 906.616 232.708 884.733 235.641 880.438C239.64 874.581 261.078 865.235 268.828 858.335C271.634 855.837 275.217 849.641 279.014 849.562C283.265 849.474 298.129 860.716 315 859.954C323.516 859.57 328.233 852.583 336 852L340 848C341.987 860.909 348.906 876.132 364 876.87C370.393 876.997 375.419 875.4 382 876.87C384.808 873.919 387.923 873.037 389.53 878.042C390.339 880.562 387.085 894.338 387.193 899C387.526 913.358 391.468 930.905 394.576 945C396.848 955.3 398.861 965.764 401.235 976C403.242 984.658 405.982 993.085 406.832 1002C407.288 1006.79 406.127 1011.26 406.014 1016C405.6 1033.38 405.247 1049.59 398.549 1066C396.192 1071.77 393.075 1077.16 390.811 1083C387.495 1091.56 384.99 1100.5 381.548 1109C378.908 1115.52 374.194 1122.98 373.363 1130C372.552 1136.85 379.16 1145 386 1145.68C389.916 1146.07 393.875 1143.93 398 1144.1C407.105 1144.49 414.889 1145.86 424 1143.52C433.998 1140.95 443.115 1135.03 453 1132.51C455.681 1131.83 459.265 1130.87 462 1130.77C466.922 1130.59 469.985 1133.8 474.775 1129.57C478.827 1125.99 480.864 1114.34 480.986 1109C481.27 1096.5 478.579 1075.5 473.856 1064C471.183 1057.49 466.599 1052.33 463.879 1046C461.664 1040.84 461.636 1035.13 459.474 1030C456.304 1022.47 453.106 1016.45 452.817 1008C452.927 1001.61 452.129 994.264 452.817 988C453.161 981.39 455.182 974.684 455.832 968C456.401 962.143 456.13 955.726 457.517 950C459.134 943.319 462.836 936.324 465.576 930C478.353 900.513 476.519 893.234 461 866C468.757 863.938 476.973 862.17 484 858.121C487.626 856.033 493.904 848.628 497.014 848.562C499.109 848.518 502.884 850.732 505 851.534C513.922 854.914 517.836 850.817 517.996 864C518.072 870.229 518.192 875.852 519.449 882C521.597 892.51 525.528 903.055 524.908 914C524.584 919.726 523.946 926.643 521.884 932C519.517 938.15 515.685 943.72 513.518 950C509.517 961.595 508.536 973.363 505.255 985C504.018 989.388 500.836 993.623 500.237 998C498.016 1014.22 525.092 1009.33 534 1007.11C542.708 1004.93 551.324 1001.41 560 999.47C565.622 998.212 566.839 1000.71 571 1000.56C578.146 1000.31 583.275 989.302 582.663 983C582.26 978.858 580.829 975.293 581.093 971C581.919 957.526 592.621 948.477 590.817 934C589.254 921.459 578.288 922.569 576.154 916.192C575.171 913.258 576.994 903.027 577 899C577.012 891.146 575.068 883.553 575.077 876C575.084 870.408 581.091 847.562 583.387 842.004C586.427 834.643 600.638 828.717 606.673 821.912C619.343 807.625 621.62 785.737 632.183 770.103C636.351 763.935 644.794 763.047 648.914 755.986C651.071 752.289 651.437 746.263 652 742C667.995 742 684.065 743.061 698 734C702.436 752.886 713.003 752.492 715.283 759.015C716.429 761.822 715.442 765.126 715.283 768C714.426 775.794 713.996 789.526 718.801 795.908C725.497 804.801 758.539 818.839 760.672 828.018C761.489 831.534 757.457 845.613 757.088 851C756.385 861.28 759.823 871.008 759.823 881C759.823 887.449 757.375 893.812 755.898 900C755.108 903.313 755.045 906.684 754.332 910C751.544 922.961 743.767 936.331 739.345 949C737.533 954.191 730.011 993.73 730.419 998C730.759 1001.57 733.443 1006.95 736.327 1009.11C742.654 1013.86 752.212 1008.56 759 1008.1C764.727 1007.7 771.207 1009.12 777 1009.49C784.317 1009.95 790.91 1006.41 798 1005.94C802.868 1005.61 805.17 1008.67 808.999 1008.56C820.499 1008.26 815.968 990.137 816.001 983C816.103 960.991 826.229 959.211 827.778 950C829.165 941.755 825.286 937.221 823.054 930C822.035 926.706 820.34 911.385 820.703 908C820.998 905.25 825 881.37 825.559 880.088C827.575 875.469 831.511 873.665 833.073 868C834.685 862.155 834.37 855.117 835.271 849C836.498 840.671 837.233 832.295 838.428 824C839.203 818.618 840.746 813.442 841 808C856.686 807.847 881.79 789.497 880.957 773C880.71 768.099 876.811 761.648 879.683 757.165C881.622 754.139 885.308 751.827 887.673 748.996C893.984 741.445 905.698 724.732 906.663 715C907.85 703.026 896.849 695.939 897.159 689C897.281 686.251 900.012 680.629 901.254 678C903.042 674.214 904.093 669.69 906.221 666.168C910.896 658.431 914.864 656.031 914.996 646C915.046 642.236 912.271 625.535 912.409 625.088C913.141 622.727 918.391 618.455 920.241 615.996C927.873 605.851 932.146 597.728 931.996 585C931.926 578.995 925.898 563.773 926.41 562.014C928.487 554.879 946.82 549.712 947.907 532C948.299 525.607 943.306 508.749 940.201 503C936.823 496.744 928.874 487.428 928.904 480C928.932 472.972 947.629 454.823 947.983 436C948.071 431.317 948.592 422.182 947.149 418.014C944.476 410.301 934.973 405.741 933.856 396C933.281 390.981 943.424 378.717 942.894 369C942.691 365.294 938.111 349.229 936.273 346C934.469 342.83 931.812 340.22 930.121 337C928.948 334.767 928.49 332.25 927.318 330.014C925.685 326.901 922.02 324.341 921.355 320.961C920.473 316.475 926.78 306.069 928.213 301C929.372 296.902 929.046 292.231 928.996 288C928.72 264.34 911.792 242.733 888 239C888.513 232.673 889.368 226.33 889.817 220C890.999 203.357 877.27 181.6 863 173.914C857.362 170.877 850.399 171.587 845.056 168.69C838.175 164.957 841.952 151.202 819 139.753C810.633 135.58 809.392 134.941 800 135.003C789.213 135.074 778.434 135.315 768 138.439C763.992 139.639 756.129 144.462 753 144.457C748.049 144.449 741.654 137.267 736 135.635C730.607 134.079 724.712 135.972 719 135C722.718 129.854 730.791 125.413 731.759 119C733.029 110.591 726.463 106.67 719 107.092C713.604 107.397 708.468 108.993 703 108.993C691.22 108.993 649.994 101.245 639 97.0474C635.856 95.8469 633.122 93.8356 630 92.6072C626.462 91.2151 622.646 91.0497 619 90.0776C614.941 88.9954 611.215 87.231 607 86.8251C603.354 86.1546 599.673 86.9536 596 86.8251C590.166 87.0642 584.761 86.4184 579 86.092C570.179 85.5924 564.638 91.132 557.146 83.6969C547.989 74.6106 564.085 65.3414 552.789 52.0007C547.886 46.2105 532.182 32.8949 525 30.9269C519.87 29.5211 513.573 31.0399 509 29.0661C500.17 25.2547 493.037 11.6679 483.996 6.36129C453.48 -11.5508 436.754 10.6931 431.284 8.8752C429.407 8.25121 427.778 6.36271 425.961 5.44888C422.858 3.88749 419.391 3.93636 416 4.01426C396.436 4.4638 373.933 20.2318 371.284 20.3551C365.272 20.6351 362.435 2.65017 333 18.7985C325.95 22.6661 311.252 38.8448 307.312 46C305.165 49.8998 302.625 58.8516 299.609 61.2622C296.896 63.4311 287.562 64.1153 284 63.96C279.353 63.7574 275.468 61.805 271 60.9367C264.528 59.679 254.454 63.8214 249.004 67.27C242.89 71.1381 237.803 81.0725 235.926 88C235.075 91.1408 235.393 95.062 233.826 97.8974C231.853 101.464 225.412 104.578 222.183 107.513C215.419 113.663 209.318 127.954 215 136zM545 97C543.093 98.6314 540.794 100.031 541.894 102.926C542.548 104.646 549.429 113.604 551.103 114.547C553.287 115.777 556.551 115.809 558.262 117.595C560.166 119.582 560.143 123.476 559.611 126C559.022 128.799 557.517 131.326 556.542 134C546.393 161.853 533.975 144.548 523.416 156.222C515.799 164.643 527.346 171.764 511 178.639C502.868 182.059 496.72 177.626 489 176.26C483.4 175.27 476.452 175.941 471.211 173.301C466.481 170.918 465.833 162.065 459.004 162.539C450.608 163.122 450.879 187.097 432 189.785C426.65 190.547 416.202 186.52 412.699 182.473C408.956 178.15 409.811 171.516 401.999 170.495C389.792 168.898 394.914 183.353 387.956 187.778C381.563 191.843 373.92 190.984 367 193.043C361.533 194.669 358.698 198.393 353.912 200.504C346.872 203.61 331.227 202.043 326.739 208.211C321.225 215.787 335.81 229.696 333.555 239C330.701 250.773 310.744 256.805 309.101 264.003C307.115 272.705 323.06 274.917 320.383 283.003C318.117 289.848 304.372 294.973 309.938 303.893C311.091 305.742 312.857 307.07 315.004 307.517C318.92 308.334 322.257 305.267 325.912 305.732C329.258 306.158 340.635 316.547 340.644 320.039C340.655 324.391 336.12 329.086 335.826 334C335.416 340.844 339.046 348.092 337.055 355C331.77 373.339 305.385 364.431 302.4 373.053C300.435 378.727 308.814 381.737 313 381.957C320.478 382.35 337.606 374.165 341.673 377.472C344.271 379.584 346.885 385.05 349.042 387.961C351.803 391.686 355.628 393.785 358.613 397.172C361.229 400.14 362.677 403.917 365.327 406.912C380.455 424.007 399.14 437.751 419 449.051C423.131 451.402 427.75 453.067 432 455.258C437.413 458.048 443.112 461.699 449 463.366C454.334 464.876 460.411 465.409 466 466.922C472.071 468.403 480.702 463.387 484 466.922C491.109 465.918 498.898 467.06 506 465.241C517.469 462.303 540.629 452.004 548.817 443.817C558.951 433.684 570.017 407.115 573.526 393C575.002 387.06 575.415 380.961 576.664 375C578.414 366.654 581.433 357.494 581.894 349C582.166 343.972 580.066 339.144 580.004 334L580.004 329C580.047 325.324 580.982 321.625 580.793 318C580.394 310.339 578.213 302.715 578.014 295C577.853 288.739 577.09 279.897 575.036 274C573.077 268.375 569.327 263.456 567.067 258C565.613 254.489 565.478 250.588 564.075 247C563.051 244.382 561.266 241.764 560.737 239C560.306 236.75 564.78 214.58 564.958 209C565.083 205.053 562.661 197.8 566.43 195.289C571.04 192.217 579.645 195.926 585 195.996C592.602 196.097 598.643 194.351 606 193.299C627.445 190.231 653.121 187.103 672 175.688C677.345 172.456 683.146 169.228 687.912 165.196C694.295 159.795 701.245 149.845 709 147.49C715.018 145.579 716.228 146.525 722 147.49C725.589 148.167 728.682 147.64 732 149.51C737.701 152.722 747.888 165.055 753.001 165.464C756.996 165.783 763.841 159.301 768 157.325C772.876 155.008 778.612 153.574 784 153.183C787.085 152.959 789.956 153.823 793 153.823C796.028 153.823 798.951 152.825 802 153.226C805.69 153.71 808.805 155.953 811.999 157.692C829.719 167.343 819.85 175.939 830.183 184.365C836.205 189.274 843.977 189.057 851 191.173C862.63 194.678 869.983 208.52 870.817 220C871.528 229.777 866.135 238.184 870.142 247.996C876.724 264.117 910.618 253.08 909.996 291C909.918 295.711 908.031 298.623 907.261 303C906.829 304.22 907.181 328.235 907.261 329C908.577 332.519 911.37 334.963 913.316 338C915.126 340.826 915.829 344.078 917.413 347C921.437 354.419 925.323 358.985 925.786 368C926.355 379.088 912.375 389.572 914.57 399C915.552 403.217 918.466 405.695 920.664 409.168C925.381 416.619 930.397 423.98 930.908 433C931.841 449.474 915.373 459.248 914.106 471C910.715 502.474 928.53 504.521 930.38 528.996C931.154 539.232 911.809 546.369 908.272 557C904.153 569.379 917.232 578.768 914.612 591C911.12 607.309 896.62 611.08 894.392 621C891.039 635.934 908.927 636.99 898.494 659.996C896.91 663.488 893.949 665.432 891.442 668.168C888.278 671.623 880.451 683.541 879.971 688C878.63 700.448 891.237 707.523 889.594 716C888.917 719.495 876.689 737.039 873.817 739.612C866.162 746.468 859.18 746.643 860.327 760C860.576 762.907 862.529 770.705 862.057 773.088C861.544 775.675 858.772 778.921 857.115 780.985C844.64 796.524 839.338 782.536 830.001 788.01C819.709 794.043 823.993 800.211 819.686 804.445C813.364 810.66 806.112 806.316 799 807.225C792.725 808.027 791.048 811.374 783 810.957C779.186 810.76 767.07 806.236 764.495 803.584C761.85 800.861 761.509 797.106 757.897 794.892C754.73 792.952 752.135 794.291 749 793.231C746.401 792.352 744.22 790.319 742 788.768C734.384 783.447 733.019 783.708 733 774C732.985 766.717 733.936 753.147 730.147 747.015C724.482 737.847 717.123 742.708 713.665 729C713.061 726.607 712.318 723.433 712.865 721C713.015 720.332 721.443 698.064 721.313 698.211C724.243 694.922 729.186 693.539 733 691.512C745.319 684.967 760.604 676.696 760.986 661C761.087 656.84 758.144 624.97 758.114 625.039C760.355 619.916 773.285 613.11 776.924 601C779.326 592.48 781.103 558.179 776.924 551.019C775.986 549.215 774.199 547.245 771.999 547.028C764.127 546.254 763.008 561.84 763 567C762.986 575.696 763.585 589.074 760.032 597C754.87 608.516 735.607 612.85 737.226 626C737.844 631.023 741.463 634.476 743.161 639C744.367 642.211 744.929 658.802 743.738 661.985C741.038 669.196 730.205 672 724 675.524C718.642 678.566 711.608 683.156 707.103 687.324C696.221 697.392 709.537 706.114 685 719.789C677.983 723.7 664.053 723.057 656 722.884C627.509 722.27 642.656 742.545 627.999 750.523C603.432 764.16 584.594 737.79 562 750.523C558.333 752.475 545.392 761.932 542.909 755.851C542.114 753.905 542.411 751.906 543.613 750.208C545.14 748.049 548.792 746.124 551 744.562C555.907 741.09 562.7 735.264 565.586 730C569.109 723.575 571.449 715.728 574.491 709C575.783 706.143 578.179 703.927 579.262 701C580.605 697.374 578.681 693.333 580.687 690.103C582.823 686.662 587.934 684.095 590.832 680.985C595.889 675.557 603.223 669.219 606.998 663C609.083 659.564 613.882 638.301 613.986 634C614.357 618.695 607.065 606.471 601.361 593C600.086 589.991 599.995 585.648 597.57 583.357C595.825 581.709 594.091 581.627 592.042 582.795C580.936 589.13 590.334 604.697 592.972 613C594.668 618.338 596.341 625.41 596.62 631C596.74 633.403 593.663 647.203 592.781 649.999C587.603 666.406 562.925 674.061 561.388 687C561.141 689.343 561.787 691.652 561.388 694C560.468 698.907 550.972 720.354 547.778 723.911C541.224 731.211 528.521 734.24 524.175 743C520.759 749.886 527.118 762.477 526.29 770C525.96 772.998 520.955 783.273 519.189 786C517.5 788.609 505.048 803.748 502.911 805.304C498.753 808.333 493.896 809.057 490.226 813.103C483.256 820.786 491.131 825.54 484.673 835C481.903 839.056 478.329 843.181 474 845.589C465.579 850.272 456.848 849.176 448 852.029C439.603 854.736 427.519 864.109 419 863.501C409.653 862.833 405.046 851.697 395 850.345C387.739 849.368 379.782 859.154 371 857.106C355.068 853.391 362.399 834.263 344 833.381C340.12 833.195 336.936 830.806 333 831.893C323.078 834.634 319.577 842.876 307 840.673C298.913 839.257 285.932 828.635 279 828.317C269.542 827.883 251.167 856.563 237 854.774C230.232 853.919 228.029 848.96 222.961 845.734C220.002 843.85 216.227 843.699 213 842C212.802 845.607 211.564 848.541 211.106 852C210.001 860.336 218.168 865.714 224 870C215.542 881.778 211.847 878.014 203 884.555C196.768 889.163 191.759 896.904 184 899.195C178.498 900.82 167.921 896.172 161 896.014C154.042 895.856 143.918 898.862 138 897.611C134.847 896.945 128.56 893.785 126.211 891.612C116.614 882.736 123.207 871.237 115.775 863.103C112.186 859.174 106.944 858.427 103.327 854.778C96.759 848.154 94.7151 838.507 90.0081 831.004C86.8018 825.892 80.0032 823.002 78.4337 817C77.2391 812.432 79.6265 807.58 79.9072 803C80.6918 790.199 67.624 782.676 59.8324 774C57.7665 771.699 54.6135 768.984 53.6829 766C53.3335 764.879 50.3383 740.901 50.4531 740C52.3061 725.469 61.2638 713.287 54.9946 698C50.6502 687.406 42.021 689.178 34.1026 684.7C24.2394 679.122 21.3866 661.32 22.0957 651C22.594 643.749 26.7423 637.74 28.7283 631C29.415 628.669 28.9914 626.27 29.6574 624C30.4354 621.348 33.1651 618.808 32.833 616.015C32.1331 610.129 17.2105 607.136 17.0037 590C16.8447 576.821 22.3597 568.858 26.9396 557C29.7744 549.66 31.0622 542.49 33.1583 535C34.0021 531.985 37.4598 526.348 37.3872 524.004C37.236 519.119 18.0603 510.342 22.5167 489C24.2604 480.649 32.4329 463.38 37.0704 456.088C38.9109 453.194 41.989 451.255 43.2622 447.986C47.8634 436.171 35.1377 431.359 50.8606 403C53.6224 398.018 56.0901 393.172 60.0422 389.001C65.5885 383.147 73.985 377.807 76.8544 370C80.5037 360.071 67.0578 351.464 70.1267 337C73.0782 323.089 86.8546 309.64 95.8635 299.323C98.0907 296.772 100.69 295.063 102.282 291.961C104.054 288.508 106.418 280.857 106.249 277C106.132 274.321 105.054 271.694 105.311 269C105.79 263.984 114.882 251.339 119.168 249.026C121.892 247.556 144.896 251.523 150 251.793C155.625 252.091 161.075 250.601 167 250.909C188.698 252.036 224.823 234.47 241 220.702C246.765 215.795 261.746 205.93 258.259 197.043C257.509 195.132 255.976 193.427 253.957 192.845C251.656 192.181 249.838 193.14 248 194.43C241.693 198.856 236.131 204.778 230 209.474C221.3 216.136 210.113 221.925 200 226.139C190.652 230.033 176.173 234.425 166 233.821C160.872 233.517 157.02 234.279 152 234.676C144.552 235.266 127.097 231.867 120 229.281C117.138 228.238 114.83 226.132 112.001 224.999C109.018 223.806 105.777 224.145 102.832 223.034C98.748 221.493 92.486 217.698 89 215C101.796 207.746 116.27 202.845 129 195.394C141.94 187.819 154.083 178.91 167 171.346C185.218 160.679 204.285 151.936 224 144.459C234.374 140.524 248.062 135.691 259 134.284C260.815 134.051 270.33 133.786 267.997 129.759C263.687 122.319 239.434 131.964 233 133.332C228.309 134.329 222.798 134.78 218 135C222.346 129.397 228.254 121.637 234.014 117.572C238.135 114.664 243.289 113.637 246.778 109.893C255.555 100.475 245.577 79.8067 268 78.2959C272.482 77.9939 277.307 79.9411 282 79.9963C286.401 80.048 298.411 80.5098 301.961 79.1107C312.661 74.8943 314.315 62.4289 319.812 54C322.509 49.8629 335.67 36.2714 340.001 33.9835C360.302 23.2587 357.98 40.5834 373 39.7209C379.072 39.3722 384.756 32.1105 390 28.9254C396.087 25.2287 405.888 21.6131 413 20.8619C418.487 20.2822 419.632 23.3745 424 25.5482C426.659 26.8712 431.02 27.5933 434 27.8272C445.045 28.6943 447.292 15.0691 461 16.1863C471.657 17.0548 484.72 24.7573 491.241 33.0422C494.507 37.1925 496.14 42.587 501.042 45.1615C510.886 50.3303 513.322 40.3742 530 52.4471C533.157 54.7325 536.987 57.1933 539.259 60.4246C541.754 63.9755 538.841 76.0857 538.466 81C537.983 87.3298 541.837 91.9217 545 97zM698 126C696.57 132.82 692.352 136.056 687.919 141.024C665.778 165.843 640.067 170.089 609 174.287C602.576 175.156 596.529 177.705 590 177.961C584.402 178.18 579.475 176.26 574 176.21C571.615 175.943 569.364 176.215 567.001 176.21C559.614 176.9 555.823 167.214 558.022 161C559.003 158.23 562.317 154.509 564.088 152C566.838 148.105 578.215 128.721 578.581 125C579.249 118.2 572.25 107.814 569 102.193L589 102.193L601 102.193L631 112.533L650 118.241L661 119.323L698 126zM345 372C349.45 356.395 351.197 360.586 349.847 343C349.192 334.469 358.657 326.837 357.588 316C356.332 303.271 341.238 300.084 337.56 289.832C336.459 286.764 337.145 281.495 336.715 278C336.312 274.724 334.334 267.713 334.612 265C335.332 257.971 348.809 250.962 350.149 240C350.864 234.148 343.379 221.184 346.637 217.853C346.418 218.077 372.718 207.833 374 207.53C378.705 206.417 383.245 207.099 388 205.457C392.512 203.899 401.393 197.883 405 197.998C413.256 198.261 422.551 208.741 434 206.097C446.611 203.185 461.073 187.961 464.039 187.729C466.032 187.16 468.915 187.835 471 187.729C490.413 189.283 503.57 201.075 523 190.125C533.497 184.21 535.609 179.973 539 169C541.193 170.035 543.357 170.814 544.402 173.211C545.229 175.108 545.731 194.296 544.939 195.912C542.259 201.383 535.802 201.993 534.506 211C533.81 215.837 537.424 223.091 538.756 228C542.195 240.676 547.026 238.237 550.282 244.128C553.072 249.176 552.882 255.517 554.428 261C555.902 266.229 558.732 270.867 560.214 276C562.382 283.512 561.901 290.513 562.703 298C564.013 310.231 565.577 322.723 564.875 335C564.368 339.222 564.627 341.84 564.875 346C565.75 352.315 561.444 367.418 559.758 374C558.337 379.547 557.865 385.459 556.397 391C554.211 399.249 544.551 421.588 539.473 427.985C535.934 432.443 529.849 436.068 525 439.048C517.319 443.769 499.018 449.676 490 448.803C484.039 448.226 478.027 445.292 472 444.284C467.822 443.586 462.134 441.966 458 442.299C455.487 442.501 453.414 443.848 451 444.266C446.621 445.023 440.984 441.106 437 439.311C433.405 437.691 429.485 436.784 426 434.96C418.199 430.876 411.364 425.438 404 420.692C399.017 417.48 393.519 414.579 389.039 410.676C384.536 406.753 378.357 401.163 374.491 396.701C372.414 394.303 371.26 391.45 368.894 389.211C365.44 385.943 360.902 384.814 357.207 382.037C352.789 378.716 350.023 375.031 345 372zM391.001 220.659C379.755 223.069 371.076 260.456 401 261.957C414.475 262.633 413.474 255.09 413.039 245C412.528 233.172 412.682 225.378 399 221.641C396.542 220.97 393.541 220.114 391.001 220.659zM535.092 387.023C530.526 389.472 520.312 406.501 522.602 411.729C523.508 413.797 526.05 414.978 528.004 415.851C530.09 416.782 532.64 417.788 534.893 416.805C539.896 414.622 539.065 406.406 540.542 402C542.053 397.492 549.329 388.359 539.981 386.333C538.366 385.983 536.546 386.243 535.092 387.023zM468 390C468.789 393.15 471.267 396.637 471.613 399.576C471.86 401.674 470.015 406.326 469.773 409C469.081 416.642 480.656 426.846 486.259 421.259C491.519 416.012 481.697 386.915 468 390zM614 775C613.426 777.801 612.826 780.46 611.446 783C610.388 784.946 592.396 811.715 591.897 812.082C586.338 816.171 582.112 814.063 577.042 817.085C572.143 820.006 571.99 824.431 564.999 824.648C556.961 824.898 541.831 817.831 538 818.982C531.649 820.891 531.203 826.509 527.355 830.431C525.143 832.687 522.665 832.816 520 834.373C515.537 836.352 508.997 840.877 505.026 834.373C499.913 826.538 511.754 821.976 515.673 817.817C518.605 814.706 520.41 810.584 522.695 807C524.328 804.437 526.044 801.528 528.324 799.491C530.764 797.311 533.1 796.867 535.16 793.894C538.049 789.726 538.348 784.431 541.904 780.388C544.779 777.118 551.05 774.921 555 772.893C558.483 771.104 568.798 765.343 572 764.817C579.853 763.526 594.495 770.569 602 772.701C605.959 773.825 610.045 773.865 614 775zM819 826C818.652 833.092 815.603 837.535 813.345 844C810.389 852.459 808.188 861.16 806.754 870C805.628 876.939 805.528 884.042 804.575 891C803.475 899.037 801.25 906.85 801.964 915C802.457 920.624 802.311 927.621 803.526 933C804.375 936.753 807.733 942.549 807.377 946C806.988 949.765 803.122 954.195 801.71 958C798.696 966.119 798.153 974.463 797.996 982.999C797.962 984.788 798.021 987.032 796.978 988.758C794.17 992.722 780.924 994.985 778.401 988.758C775.539 982.09 778.249 968.977 780.442 962C782.453 955.601 787.837 951.87 790.146 946C792.024 941.226 789.969 936.907 785.076 935.339C781.796 934.288 778.671 935.701 776.035 937.646C763.647 946.783 758.506 975.63 762 990L749 992C749.021 984.907 750.708 978.894 751.916 972C752.792 967.004 752.948 961.836 754.519 957C758.793 943.841 765.523 931.308 769.652 918C771.174 913.095 771.578 908 772.661 903C773.982 896.905 775.922 891.309 775.996 885C776.139 872.863 770 837.463 778.724 828.724C780.255 827.189 782.982 826.617 785.001 825.976C800.371 821.095 796.386 824.97 810 826.523C813.014 826.867 816 826.241 819 826zM537 988C532.705 990.083 524.627 993.616 522.57 986.943C518.72 974.452 533.456 948.664 537.621 937C539.872 930.694 540.991 922.677 541.698 916C542.131 911.902 540.893 908.012 540.274 904C538.304 891.235 533.152 877.712 533.004 865C532.938 859.346 531.703 847.379 535.314 843.107C536.749 841.409 538.764 839.953 541 839.613C543.615 839.215 562.409 843.011 563.363 845.3C564.662 848.414 557.323 871.64 557.759 879C558.037 883.706 559.477 888.31 559.817 893C560.418 901.275 557.052 909.532 557.784 918C559.286 935.374 572.111 935.286 572.298 940.131C572.419 943.245 564.134 957.861 564.004 969C563.964 972.366 564.686 978.942 562.402 981.491C560.544 983.563 553.193 986.167 551.637 982.672C548.415 975.435 565.521 948.992 549.985 945.077C547.189 944.372 544.47 945.709 543.012 948.128C543.022 948.111 536.346 978.52 536.186 980C535.877 982.867 536.329 985.239 537 988zM443 873C445.544 877.311 445.976 881.946 448.174 885.897C450.9 890.8 455.444 890.216 456.658 898C458.739 911.344 446.012 931.603 441.844 944C439.623 950.606 440.542 957.275 439.715 964C438.524 973.673 435.046 983.309 435.001 993C434.942 1005.53 434.749 1017.86 438.302 1030C439.448 1033.92 442.07 1037.11 443.198 1041C444.065 1043.99 443.404 1047.08 444.39 1050C447.01 1057.75 453.101 1065.39 456.487 1073C460.342 1081.67 461.885 1095.49 461.996 1105C462.024 1107.39 462.394 1113.61 460.978 1115.4C460.101 1116.51 438.241 1121.9 436.471 1120.89C433.719 1119.31 433.117 1114.84 433.018 1112C432.623 1100.66 438.795 1093.25 440.286 1083C440.867 1079.01 437.43 1074.06 433.003 1074.96C423.476 1076.9 417.349 1103.52 417.748 1112C418.038 1118.16 419.997 1121.44 422 1127C416.955 1128.84 394.936 1130.02 395.752 1121.98C396.277 1116.81 406.397 1088.31 408.98 1083C411.135 1078.57 414.08 1074.62 415.908 1070C419.709 1060.39 420.17 1051.79 421.539 1041.83C422.479 1034.99 424.076 1029.02 423.996 1022C423.958 1018.63 423.177 1015.32 423.177 1012C423.177 1006.88 424.396 1002.25 423.712 997C422.614 988.563 419.757 980.251 417.747 972C416.548 967.078 416.31 961.944 415.103 957C410.206 936.944 403.659 916.781 402.183 896C400.887 877.767 413.727 884.191 425 880.961C431.525 879.091 436.682 874.997 443 873zM221 896C245.036 941.504 221.574 930.086 222.004 968C222.136 979.704 221.416 991.425 219.195 1003C217.252 1013.13 213.877 1021.45 214.004 1032C214.104 1040.35 217.923 1052.97 220.695 1061C222.237 1065.46 224.78 1070.31 225.392 1075C226.279 1081.79 219.693 1088.67 217.597 1095C215.279 1101.99 214.388 1109.78 213 1117C212.392 1120.17 212.019 1129.51 210.391 1131.35C207.035 1135.15 197.876 1136.97 193 1137L189 1137C189 1129.4 189.857 1122.47 191.26 1115C192.101 1110.52 193.154 1106.8 195.798 1103C197.678 1100.3 200.563 1097.96 201.974 1095C205.277 1088.08 196.274 1079.32 185.808 1092.02C172.758 1107.85 175.063 1137.14 173.233 1139.44C170.515 1142.86 162.655 1142.04 159 1141C168.188 1108.51 192.403 1079.77 191.996 1045C191.809 1028.99 187.184 1012.95 186.996 997C186.903 989.066 184.573 981.695 183.004 974C181.781 968.001 181.436 961.98 180.385 956C178.266 943.939 174.109 930.076 174 918C202.722 917.74 202.543 900.223 221 896z"/> + +<metadata> + <!-- This metadata is in XMP --> + <?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?> + <rdf:RDF + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:dc="http://purl.org/dc/elements/1.1/"> + <rdf:Description rdf:about=""> + <dc:rights> + <rdf:Bag> + <rdf:li xml:lang="en"> + + Copyright © 2000 Coralie Mercier & Bert Bos. This work is + licensed under a Creative Commons + Attribution-NonCommercial-NoDerivs 3.0 Unported License. Please, + contact bert@w3.org or coralie@w3.org for licenses for other + usages. + + </rdf:li> + <rdf:li xml:lang="zxx" + rdf:resource="http://creativecommons.org/licenses/by-nc-nd/3.0/"/> + </rdf:Bag> + </dc:rights> + <dc:creator> + <rdf:Bag> + <rdf:li>Coralie Mercier</rdf:li> + <rdf:li>Bert Bos</rdf:li> + </rdf:Bag> + </dc:creator> + <dc:date>2000-03-02</dc:date> + </rdf:Description> + </rdf:RDF> + <?xpacket end="w"?> +</metadata> + +</svg> diff --git a/testing/web-platform/tests/css/css-ui/support/green.ico b/testing/web-platform/tests/css/css-ui/support/green.ico Binary files differnew file mode 100644 index 0000000000..691f61166f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/green.ico diff --git a/testing/web-platform/tests/css/css-ui/support/h100.svg b/testing/web-platform/tests/css/css-ui/support/h100.svg new file mode 100644 index 0000000000..0d780f46ee --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/h100.svg @@ -0,0 +1,2 @@ +<svg style="background: green" xmlns="http://www.w3.org/2000/svg" height="100"> +<g id='testmeta' xmlns:html='http://www.w3.org/1999/xhtml'><html:link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/" /></g></svg> diff --git a/testing/web-platform/tests/css/css-ui/support/h100_r1-1.svg b/testing/web-platform/tests/css/css-ui/support/h100_r1-1.svg new file mode 100644 index 0000000000..5bd9d1e630 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/h100_r1-1.svg @@ -0,0 +1,2 @@ +<svg style="background: green" xmlns="http://www.w3.org/2000/svg" height="100" viewBox="0 0 100 100"> +<g id='testmeta' xmlns:html='http://www.w3.org/1999/xhtml'><html:link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/" /></g></svg> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-dir-target-001-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-001-frame.html new file mode 100644 index 0000000000..ad10311866 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-001-frame.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with #finish to ignore</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<body> + <p><a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-dir-target-002-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-002-frame.html new file mode 100644 index 0000000000..63095a8646 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-002-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-down: #finish root }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<style> + #start { + nav-down: #finish root; + } +</style> +<body> + <p><a href="" id="start">START</a> <a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-dir-target-003-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-003-frame.html new file mode 100644 index 0000000000..a477638553 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-003-frame.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with target #finish</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<body> + <p><a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-dir-target-004-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-004-frame.html new file mode 100644 index 0000000000..024c95610f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-004-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-up: #finish "frame" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<style> + #start { + nav-up: #finish "frame"; + } +</style> +<body> + <p><a href="" id="start">START</a> <a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-dir-target-005-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-005-frame.html new file mode 100644 index 0000000000..caa9b60c8c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-dir-target-005-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-left: #finish "sibling" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> +<link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-18-2013 --> +<style> + #start { + nav-left: #finish "sibling"; + } +</style> +<body> + <p><a href="" id="finish">ignore</a> <a href="" id="start">START</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-down-009-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-down-009-frame.html new file mode 100644 index 0000000000..f11d32ed76 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-down-009-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with #finish to ignore</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-down-010-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-down-010-frame.html new file mode 100644 index 0000000000..98d6c611f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-down-010-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-down: #finish root }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-down: #finish root; + } +</style> +<body> + <p><a href="" id="start">START</a></p> + <p><a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-down-011-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-down-011-frame.html new file mode 100644 index 0000000000..ce69bc810d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-down-011-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with target #finish</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-down-012-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-down-012-frame.html new file mode 100644 index 0000000000..3854596cc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-down-012-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-down: #finish "frame" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-down: #finish "frame"; + } +</style> +<body> + <p><a href="" id="finish">FINISH</a></p> + <p><a href="" id="start">START</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-down-013-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-down-013-frame.html new file mode 100644 index 0000000000..868281fd10 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-down-013-frame.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-down: #finish "sibling" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-down: #finish "sibling"; + } +</style> +<body> + <p> + <a href="" id="start">START</a> + </p> + <p> + <a href="" id="finish">ignore</a> + </p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-left-009-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-left-009-frame.html new file mode 100644 index 0000000000..f11d32ed76 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-left-009-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with #finish to ignore</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-left-010-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-left-010-frame.html new file mode 100644 index 0000000000..e09a3750a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-left-010-frame.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-left: #finish root }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-left: #finish root; + } +</style> +<body> + <p><a href="" id="start">START</a> <a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-left-011-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-left-011-frame.html new file mode 100644 index 0000000000..ce69bc810d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-left-011-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with target #finish</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-left-012-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-left-012-frame.html new file mode 100644 index 0000000000..94a0fe5ed8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-left-012-frame.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-left: #finish "frame" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-left: #finish "frame"; + } +</style> +<body> + <p><a href="" id="start">START</a> <a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-left-013-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-left-013-frame.html new file mode 100644 index 0000000000..e52c9482f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-left-013-frame.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-left: #finish "sibling" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-left: #finish "sibling"; + } +</style> +<body> + <p><a href="" id="finish">ignore</a> <a href="" id="start">START</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-right-009-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-right-009-frame.html new file mode 100644 index 0000000000..f11d32ed76 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-right-009-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with #finish to ignore</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-right-010-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-right-010-frame.html new file mode 100644 index 0000000000..3173257611 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-right-010-frame.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-right: #finish root }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-right: #finish root; + } +</style> +<body> + <p><a href="" id="finish">ignore</a> <a href="" id="start">START</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-right-011-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-right-011-frame.html new file mode 100644 index 0000000000..ce69bc810d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-right-011-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with target #finish</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-right-012-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-right-012-frame.html new file mode 100644 index 0000000000..71f8b3cfb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-right-012-frame.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-right: #finish "frame" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-right: #finish "frame"; + } +</style> +<body> + <p><a href="" id="finish">FINISH</a> <a href="" id="start">START</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-right-013-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-right-013-frame.html new file mode 100644 index 0000000000..e133d15473 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-right-013-frame.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-right: #finish "sibling" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-right: #finish "sibling"; + } +</style> +<body> + <p><a href="" id="finish">ignore</a> <a href="" id="start">START</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-up-009-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-up-009-frame.html new file mode 100644 index 0000000000..f11d32ed76 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-up-009-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with #finish to ignore</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">ignore</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-up-010-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-up-010-frame.html new file mode 100644 index 0000000000..ba04833c3b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-up-010-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-up: #finish root }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-up: #finish root; + } +</style> +<body> + <p><a href="" id="finish">ignore</a></p> + <p><a href="" id="start">START</a> </p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-up-011-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-up-011-frame.html new file mode 100644 index 0000000000..ce69bc810d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-up-011-frame.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with target #finish</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<body> + <p><a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-up-012-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-up-012-frame.html new file mode 100644 index 0000000000..d0375869f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-up-012-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-up: #finish "frame" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-up: #finish "frame"; + } +</style> +<body> + <p><a href="" id="start">START</a></p> + <p><a href="" id="finish">FINISH</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/nav-up-013-frame.html b/testing/web-platform/tests/css/css-ui/support/nav-up-013-frame.html new file mode 100644 index 0000000000..e9af2dbf92 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/nav-up-013-frame.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: Directional Focus Navigation - frame with: #start { nav-up: #finish "sibling" }</title> +<link rel="author" title="Jorrit Vermeiren" href="mailto:jorritv@opera.com"> +<link rel="author" title="Daniel Glazman" href="mailto:d.glazman@partner.samsung.com"> +<style> + #start { + nav-up: #finish "sibling"; + } +</style> +<body> + <p><a href="" id="finish">ignore</a></p> + <p><a href="" id="start">START</a></p> +</body> diff --git a/testing/web-platform/tests/css/css-ui/support/orange.png b/testing/web-platform/tests/css/css-ui/support/orange.png Binary files differnew file mode 100644 index 0000000000..0a08d3ae5d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/orange.png diff --git a/testing/web-platform/tests/css/css-ui/support/orange.svg b/testing/web-platform/tests/css/css-ui/support/orange.svg new file mode 100644 index 0000000000..56346a8295 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/orange.svg @@ -0,0 +1,4 @@ +<svg width="100" height="100" viewBox="0 0 100 100" + xmlns="http://www.w3.org/2000/svg"> +<rect x="0" y="0" width="100" height="100" fill="orange"/> +</svg> diff --git a/testing/web-platform/tests/css/css-ui/support/r1-1.svg b/testing/web-platform/tests/css/css-ui/support/r1-1.svg new file mode 100644 index 0000000000..84f1b9532b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/r1-1.svg @@ -0,0 +1,2 @@ +<svg style="background: green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> +<g id='testmeta' xmlns:html='http://www.w3.org/1999/xhtml'><html:link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/" /></g></svg> diff --git a/testing/web-platform/tests/css/css-ui/support/red.ico b/testing/web-platform/tests/css/css-ui/support/red.ico Binary files differnew file mode 100644 index 0000000000..22a7b36fe3 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/red.ico diff --git a/testing/web-platform/tests/css/css-ui/support/test.mp4 b/testing/web-platform/tests/css/css-ui/support/test.mp4 Binary files differnew file mode 100644 index 0000000000..1b0e7b56a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/test.mp4 diff --git a/testing/web-platform/tests/css/css-ui/support/test.ogv b/testing/web-platform/tests/css/css-ui/support/test.ogv Binary files differnew file mode 100644 index 0000000000..50d59dfb38 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/test.ogv diff --git a/testing/web-platform/tests/css/css-ui/support/test.webm b/testing/web-platform/tests/css/css-ui/support/test.webm Binary files differnew file mode 100644 index 0000000000..3a601805d7 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/test.webm diff --git a/testing/web-platform/tests/css/css-ui/support/w100.svg b/testing/web-platform/tests/css/css-ui/support/w100.svg new file mode 100644 index 0000000000..2c2642e590 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/w100.svg @@ -0,0 +1,2 @@ +<svg style="background: green" xmlns="http://www.w3.org/2000/svg" width="100"> +<g id='testmeta' xmlns:html='http://www.w3.org/1999/xhtml'><html:link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/" /></g></svg> diff --git a/testing/web-platform/tests/css/css-ui/support/w100_h100.svg b/testing/web-platform/tests/css/css-ui/support/w100_h100.svg new file mode 100644 index 0000000000..29aa998db1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/w100_h100.svg @@ -0,0 +1,2 @@ +<svg style="background: green" xmlns="http://www.w3.org/2000/svg" width="100" height="100"> +<g id='testmeta' xmlns:html='http://www.w3.org/1999/xhtml'><html:link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/" /></g></svg> diff --git a/testing/web-platform/tests/css/css-ui/support/w100_r1-1.svg b/testing/web-platform/tests/css/css-ui/support/w100_r1-1.svg new file mode 100644 index 0000000000..3bb399b73f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/support/w100_r1-1.svg @@ -0,0 +1,2 @@ +<svg style="background: green" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 100 100"> +<g id='testmeta' xmlns:html='http://www.w3.org/1999/xhtml'><html:link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/" /></g></svg> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-001.html b/testing/web-platform/tests/css/css-ui/text-overflow-001.html new file mode 100644 index 0000000000..ae9029933a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-001.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow - clip - the text inline content overflows will be broken</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.2. Overflow Ellipsis: the 'text-overflow' property" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-001-ref.html"> +<meta name="assert" content="Test checks that the inline content that overflows will be clipped. Characters may be only partially rendered when +text-overflow set clip"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font-size: 10px; + overflow: hidden; + text-overflow: clip; + white-space: nowrap; + width: 120px; + } + 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 checks the content broken if the content overflows the container</span> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-002.html b/testing/web-platform/tests/css/css-ui/text-overflow-002.html new file mode 100644 index 0000000000..d8a95299d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-002.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow - ellipsis - the broken textual content instead of ellipsis</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.2. Overflow Ellipsis: the 'text-overflow' property" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-002-ref.html"> +<meta name="assert" content="Test checks that an ellipsis (...) is shown instead of overflowing textual content"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + div { + font-size: 10px; + overflow: hidden; + text-overflow: ellipsis; + width: 150px; + } + 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>TestChecksThatTheBrokenContentRepalcedByEllipsis</span> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-003.html b/testing/web-platform/tests/css/css-ui/text-overflow-003.html new file mode 100644 index 0000000000..ea958ef35b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow - inherit - inherit clip value of parent's text-overflow property</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.2. Overflow Ellipsis: the 'text-overflow' property" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-001-ref.html"> +<meta name="assert" content="Test checks that text-overflow inherits the parent' clip value when text-overflow set inherit"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #container { + text-overflow: clip; + } + #test { + font-size: 10px; + overflow: hidden; + text-overflow: inherit; + white-space: nowrap; + width: 120px; + } + span { + font-family: Ahem; + font-size: 30px; + } +</style> +<body> + <p>Test passes if there is a <strong>black rectangle</strong> below.</p> + <div id="container"> + <div id="test"> + <span>Test checks the content broken if the content overflows the container</span> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-004.html b/testing/web-platform/tests/css/css-ui/text-overflow-004.html new file mode 100644 index 0000000000..1cc11e8257 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-004.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow - inherit - inherit ellipsis value of parent's text-overflow property</title> +<link rel="author" title="Intel" href="http://www.intel.com/"> +<link rel="author" title="Shiyou Tan" href="mailto:shiyoux.tan@intel.com"> +<link rel="help" title="8.2. Overflow Ellipsis: the 'text-overflow' property" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-002-ref.html"> +<meta name="assert" content="Test checks that text-overflow inherits the parent' ellipsis value when text-overflow set inherit"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> + #container { + text-overflow: ellipsis; + } + #test { + font-size: 10px; + overflow: hidden; + text-overflow: inherit; + width: 150px; + } + 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 id="container"> + <div id="test"> + <span>TestChecksThatTheBrokenContentRepalcedByEllipsis</span> + </div> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-005.html b/testing/web-platform/tests/css/css-ui/text-overflow-005.html new file mode 100644 index 0000000000..b7ced3673d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-005.html @@ -0,0 +1,20 @@ +<!doctype html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS-UI test: text-overflow reflow</title> +<meta name="assert" content="Text overflow should disappear when the container becomes large enough. This test is targetted at bug #14952 in Servo's incremental reflow engine."> +<link rel="author" title="Michael Howell" href="mailto:michael@notriddle.com"> +<link rel="help" title="8.2. Overflow Ellipsis: the 'text-overflow' property" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-005-ref.html"> +<meta name="flags" content="ahem"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style>html{font-family:Ahem}</style> +<div id=goat style="width:5em"><p style="text-overflow:ellipsis;overflow:hidden">XXXXXXXXXX</p></div> +<script> +var goat = document.getElementById("goat"); +requestAnimationFrame(function() { + goat.style.width = "20em"; + document.documentElement.className = ""; +}); +</script> + diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-006.html b/testing/web-platform/tests/css/css-ui/text-overflow-006.html new file mode 100644 index 0000000000..8fd149a98d --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-006.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow applied at edge of block container</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-006-ref.html"> +<meta name="assert" content="Checks that the elipsis is applied at the edge of the line box, not the end of the block container, when these are different."> +<style> +div { + white-space: pre; + font-family: monospace; + text-overflow: ellipsis; + overflow: hidden; + width: 9.5ch; + /* 9ch ought to be enough, + but Safari seems to have aliasing issues that make the ellipsis character larger than 1ch by a bit. + Adding an extra .5 does not change the validity of the test, + and lets safari fit “PASS…” in the space provided. + This issue may be a bug, but if so, it is unrelated to what this test is testing, + so no need to force a fail when an easy workaround is available. + */ +} +span { float: right; } +</style> + +<p>Test passes if “PASS…” appears below.</p> +<div><span> </span>PASS FAIL</div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-007.html b/testing/web-platform/tests/css/css-ui/text-overflow-007.html new file mode 100644 index 0000000000..795dae40fa --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-007.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis adjacent to remaining content</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The ellipsis is placed immediately adjacent to the end edge of the remaining inline content, with no intervening gap."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + white-space: pre; + font: 50px/1 Ahem; + text-overflow: ellipsis; + overflow: hidden; + width: 2.5em; /* We will be fitting 2em worth of characters in a 2.5em space, to see where the extra .5em goes. It should be after, not between the characters.*/ + color: green; +} +.red { + position: absolute; + z-index: -1; + width: 100px; + height: 100px; + background: red; + /* This red box wich will show through the gap between the letter and the ellipsis if there's one + but not extend past the two characters if the ellipsis is adjacent to the character as it should be. + */ +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class=red></div> +<div class=test>this line should render to a "t" followed by a "…", both of which are a 1em square in ahem, whithout any gap between them. +this line also should render to a "t" followed by a "…", both of which are a 1em square in ahem, whithout any gap between them.</div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-008.html b/testing/web-platform/tests/css/css-ui/text-overflow-008.html new file mode 100644 index 0000000000..e4dbd761a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-008.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis and first character</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-008-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The first character on a line must be clipped rather than ellipsed."> +<!-- + If the ellipsis character appears, it will be red (as it is styled after the block), and the test will fail. + If the first character is omitted rather than clipped, there will be no box at all, and the test will fail. +--> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + font: 100px/1 Ahem; + text-overflow: ellipsis; + overflow: hidden; + width: 0.5em; + color: red; +} +</style> + +<p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> +<div class=test><span style="color:green">x</span></div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-009.html b/testing/web-platform/tests/css/css-ui/text-overflow-009.html new file mode 100644 index 0000000000..384f820511 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-009.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis and first atomic inline</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="The first atomic inline on a line must be clipped rather than ellipsed."> +<style> +body > div { + width: 100px; + white-space: pre; + text-overflow: ellipsis; + overflow: hidden; + color: red; +} +span { + display: inline-block; + height: 100px; + width: 200px; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div><span> </span>XXXXXX</div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-010.html b/testing/web-platform/tests/css/css-ui/text-overflow-010.html new file mode 100644 index 0000000000..aec768cb69 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-010.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis hides atomic inlines and chars at end of line</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Implementations must hide atomic inlines and characters at the end of the line to make room for the ellipsis"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.green { + position: absolute; + z-index: -1; + background: green; + width: 100px; + height: 100px; +} +.test { + white-space: pre; + font-family: Ahem; + text-overflow: ellipsis; + overflow: hidden; + width: 5.2em; /* making this 5.2em rather than 5em, to ensure that the atomic inline gets entirely hidden even if it is only partially obstructing */ + color: green; +} +span { + color: red; +} +.ib { + display: inline-block; + background: red; /* in case the text gets disapeared but the box is still there. */ +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class=green></div> +<div class=test> <span class=ib>X</span> </div> +<div class=test> <span>X</span> </div> +<div class=test> <img src="support/1x1-red.png" width=10 height=10> </div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-011.html b/testing/web-platform/tests/css/css-ui/text-overflow-011.html new file mode 100644 index 0000000000..0fe96e6519 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-011.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis hides end of line</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Implementations must hide at the *end* (not right) of the line to make room for the ellipsis"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + white-space: pre; + font: 100px/1 Ahem; + color: green; + overflow: hidden; + text-overflow: ellipsis; + width: 500px; +} +.red { + position: absolute; + z-index: -1; + background: red; + width: 100px; + height: 100px; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class=red></div> +<div class=test dir=rtl> <span style="color:orange">xxxxxx</span></div> +<!-- Adding some visible non-green characters in the positions that are supposed to be elided, +to make sure that not only the ellipsis is shown at the right place, but that it replaces +the right characters --> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-012.html b/testing/web-platform/tests/css/css-ui/text-overflow-012.html new file mode 100644 index 0000000000..a75908026a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-012.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis and extended grapheme cluster</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-012-ref.html"> +<meta name="flags" content="should"> +<!-- This is SHOULD because although CSS-UI defines "character" as "grapheme cluster" in a non optional manner + UAX29 itself defines grapheme cluster as either legacy or extended grapheme clusters, + and says (emphasis mine): + The extended grapheme clusters **should** be used + in implementations in preference to legacy grapheme clusters + --> +<meta name="assert" content="Implementations must hide characters, i.e. entire garpheme clusters, not part of them, to make room for the ellipsis"> +<style> +#sizer { + font-size: 50px; + white-space: pre; + color: white; + float: left; + position: relative; +} + +#test { + overflow: hidden; + text-overflow: ellipsis; + position: absolute; + top: 0; right: 2px; bottom: 0; left: 0; + color: green; +} +span { + color: red; +} + +</style> + +<p>Test passes if there are three green dots below and <strong>no red</strong>.</p> + +<!--Starting the line with an space because the first character on the line is clipped rather than ellided, so we need the tested grapheme cluster to be non-first--> +<!-- +sizer shrinkwraps to the size of a space, plus the grapheme cluster, plus the ellipsis. +test is 2px shorter than that, so it can only fit part of the grapheme cluster. +The whole grapheme cluster should be removed, not just its second character. +--> + +<div id=sizer> กำ…<div id=test> <span>กำfiller text to make things overflow</span></div><div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-013.html b/testing/web-platform/tests/css/css-ui/text-overflow-013.html new file mode 100644 index 0000000000..20c9a5c5ae --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-013.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis and baseline alignement</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsing-details"> +<link rel="match" href="reference/text-overflow-013-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The ellipsis is be baseline aligned with the block, even if the thing it replaces isn't."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; + font: 100px/1 Ahem; + color: green; + + /* 2em width and starting with a space + because the handling of the ellipsis of the first character on the line is special, + and therefore we need to have the thing we want to test in non first position. + */ + width: 2em; +} +.red { + position: absolute; + z-index: -1; + width: 100px; + height: 100px; + background: red; + margin-left: 100px; /* moving right to skip the first 100x100 space that starts each line */ +} +span { + vertical-align: sub; + color: red; +} +</style> + +<p>Test passes if there are 3 filled green squares and <strong>no red</strong>.</p> +<div class="red"></div> +<div class=test> <span>xxxx<br><div class="red"></div> xxxx<br><div class="red"></div> xxxx</span> </div> +<!-- +There are 3 lines in the test div to make sure that the middle one only contains text from the span, not directly from the block, +guaranteeing that the ellipsis is taking its baseline from the block even when the block has no direct content on the line. + +The "red" divs for line 2 and 3 are descendants of the span so that they are placed based on their static position at the begining of each line. +The alternative, which would be to place them (vertically) with explicit offsets would require knowing +the precise height of the preceeding line boxes, which isn't reliable across UAs. +--> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-014.html b/testing/web-platform/tests/css/css-ui/text-overflow-014.html new file mode 100644 index 0000000000..0fe5063a34 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-014.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: styling the ellipsis</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsing-details"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="The ellipsis' font family, font size, and color are styled according to the block."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + overflow: hidden; + text-overflow: ellipsis; + white-space:pre; + font: 100px/1 Ahem; + color: green; + + /* 2em width and starting with a space + because the handling of the ellipsis of the first character on the line is special, + and therefore we need to have the thing we want to test in non first position. + Shifting 1em left to align with the usual green square. + */ + width: 2em; + margin-left: -1em; +} +.red { + position: absolute; + z-index: -1; + width: 100px; + height: 100px; + background: red; +} +span { + font: 50%/1 serif; + color: red; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class=red></div> +<div class=test> <span>xxxxxxxxxxxxxxxxxxxx</span></div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-015.html b/testing/web-platform/tests/css/css-ui/text-overflow-015.html new file mode 100644 index 0000000000..3899fc6a1e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-015.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis after graphical transformations</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsing-details"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Ellipsing occurs after relative positioning"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + overflow: hidden; + text-overflow: ellipsis; + width: 100px; + height: 100px; + white-space: pre; + font: 20px/1 Ahem; + color: green; + background: url("support/1x1-red.png") top right / 1em 1em no-repeat, green; +} +.rel { + position: relative; + left: 1em; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div><span class=rel> </span></div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-016.html b/testing/web-platform/tests/css/css-ui/text-overflow-016.html new file mode 100644 index 0000000000..d66b64d58a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-016.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: clipping the ellipsis</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsing-details"> +<link rel="match" href="reference/text-overflow-016-ref.html"> +<meta name="flags" content="ahem"> +<meta name="assert" content="If there is insufficient space for the ellipsis, then clip the rendering of the ellipsis itself"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test, .test2 { + overflow: hidden; + text-overflow: ellipsis; + width: 100px; + white-space: pre; + font: 50px/1 Ahem; + height: 20px; + position: relative; +} +span { + display: inline-block; + width: 60px; + height: 1em; + vertical-align: bottom; +} + +/* if the ellipsis is shorter than the expected 40px (or misplaced) the red background will show */ +.test { + color: green; + background: url("support/1x1-red.png") right / 40px auto no-repeat; +} + +/* if the ellipsis (which is red) is longer that the expected 40px (or misplaced), it won't be fully covered by the green abspos */ +.test2 { color: red; } +.test2::after { + content: ""; + position: absolute; + top: 0; right: 0; bottom: 0; + width: 40px; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class=test><span></span>filler text to make things overflow</div> +<div class=test2><span></span>filler text to make things overflow</div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-017.html b/testing/web-platform/tests/css/css-ui/text-overflow-017.html new file mode 100644 index 0000000000..561d4d0b6f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-017.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: interacting with the ellipsis</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem interact dom"> +<meta name="assert" content="Ellipsing must not prevent dispatching of pointer events."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#test { + overflow: hidden; + text-overflow: ellipsis; + margin-left: -100px; + width: 2.5em; + height: 1em; + white-space: pre; + font: 100px/1 Ahem; + color: blue; +} +#discard { + float: left; +} +</style> + +<div id=discard>First, click the blue box. </div> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="test" onclick="green()"> </div> +<script> +function green() { + document.getElementById("test").style.color="green"; + document.getElementById("discard").remove(); + document.children[0].className=""; +} +</script> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-018.html b/testing/web-platform/tests/css/css-ui/text-overflow-018.html new file mode 100644 index 0000000000..848ebe690e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-018.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: selecting the ellipsis</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsis-interaction"> +<meta name="flags" content="interact should"> +<meta name="assert" content="Selecting the ellipsis should select the ellipsed text"> +<style> +div{ + font-size: 25px; + font-family: monospace; + width: 2.1ch; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + border: solid blue; + padding-right: 0.9ch; +} +textarea { + width: 100%; + box-sizing: border-box; + border: solid orange; +} +</style> + +<p>Select the elipsis character (“…”) in the blue box below, copy it to the clipboard, and paste the result into the orange box. +<p>This test passes if the pasted text is “This test passes”. If only part of that text is pasted, the test fails. +<div> This test passes</div> +<textarea></textarea> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-019.html b/testing/web-platform/tests/css/css-ui/text-overflow-019.html new file mode 100644 index 0000000000..2571d4cf93 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-019.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsed text selection</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsis-interaction"> +<meta name="flags" content="interact dom should"> +<meta name="assert" content="If all of the ellipsed text is selected, UAs should show selection of the ellipsis."> +<style> +div{ + font-size: 25px; + font-family: monospace; + width: 2.1ch; + white-space: pre; + overflow: hidden; + text-overflow: ellipsis; + border: solid blue; +} +</style> + +<p>This test passes if both the “P” and the ellipsis (“…”) in the blue box bellow appear selected. +<div id=test>Pass</div> + +<script> +var sel = window.getSelection(); +sel.selectAllChildren(document.getElementById("test")); +</script> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-020.html b/testing/web-platform/tests/css/css-ui/text-overflow-020.html new file mode 100644 index 0000000000..73f2b88e89 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-020.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: no ellipsing when nesting</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Nested paragraph won’t ellipse."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + overflow: hidden; + text-overflow: ellipsis; + width: 100px; + height: 100px; + background: green; +} +div > p { + white-space: pre; + font: 40px/1 Ahem; + color: green; + background: red; + margin: 0; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div><p>xxxxxxxxxx</p></div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-021.html b/testing/web-platform/tests/css/css-ui/text-overflow-021.html new file mode 100644 index 0000000000..8057ffc787 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-021.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis, revealing more text</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#ellipsis-scrolling"> +<link rel="match" href="reference/text-overflow-021-ref.html"> +<meta name="flags" content="dom should"> +<meta name="assert" content="When an element with ellipsis is scrolled, more content should be revealed, until the element is scrolled far enough to display the edge of the content at which point that content should be displayed rather than an ellipsis."> +<style> +div { + font-family: monospace; + width: 16ch; + white-space: pre; + overflow: scroll; + text-overflow: ellipsis; + 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); +document.documentElement.className = ""; +</script> + + diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-022.html b/testing/web-platform/tests/css/css-ui/text-overflow-022.html new file mode 100644 index 0000000000..e1ada9d479 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-022.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis and legacy grapheme cluster</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-022-ref.html"> +<meta name="assert" content="Implementations must hide characters, i.e. entire garpheme clusters, not part of them, to make room for the ellipsis"> +<style> +#sizer { + font-size: 50px; + white-space: pre; + color: white; + float: left; + position: relative; +} + +#test { + overflow: hidden; + text-overflow: ellipsis; + position: absolute; + top: 0; right: 2px; bottom: 0; left: 0; + color: green; +} +span { + color: red; +} + +</style> + +<p>Test passes if there are three green dots below and <strong>no red</strong>.</p> + +<!--Starting the line with an space because the first character on the line is clipped rather than ellided, so we need the tested grapheme cluster to be non-first--> +<!-- +sizer shrinkwraps to the size of a space, plus the grapheme cluster, plus the ellipsis. +test is 2px shorter than that, so it can only fit part of the grapheme cluster. +The whole grapheme cluster should be removed, not just its second character. +--> + +<div id=sizer> l⃞…<div id=test> <span>l⃞filler text to make things overflow</span></div><div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-023.html b/testing/web-platform/tests/css/css-ui/text-overflow-023.html new file mode 100644 index 0000000000..b9c21ed8f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-023.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: interacting with the ellipsis</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<meta name="flags" content="ahem dom should"> +<meta name="assert" content="Pointer events on the ellipsis should be dispatched to the elided inline element if there's one, rather than directly to the block."> +<!-- This is tested indirectly, using elementFromPoint instead of actually triggering a pointer event, because: + * Actual pointer events can only be dispatched in an manual test, while elementFromPoint allows for an automated test + * These two methods are expected to give the same result + + This indirection and the slight risk of false positive or false negative it introduces + is preferable to a manual test which would hardly anyone would ever run. +--> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +#parent { + position: absolute; + top: 0; left: 0; + font: 50px/1 Ahem ; + overflow: hidden; + width: 3em; + text-overflow: ellipsis; +} +</style> +<div id=parent> <span id=target> </span></div> +<script> +setup({explicit_done: true}); +document.fonts.ready.then(()=> { + test( + function() { + var e = document.elementFromPoint(125,25); + assert_equals(e.id,"target", "the element targeted by a hit on the ellipsis is the elided inline."); + }, "Checks hit testing on the ellipsis"); + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-024-ref.html b/testing/web-platform/tests/css/css-ui/text-overflow-024-ref.html new file mode 100644 index 0000000000..2e9b8301f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-024-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: text-overflow on tr::before with overflow:hidden</title> + <style type="text/css"> + + td { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + </style> +</head> +<body> +PASS if there is an ellipsis at the end of the text below. + <table style="table-layout: fixed; width: 130px" cellpadding="0" cellspacing="0"> + <tr><td>Some long text here that overflows and whatnot.</td></tr> + </table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-024.html b/testing/web-platform/tests/css/css-ui/text-overflow-024.html new file mode 100644 index 0000000000..0ca5b428cb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-024.html @@ -0,0 +1,31 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: text-overflow on tr::before with overflow:hidden</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> + <link rel="help" href="https://www.w3.org/TR/css3-ui/#text-overflow" title="5.2. the 'text-overflow' property"> + <link rel="match" href="text-overflow-024-ref.html"> + <style type="text/css"> + + tr::before { + content: "Some long text here that overflows and whatnot."; + display: table-cell; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + </style> +</head> +<body> +PASS if there is an ellipsis at the end of the text below. + <table style="table-layout: fixed; width: 130px" cellpadding="0" cellspacing="0"> + <tr></tr> + </table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-025-ref.html b/testing/web-platform/tests/css/css-ui/text-overflow-025-ref.html new file mode 100644 index 0000000000..c8acd47960 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-025-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: text-overflow on tr::before without overflow:hidden</title> + <style type="text/css"> + + td { + white-space: nowrap; + } + + </style> +</head> +<body> +PASS if there is no ellipsis below. + <table style="table-layout: fixed; width: 130px" cellpadding="0" cellspacing="0"> + <tr><td>Some long text here that overflows and whatnot.</td></tr> + </table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-025.html b/testing/web-platform/tests/css/css-ui/text-overflow-025.html new file mode 100644 index 0000000000..3e0fce0afb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-025.html @@ -0,0 +1,33 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: text-overflow on tr::before without overflow:hidden</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"> + <link rel="help" href="https://www.w3.org/TR/css3-ui/#text-overflow" title="5.2. the 'text-overflow' property"> + <link rel="match" href="text-overflow-025-ref.html"> + <style type="text/css"> + + tr::before { + content: "Some long text here that overflows and whatnot."; + display: table-cell; + white-space: nowrap; + text-overflow: ellipsis; + } + tr { + overflow: hidden; + } + + </style> +</head> +<body> +PASS if there is no ellipsis below. + <table style="table-layout: fixed; width: 130px" cellpadding="0" cellspacing="0"> + <tr></tr> + </table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-026-ref.html b/testing/web-platform/tests/css/css-ui/text-overflow-026-ref.html new file mode 100644 index 0000000000..f2db8c747f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-026-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: text-overflow with leading white-space</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1403986"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +.ellipsize { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100px; + border: 1px solid; +} + +.inline-block { + display: inline-block; + background: red; +} + </style> +</head> +<body> + +<pre> +The test PASS if all of the following are true: +1. there are no red areas +2. the first two blocks display "PASS" but no ellipsis +3. the last three blocks display an ellipsis +</pre> + +<div class="ellipsize" style="text-overflow: clip"> + <span style="margin-left:5px"></span><span class="inline-block" style="background:lime"> + PASS PASS PASS PASS PASS</span> +</div> + +<div class="ellipsize" style="text-overflow: clip"> + <span style="margin-left:5px"></span> + <span class="inline-block" style="background:lime"> + PASS PASS PASS PASS PASS</span> +</div> + +<div class="ellipsize"> + <span style="margin-left:10px"></span> … +</div> + +<div class="ellipsize"> + … +</div> + +<div class="ellipsize"> + a… +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-026.html b/testing/web-platform/tests/css/css-ui/text-overflow-026.html new file mode 100644 index 0000000000..2d1aa57cc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-026.html @@ -0,0 +1,67 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Test: text-overflow with leading white-space</title> + <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1403986"> + <link rel="help" href="https://www.w3.org/TR/css3-ui/#text-overflow" title="5.2. the 'text-overflow' property"> + <link rel="match" href="text-overflow-026-ref.html"> + <style type="text/css"> +html,body { + color:black; background-color:white; font:16px/1 monospace; +} + +.ellipsize { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + width: 100px; + border: 1px solid; +} + +.inline-block { + display: inline-block; + background: red; +} + </style> +</head> +<body> + +<pre> +The test PASS if all of the following are true: +1. there are no red areas +2. the first two blocks display "PASS" but no ellipsis +3. the last three blocks display an ellipsis +</pre> + +<div class="ellipsize"> + <span style="margin-left:5px"></span><span class="inline-block" style="background:lime"> + PASS PASS PASS PASS PASS</span> +</div> + +<div class="ellipsize"> + <span style="margin-left:5px"></span> + <span class="inline-block" style="background:lime"> + PASS PASS PASS PASS PASS</span> +</div> + +<div class="ellipsize"> + <span style="margin-left:10px"></span> <span class="inline-block"> + FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL </span> +</div> + +<div class="ellipsize"> + <span class="inline-block"> + FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL </span> +</div> + +<div class="ellipsize"> + a<span class="inline-block"> + FAIL FAIL FAIL FAIL FAIL FAIL FAIL FAIL </span> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-027.html b/testing/web-platform/tests/css/css-ui/text-overflow-027.html new file mode 100644 index 0000000000..6e7686c6c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-027.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow applies visually to bidi</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css-ui-3/#text-overflow"> +<link rel="help" href="http://www.w3.org/TR/css-ui-4/#text-overflow"> +<link rel="match" href="reference/text-overflow-027-ref.html"> +<meta name="assert" content="text-overflow is a visual operation that occurs after layout, and therfore ellides text from the visual end of the line, even in bidi situations"> +<style> +div { + font-family: monospace; + width: 10ch; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; +} +</style> + +<p>The test passes if the following text is visible below: 123456 FE…</p> +<div>123456 <bdo dir=rtl>ABCDEF</bdo></div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-028.html b/testing/web-platform/tests/css/css-ui/text-overflow-028.html new file mode 100644 index 0000000000..68b47cc188 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-028.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow applies visually to bidi</title> +<link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css-ui-3/#text-overflow"> +<link rel="help" href="http://www.w3.org/TR/css-ui-4/#text-overflow"> +<link rel="match" href="reference/text-overflow-028-ref.html"> +<meta name="assert" content="text-overflow is a visual operation that occurs after layout, and therfore ellides text from the visual end of the line, even in bidi situations"> +<style> +div { + font-family: monospace; + width: 10ch; + overflow: hidden; + text-overflow: ellipsis; + white-space: pre; +} +</style> + +<p>The test passes if the following text is visible below: …56 FEDCBA</p> +<div dir=rtl><bdo dir=rtl>ABCDEF</bdo> 123456</div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-029.html b/testing/web-platform/tests/css/css-ui/text-overflow-029.html new file mode 100644 index 0000000000..07ba447122 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-029.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html lang="en"> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: text-overflow and bidi interaction</title> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="http://www.w3.org/TR/css-ui-3/#text-overflow"> +<link rel="help" href="http://www.w3.org/TR/css-ui-4/#text-overflow"> +<link rel="match" href="reference/text-overflow-029-ref.html"> +<meta name="assert" content="When there's content of mixed directionality, text-overflow ellides the characters at the physical end of the line."> +<style> +div { + font: 20px monospace; + width: 12.3ch; /* slightly more than 12ch because in some browsers (safari) the ellipsis is slightly large than other characters, even in monospace fonts. */ + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} +</style> + +<div>Test ‮deliafdessap‬</div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-030.html b/testing/web-platform/tests/css/css-ui/text-overflow-030.html new file mode 100644 index 0000000000..0ccd59c12a --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-030.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: ellipsis should render under other positioned content</title> +<link rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="match" href="reference/text-overflow-030-ref.html"> +<style> +.positioned { + background-color: green; + position: absolute; + width: 100px; + height: 100px; +} +.ellipsis { + color: red; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: pre; + width: 100px; + font: 50px sans-serif; +} +</style> +<p>Test passes if there is a green rectangle and no red.</p> +<div class="positioned"></div> +<div class="ellipsis"> </div> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-change-color.html b/testing/web-platform/tests/css/css-ui/text-overflow-change-color.html new file mode 100644 index 0000000000..8982da5eb9 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-change-color.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<title>Test ellipsis style</title> +<link rel="match" href="reference/text-overflow-change-color-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#ellipsing-details"> +<link rel="author" href="kojii@chromium.org"> +<meta name="assert" content="Changing the color of the container should also change the color of ellipsis"> +<style> +div { + color: red; + text-overflow: ellipsis; + overflow: hidden; + white-space: pre; + font-size: 50px; + width: 5ch; +} +</style> +<body> +<div id=container>123456789</div> +<script> +document.body.offsetTop; +container.style.color = 'lime'; +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-abspos-in-inline-block-crash-001.html b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-abspos-in-inline-block-crash-001.html new file mode 100644 index 0000000000..23291d4339 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-abspos-in-inline-block-crash-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<title>Ellipsizing inline blocks that have absolute positioned objects should not crash</title> +<link rel="author" href="kojii@chromium.org"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=945690"> +<meta name="assert" content="Ellipsizing inline blocks that have absolute positioned objects should not crash"> +<style> +div { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 5ch; +} +.inline-block { + display: inline-block; +} +.abs { + position: absolute; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div> + 12345678 + <span class="inline-block"> + <span class="abs">abs</span> + </span> +</div> +<div> + 12345678 + <span class="inline-block"> + 999 + <span class="abs">abs</span> + </span> +</div> +<div> + 12 + <span class="inline-block"> + 3456789 + <span class="abs">abs</span> + </span> +</div> +<script> +test(() => {}, 'No crash or DCHECK failure'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-hyphen.html b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-hyphen.html new file mode 100644 index 0000000000..eb6f5d443e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-hyphen.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Ellipsizing hyphens should not crash</title> +<link rel="author" href="kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#ellipsing-details"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +div { + width: 0.1ch; + text-overflow: ellipsis; + overflow: hidden; +} +</style> +<body> + <div dir="rtl">12345­999</div> +<script> +test(() => {}, 'No crash or DCHECK failure'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-indent-001.html b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-indent-001.html new file mode 100644 index 0000000000..6f5c81bc1e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-indent-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Test ellipsis with `text-indent`</title> +<link rel="match" href="reference/text-overflow-ellipsis-indent-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#ellipsing-details"> +<link rel="author" href="mailto:kojii@chromium.org"> +<style> +div { + text-overflow: ellipsis; + overflow: hidden; + font-size: 10px; + width: 6ch; + padding-left: 3ch; +} +</style> +<body> + <div>123456</div> + <div>1234567</div> + <div style="text-indent: 3ch;">123</div> + <div style="text-indent: 3ch;">1234</div> + <div style="text-indent: -3ch;">123456789</div> + <div style="text-indent: -3ch;">1234567890</div> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-self-painting.html b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-self-painting.html new file mode 100644 index 0000000000..2810f8dae1 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-self-painting.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<title>CSS Basic User Interface Test: ellipsis when there are self-painting objects</title> +<link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> +<link rel="help" href="https://crbug.com/1005645"> +<link rel="author" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.test { + width: 5ch; + white-space: nowrap; +} +.ellipsis { + text-overflow: ellipsis; + overflow: hidden; +} +span { + display: inline-block; + width: 16px; + height: 16px; + background: red; + opacity: 0.3; +} +</style> +<body> + <div id="test" class="test ellipsis">1234567890 <span></span></div> + <div id="ref" class="test">1234567890 <span></span></div> +<script> +test(() => { + const ref_element = document.getElementById('ref'); + const test_element = document.getElementById('test'); + assert_equals(test_element.scrollWidth, ref_element.scrollWidth); +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-width-001.html b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-width-001.html new file mode 100644 index 0000000000..2042111588 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ellipsis-width-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Ellipsizing should not affect `offsetWidth` of inline boxes.</title> +<link rel="author" href="kojii@chromium.org"> +<link rel="help" href="https://crbug.com/978392"> +<link rel="help" href="https://drafts.csswg.org/css-ui-3/#ellipsing-details"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#ellipsis { + width: 50px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +</style> +<body> + <div id="normal"><span>This is a test text.</span></div> + <div id="ellipsis"><span>This is a test text.</span></div> +<script> +test(() => { + let normal_child = normal.firstElementChild; + let ellipsis_child = ellipsis.firstElementChild; + assert_equals(normal_child.offsetWidth, ellipsis_child.offsetWidth); +}); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ref.html b/testing/web-platform/tests/css/css-ui/text-overflow-ref.html new file mode 100644 index 0000000000..b471cf1c31 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ref.html @@ -0,0 +1,17 @@ +<!doctype html> +<head> + <title>CSS Reftest Ellipsis Reference</title> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + div { font-size:10px; } + span { font-family:Ahem; font-size:30px; } + </style> +</head> +<body> + <p>PREREQUISITE: The font used must have a glyph for the U+2026 character.</p> + <p>Test passes if there is <strong>ellipsis</strong> after a black square.</p> + <div> + <span>A</span>… + </div> +</body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ruby-ref.html b/testing/web-platform/tests/css/css-ui/text-overflow-ruby-ref.html new file mode 100644 index 0000000000..ae5267aa9e --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ruby-ref.html @@ -0,0 +1,83 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>Reference: text-overflow:ellipsis and ruby</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} + +.clip { + overflow: hidden; + width: 40px; + text-overflow: ellipsis; +} + +input { width: 40px; -webkit-appearance: none; border: 1px solid black; } +span { white-space: pre; } +.thg { display: inline-table; } +.tc { display: inline-table; } +.t { display: inline-table; } + + </style> +</head> +<body> + +<div style="float:left; width:300px"> +<div class="clip"> +<span><span><span>aa<input class="thg">bb</span></span></span> +<br> +<span><span><span>aa<div class="thg">bbbbbb</div>cc</span></span></span> +<br> +<span><span><span>aa<span>bbbbbb</span>cc</span></span></span> +<br> +<span><span><span>aa<input class="tc">bb</span></span></span> +<br> +<span><span><span>aa<div class="tc">bbbbbb</div>cc</span></span></span> +<br> +<span><span><span>aa<input class="t">bb</span></span></span> +<br> +<span><span><span>aa<div class="t">bbbbbb</div>cc</span></span></span> + +<br> +<span><span><span><input class="thg">bb</span></span></span> +<br> +<span><span><span><div class="thg">bbbbbb</div>cc</span></span></span> +<br> +<span><span><span><span>bbbbbb</span>cc</span></span></span> +<br> +<span><span><span><input class="tc">bb</span></span></span> +<br> +<span><span><span><div class="tc">bbbbbb</div>cc</span></span></span> +<br> +<span><span><span><input class="t">bb</span></span></span> +<br> +<span><span><span><div class="t">bbbbbb</div>cc</span></span></span> +</div> +</div> + +<div style="float:left; width:300px"> +<div class="clip"> +<span><span><input class="thg">bb</span></span> +<br> +<span><span><div class="thg">bbbbbb</div>cc</span></span> +<br> +<span><span>bbbbbbcc</span></span> +<br> +<span><span><input class="tc">bb</span></span> +<br> +<span><span><div class="tc">bbbbbb</div>cc</span></span> +<br> +<span><span><input class="t">bb</span></span> +<br> +<span><span><div class="t">bbbbbb</div>cc</span></span> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow-ruby.html b/testing/web-platform/tests/css/css-ui/text-overflow-ruby.html new file mode 100644 index 0000000000..c8abebb720 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow-ruby.html @@ -0,0 +1,85 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Basic User Interface Test: text-overflow:ellipsis and ruby</title> + <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow"> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="match" href="text-overflow-ruby-ref.html"> + <style> +html,body { + color:black; background-color:white; font:14px/1 monospace; padding:0; margin:0; +} + +.clip { + overflow: hidden; + width: 40px; + text-overflow: ellipsis; +} + +input { width: 40px; -webkit-appearance: none; border: 1px solid black; } + +.thg { display: table-header-group; } +.tc { display: table-cell; } +.t { display: table; } + + </style> +</head> +<body> + +<div style="float:left; width:300px"> +<div class="clip"> +<ruby><rb><span>aa<input class="thg">bb</span></rb></ruby> +<br> +<ruby><rb><span>aa<div class="thg">bbbbbb</div>cc</span></rb></ruby> +<br> +<ruby><rb><span>aa<span>bbbbbb</span>cc</span></rb></ruby> +<br> +<ruby><rb><span>aa<input class="tc">bb</span></rb></ruby> +<br> +<ruby><rb><span>aa<div class="tc">bbbbbb</div>cc</span></rb></ruby> +<br> +<ruby><rb><span>aa<input class="t">bb</span></rb></ruby> +<br> +<ruby><rb><span>aa<div class="t">bbbbbb</div>cc</span></rb></ruby> + +<br> +<ruby><rb><span><input class="thg">bb</span></rb></ruby> +<br> +<ruby><rb><span><div class="thg">bbbbbb</div>cc</span></rb></ruby> +<br> +<ruby><rb><span><span>bbbbbb</span>cc</span></rb></ruby> +<br> +<ruby><rb><span><input class="tc">bb</span></rb></ruby> +<br> +<ruby><rb><span><div class="tc">bbbbbb</div>cc</span></rb></ruby> +<br> +<ruby><rb><span><input class="t">bb</span></rb></ruby> +<br> +<ruby><rb><span><div class="t">bbbbbb</div>cc</span></rb></ruby> +</div> +</div> + +<div style="float:left; width:300px"> +<div class="clip"> +<ruby><rb><input class="thg">bb</rb></ruby> +<br> +<ruby><rb><div class="thg">bbbbbb</div>cc</rb></ruby> +<br> +<ruby><rb>bbbbbbcc</rb></ruby> +<br> +<ruby><rb><input class="tc">bb</rb></ruby> +<br> +<ruby><rb><div class="tc">bbbbbb</div>cc</rb></ruby> +<br> +<ruby><rb><input class="t">bb</rb></ruby> +<br> +<ruby><rb><div class="t">bbbbbb</div>cc</rb></ruby> +</div> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/text-overflow.html b/testing/web-platform/tests/css/css-ui/text-overflow.html new file mode 100644 index 0000000000..88bc91157b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/text-overflow.html @@ -0,0 +1,29 @@ +<!doctype html> +<html> + <title>CSS Basic User Interface Test: text-overflow - ellipsis</title> + <link rel="author" title="YreenChan" href="mailto:yreenchan@gmail.com"> + <link rel="reviewer" title="Simon Pieters" href="mailto:simonp@opera.com"> + <link rel="reviewer" title="Leif Arne Storset" href="mailto:lstorset@opera.com"> + <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow" title="8.2. the 'text-overflow' property"> + <link rel="match" href="text-overflow-ref.html"> + <meta name="flags" content="ahem"> + <meta name="assert" content="'text-overflow:ellipsis' renders U+2026 when text is overflowing."> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> + div { + font-size:10px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 50px; + } + 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 <strong>ellipsis</strong> after a black square.</p> + <div> + <span>AAAA</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/tools/appearance-build-webkit-reftests.py b/testing/web-platform/tests/css/css-ui/tools/appearance-build-webkit-reftests.py new file mode 100755 index 0000000000..010635dddc --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/tools/appearance-build-webkit-reftests.py @@ -0,0 +1,28 @@ +#!/usr/bin/env python3 +import os +import re + +re_testname = re.compile(r"^appearance-.+\d\d\d\.html$") +re_link_match = re.compile(r'<link rel="(mis)?match"') + +files = {} + +parentdir = os.path.abspath(os.path.join(__file__, os.pardir, os.pardir)) +assert parentdir.endswith('/css-ui') + +for filename in os.listdir(parentdir): + path = os.path.join(parentdir, filename) + if os.path.isfile(path) and re_testname.search(filename) and not filename in files: + with open(path, "r") as file: + files[filename] = file.read() + +warning = """<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +""" + +for filename, text in files.items(): + if re_link_match.search(text): + with open(os.path.join(parentdir, filename.replace("appearance-", "webkit-appearance-")), "w") as outfile: + outfile.write(warning + text.replace("appearance:", "-webkit-appearance:")) diff --git a/testing/web-platform/tests/css/css-ui/tools/build-compute-kind-widget-fallback-props.py b/testing/web-platform/tests/css/css-ui/tools/build-compute-kind-widget-fallback-props.py new file mode 100644 index 0000000000..baede8ee54 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/tools/build-compute-kind-widget-fallback-props.py @@ -0,0 +1,122 @@ +#!/usr/bin/env python3 +import os, shutil + +target_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) + "/compute-kind-widget-generated" + +props = [ + u"background-color", + u"border-top-color", + u"border-top-style", + u"border-top-width", + u"border-right-color", + u"border-right-style", + u"border-right-width", + u"border-bottom-color", + u"border-bottom-style", + u"border-bottom-width", + u"border-left-color", + u"border-left-style", + u"border-left-width", + u"border-block-start-color", + u"border-block-end-color", + u"border-inline-start-color", + u"border-inline-end-color", + u"border-block-start-style", + u"border-block-end-style", + u"border-inline-start-style", + u"border-inline-end-style", + u"border-block-start-width", + u"border-block-end-width", + u"border-inline-start-width", + u"border-inline-end-width", + u"background-image", + u"background-attachment", + u"background-position", + u"background-clip", + u"background-origin", + u"background-size", + u"border-image-source", + u"border-image-slice", + u"border-image-width", + u"border-image-outset", + u"border-image-repeat", + u"border-top-left-radius", + u"border-top-right-radius", + u"border-bottom-right-radius", + u"border-bottom-left-radius", + u"border-start-start-radius", + u"border-start-end-radius", + u"border-end-start-radius", + u"border-end-end-radius", +] + +els = [ + [u'link', u'<a id="link">a</a>'], + [u'button', u'<button id="button">button</button>'], + [u'input-button', u'<input id="button-input" type="button" value="input-button">'], + [u'input-submit', u'<input id="submit-input" type="submit" value="input-submit">'], + [u'input-reset', u'<input id="reset-input" type="reset" value="input-reset">'], + [u'input-text', u'<input id="text-input" type="text" value="input-text">'], + [u'input-search-text', u'<input id="search-text-input" type="search" value="input-search-text">'], + [u'input-search', u'<input id="search-input" type="search" value="input-search">'], + [u'range', u'<input id="range-input" type="range">'], + [u'checkbox-input', u'<input id="checkbox-input" type="checkbox">'], + [u'radio-input', u'<input id="radio-input" type="radio">'], + [u'color-input', u'<input id="color-input" type="color">'], + [u'textarea', u'<textarea id="textarea">textarea</textarea>'], + [u'select-listbox', u'<select multiple id="select-listbox"><option>select-listbox</option></select>'], + [u'select-dropdown-box', u'<select id="select-dropdown-box"><option>select-dropdown-box</option></select>'], + [u'select-menulist-button', u'<select id="select-menulist-button"><option>select-menulist-button</option></select>'], + [u'meter', u'<meter id="meter" value=0.5></meter>'], + [u'progress', u'<progress id="progress" value=0.5></progress>'], +] + +template = u"""<!-- DO NOT EDIT. This file has been generated. Source: + ./tools/build-compute-kind-widget-fallback-props.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: Compute kind of widget: {prop} disables native appearance for {el_id}</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#computing-kind-widget"> +<meta name="assert" content="appropriate widget is returned when authorProps includes {prop}."> +<link rel="match" href="../compute-kind-widget-fallback-{el_id}-ref.html"> +<style> + #container {{ width: 500px; }} + #container > #search-text-input {{ appearance: textfield; }} + #container > #select-menulist-button {{ appearance: none; appearance: menulist-button; }} +</style> + +<div id="container"> + {el_markup} +</div> + +<script> +// Set author-level CSS that matches UA style, but don't use the 'revert' value. +const elements = document.querySelectorAll('#container > *'); +const prop = "{prop}"; +for (const el of elements) {{ + el.style.setProperty(prop, getComputedStyle(el).getPropertyValue(prop)); +}} +</script> +""" + +# Generate tests + +# wipe target_dir +if os.path.isdir(target_dir): + shutil.rmtree(target_dir) + +def write_file(path, content): + path = os.path.join(target_dir, path) + os.makedirs(os.path.dirname(path), exist_ok=True) + file = open(os.path.join(target_dir, path), 'w') + file.write(content) + file.close() + +def generate_tests(prop, el_id, el_markup): + test = template.format(prop=prop, el_id=el_id, el_markup=el_markup) + write_file(f"kind-of-widget-fallback-{el_id}-{prop}-001.html", test) + +for prop in props: + for el_id, el_markup in els: + generate_tests(prop, el_id, el_markup) diff --git a/testing/web-platform/tests/css/css-ui/translucent-outline-ref.html b/testing/web-platform/tests/css/css-ui/translucent-outline-ref.html new file mode 100644 index 0000000000..383e256533 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/translucent-outline-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +There should be a square in uniform pale green color. +<div style="width: 100px; height: 100px; background: rgba(0, 128, 0, 0.5)"></div> diff --git a/testing/web-platform/tests/css/css-ui/translucent-outline.html b/testing/web-platform/tests/css/css-ui/translucent-outline.html new file mode 100644 index 0000000000..38109a56a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/translucent-outline.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Outline with translucent color, will-change:transform and negative-z index child</title> +<link rel="help" title="7.1. 'outline' property" href="http://www.w3.org/TR/css3-ui/#outline"> +<link rel="match" href="translucent-outline-ref.html"> +<style>div { will-change: transform; }</style> +There should be a square in uniform pale green color. +<div style="position: relative; top: 25px; left: 25px; + width: 50px; height: 50px; + outline: 25px solid rgba(0, 128, 0, 0.5); + background: rgba(0, 128, 0, 0.5)"> + <div style="position: absolute; width: 10px; height: 10px; z-index: -1"></div> +</div> diff --git a/testing/web-platform/tests/css/css-ui/user-select-001.html b/testing/web-platform/tests/css/css-ui/user-select-001.html new file mode 100644 index 0000000000..35febc38bb --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/user-select-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> + <meta charset="utf-8"> + <title>CSS Basic User Interface Test: Block children of a inline parent with "user-select:text" should be selectable even with a user-select: none ancestor</title> + <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> + <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> + <link rel="help" href="https://drafts.csswg.org/css-ui/#propdef-user-select"> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1743074"> + + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-actions.js"></script> + <script src='/resources/testdriver-vendor.js'></script> + + <style> + :root { + user-select: none; + } + </style> + + <span style="user-select: text"> + <div>Let's select this <b id="target">word</b></div> + </span> + + <script> + promise_test(async function() { + let target = document.getElementById("target"); + let actions = new test_driver.Actions(); + + // Simulate a double click to select a word. + await actions.pointerMove(5, 5, {origin: target}) + .pointerDown() + .pointerUp() + .pointerDown() + .pointerUp() + .send(); + assert_equals(window.getSelection().toString(), "word", + "The text 'word' should be selectable.") + }, "Select the text 'word'"); + </script> +</html> diff --git a/testing/web-platform/tests/css/css-ui/user-select-inheritance.html b/testing/web-platform/tests/css/css-ui/user-select-inheritance.html new file mode 100644 index 0000000000..38a57e0285 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/user-select-inheritance.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<title>Tests inheritance of CSS user-select property</title> +<link rel="author" title="Google LLC" href="https://www.google.com/"> +<link rel="help" href="https://w3c.github.io/csswg-drafts/css-ui/#content-selection"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="container">abc<div id="target">xyz</div>def</div> +<script> +const container = document.getElementById('container'); +const target = document.getElementById('target'); +function test_inheritance(value) { + const property = `user-select:${value}`; + test(() => { + container.setAttribute('style', property); + assert_equals(getComputedStyle(container).userSelect, value, + `${property} should be supported.`); + assert_equals(getComputedStyle(target).userSelect, 'auto', + `${property} should not be inherited.`); + }, `${property} should not be inherited.`); +} +test_inheritance('all'); +test_inheritance('auto'); +test_inheritance('contain'); +test_inheritance('none'); +test_inheritance('text'); +</script> diff --git a/testing/web-platform/tests/css/css-ui/user-select-none-in-editable.html b/testing/web-platform/tests/css/css-ui/user-select-none-in-editable.html new file mode 100644 index 0000000000..c8718dd14b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/user-select-none-in-editable.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<title>Test user-select: none in editable contexts</title> +<meta charset="utf-8"> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#valdef-user-select-none"> +<style> +.user-select-none { + -webkit-user-select: none; + user-select: none; +} +</style> +</head> +<body> +<div id="container"> +Manual step: +<ol> +<li>Move caret after "c"</li> +<li>Hit right arrow key twice</li> +<li>Caret should be after "Y"</li> +</ol> +<div id="outer" contenteditable="true"> +abc<span id="inner" class="user-select-none">XYZ</span>def +</div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +setup({ single_test: true }); +const selection = window.getSelection(); +selection.collapse(document.getElementById("outer"), 1); +selection.modify("move", "forward", "character"); +selection.modify("move", "forward", "character"); +assert_equals(selection.focusNode, document.getElementById("inner").firstChild); +assert_equals(selection.focusOffset, 2); +done(); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/user-select-none-on-input.html b/testing/web-platform/tests/css/css-ui/user-select-none-on-input.html new file mode 100644 index 0000000000..42186dd620 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/user-select-none-on-input.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> + <title>Test user-select: none on input/textarea does not affect editability</title> + <meta charset="utf-8"> + <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> + <link rel="help" href="https://drafts.csswg.org/css-ui/#valdef-user-select-none"> + <style> + input, textarea { + -webkit-user-select: none; + user-select: none; + } + </style> +</head> +<body> + <input> + <textarea></textarea> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/resources/testdriver.js"></script> + <script src="/resources/testdriver-vendor.js"></script> + <script> + async function testElement(element) { + const expectedText = "xyz"; + element.focus(); + await test_driver.send_keys(element, expectedText); + assert_equals(element.value, expectedText, "Text should be entered"); + element.select(); + assert_equals(element.value.substring(element.selectionStart, element.selectionEnd), expectedText, "Text should be programatically selectable"); + await test_driver.send_keys(element, "\uE003"); + assert_equals(element.value, "", "Text should be cleared"); + } + promise_test(() => { + return testElement(document.querySelector("input")) + }, "Test <input> with user-select: none"); + promise_test(() => { + return testElement(document.querySelector("textarea")) + }, "Test <textarea> with user-select: none"); + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-001.html new file mode 100644 index 0000000000..fb0261b020 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: auto</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="auto is supported."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: auto; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-input-non-widget-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-input-non-widget-001.html new file mode 100644 index 0000000000..5f5ddde393 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-auto-input-non-widget-001.html @@ -0,0 +1,16 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: auto on non-widget input elements</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="The default widget type for these elements is none."> +<link rel="match" href="appearance-auto-input-non-widget-001-ref.html"> +<style> +input { -webkit-appearance: auto; } +</style> +<input type="hidden" value="abc"> +<input type="image" value="def"> +<input type="file"> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-button-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-button-001.html new file mode 100644 index 0000000000..cf36b42384 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-button-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="button is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-checkbox-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-checkbox-001.html new file mode 100644 index 0000000000..09dd3d76cd --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-checkbox-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: checkbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="checkbox is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: checkbox; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-listbox-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-listbox-001.html new file mode 100644 index 0000000000..2a33758e2b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-listbox-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: listbox</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="listbox is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: listbox; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-001.html new file mode 100644 index 0000000000..b9826c4bd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: menulist</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="menulist is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: menulist; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-button-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-button-001.html new file mode 100644 index 0000000000..ba4016a495 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-button-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: menulist-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="menulist-button is an alias to auto except on drop-down select."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > *:not(#drop-down-select) { -webkit-appearance: none; -webkit-appearance: menulist-button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select id="drop-down-select"><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-button-002.tentative.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-button-002.tentative.html new file mode 100644 index 0000000000..9fccd82713 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-menulist-button-002.tentative.html @@ -0,0 +1,44 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: menulist-button on drop-down select</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="menulist-button is NOT an alias to auto on drop-down select."> +<link rel="mismatch" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > #drop-down-select { -webkit-appearance: none; -webkit-appearance: menulist-button; } +</style> +<!-- + Test marked as tentative since although css-ui says: + + For drop-down box select elements, the element is rendered as a drop-down + box, including a "drop-down button", but not necessarily using a native + control of the host operating system. For such elements, CSS properties + such as color, background-color, and border (that can be disregarded for + auto) should not be disregarded. + + there is no requirement that this rendering is any different from the + automatic widget appearance of a drop-down select. + --> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select id="drop-down-select"><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-meter-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-meter-001.html new file mode 100644 index 0000000000..05fb5ce25f --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-meter-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: meter</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="meter is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: meter; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-parsing.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-parsing.html new file mode 100644 index 0000000000..0f08eab222 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-parsing.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Parsing of `-webkit-appearance`</title> + <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> +test(function() { + var input = document.createElement('input'); + input.setAttribute('style', '-webkit-appearance: none;'); + + assert_equals(input.style.getPropertyValue('appearance'), 'none'); +}, 'parsing via attribute change steps of CSS declaration block\'s owner node'); + +test(function() { + var input = document.createElement('input'); + input.style.cssText = '-webkit-appearance: none;'; + + assert_equals(input.style.getPropertyValue('appearance'), 'none'); +}, 'parsing via modification of cssText'); + +test(function(t) { + var style = document.createElement('style'); + style.appendChild( + document.createTextNode('#foo { -webkit-appearance: none; }') + ); + document.body.appendChild(style); + t.add_cleanup(function() { + document.body.removeChild(style); + }); + + assert_equals(style.sheet.cssRules.length, 1); + assert_equals( + style.sheet.cssRules[0].style.getPropertyValue('appearance'), + 'none' + ); +}, 'parsing via creation of CSS declaration block'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-progress-bar-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-progress-bar-001.html new file mode 100644 index 0000000000..b989502902 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-progress-bar-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: progress-bar</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="progress-bar is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: progress-bar; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-progress-bar-002.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-progress-bar-002.html new file mode 100644 index 0000000000..5394836b75 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-progress-bar-002.html @@ -0,0 +1,20 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!doctype html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: progress dynamic appearance</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<link rel="match" href="appearance-progress-bar-002-ref.html"> +<style> + #progress1 { -webkit-appearance: none } + #progress2 { -webkit-appearance: auto } +</style> +<progress id="progress1" value="0.5"> +<progress id="progress2" value="0.5"> +<script> + document.body.offsetTop; + progress1.style.appearance = "auto"; + progress2.style.appearance = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-property.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-property.html new file mode 100644 index 0000000000..fb3f7df2d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-property.html @@ -0,0 +1,128 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Property references to `-webkit-appearance`</title> + <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> +function create(initialValue) { + var style = document.createElement('input').style; + + style.setProperty('appearance', initialValue); + + return style; +} + +test(function() { + var style = create(''); + + style.setProperty('-webkit-appearance', 'none'); + + assert_equals(style.appearance, 'none'); +}, 'setProperty - CSS property name'); + +test(function() { + var style = create(''); + + style.setProperty('WebkitAppearance', 'none'); + + assert_equals(style.appearance, ''); +}, 'setProperty - camel-cased property name (ignored)'); + +test(function() { + var style = create(''); + + style.setProperty('webkitAppearance', 'none'); + + assert_equals(style.appearance, ''); +}, 'setProperty - webkit-cased property name (ignored)'); + +test(function() { + var style = create('none'); + + style.removeProperty('-webkit-appearance'); + + assert_equals(style.appearance, ''); +}, 'removeProperty - CSS property name'); + +test(function() { + var style = create('none'); + + style.removeProperty('WebkitAppearance'); + + assert_equals(style.appearance, 'none'); +}, 'removeProperty - camel-cased property name (ignored)'); + +test(function() { + var style = create('none'); + + style.removeProperty('webkitAppearance'); + + assert_equals(style.appearance, 'none'); +}, 'removeProperty - webkit-cased property name (ignored)'); + +test(function() { + var style = create(''); + + style['-webkit-appearance'] = 'none'; + + assert_equals(style.appearance, 'none'); +}, 'property assignment - CSS property name'); + +test(function() { + var style = create(''); + + style['WebkitAppearance'] = 'none'; + + assert_equals(style.appearance, 'none'); +}, 'property assignment - camel-cased property name'); + +test(function() { + var style = create(''); + + style['webkitAppearance'] = 'none'; + + assert_equals(style.appearance, 'none'); +}, 'property assignment - webkit-cased property name'); + +test(function() { + var style = create('none'); + + assert_equals(style.getPropertyValue('-webkit-appearance'), 'none'); +}, 'getPropertyValue - CSS property name'); + +test(function() { + var style = create('none'); + + assert_equals(style.getPropertyValue('WebkitAppearance'), ''); +}, 'getPropertyValue - camel-cased property name (ignored)'); + +test(function() { + var style = create('none'); + + assert_equals(style.getPropertyValue('webkitAppearance'), ''); +}, 'getPropertyValue - webkit-cased property name (ignored)'); + +test(function() { + var style = create('none'); + + assert_equals(style['-webkit-appearance'], 'none'); +}, 'property access - CSS property name'); + +test(function() { + var style = create('none'); + + assert_equals(style['WebkitAppearance'], 'none'); +}, 'property access - camel-cased property name'); + +test(function() { + var style = create('none'); + + assert_equals(style['webkitAppearance'], 'none'); +}, 'property access - webkit-cased property name'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-push-button-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-push-button-001.html new file mode 100644 index 0000000000..6f44498d46 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-push-button-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: push-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="push-button is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: push-button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-radio-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-radio-001.html new file mode 100644 index 0000000000..52d9fb22ac --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-radio-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: radio</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="radio is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: radio; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-searchfield-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-searchfield-001.html new file mode 100644 index 0000000000..8abd91e3c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-searchfield-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: searchfield</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="searchfield is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: searchfield; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-serialization.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-serialization.html new file mode 100644 index 0000000000..b325fd5d6c --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-serialization.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Serialization of `-webkit-appearance`</title> + <link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> +</head> +<body> +<script> +test(function() { + var input = document.createElement('input'); + input.style.setProperty('-webkit-appearance', 'none'); + + assert_equals(input.style.cssText, 'appearance: none;'); +}, 'serialization via CSSStyleDeclaration'); + +test(function(t) { + var style = document.createElement('style'); + document.body.appendChild(style); + t.add_cleanup(function() { + document.body.removeChild(style); + }); + style.sheet.insertRule('#foo {}', 0); + style.sheet.cssRules[0].style.setProperty('-webkit-appearance', 'none'); + + assert_equals( + style.sheet.cssRules[0].cssText, '#foo { appearance: none; }' + ); +}, 'serialization via CSSStyleRule'); + +test(function(t) { + var style = document.createElement('style'); + document.body.appendChild(style); + t.add_cleanup(function() { + document.body.removeChild(style); + }); + style.sheet.insertRule('@media print { #foo {} }', 0); + style.sheet.cssRules[0].cssRules[0].style.setProperty('-webkit-appearance', 'none'); + + assert_equals( + style.sheet.cssRules[0].cssText, + '@media print {\n #foo { appearance: none; }\n}' + ); +}, 'serialization via CSSMediaRule'); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-slider-horizontal-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-slider-horizontal-001.html new file mode 100644 index 0000000000..a9375b5088 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-slider-horizontal-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: slider-horizontal</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="slider-horizontal is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: slider-horizontal; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-square-button-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-square-button-001.html new file mode 100644 index 0000000000..f486329943 --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-square-button-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: square-button</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="square-button is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: square-button; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-textarea-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-textarea-001.html new file mode 100644 index 0000000000..cf3a15f4db --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-textarea-001.html @@ -0,0 +1,32 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: textarea</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="textarea is an alias to auto."> +<link rel="match" href="appearance-auto-ref.html"> +<style> + #container { width: 500px; } + #container > * { -webkit-appearance: none; -webkit-appearance: textarea; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> diff --git a/testing/web-platform/tests/css/css-ui/webkit-appearance-textfield-001.html b/testing/web-platform/tests/css/css-ui/webkit-appearance-textfield-001.html new file mode 100644 index 0000000000..058e1be83b --- /dev/null +++ b/testing/web-platform/tests/css/css-ui/webkit-appearance-textfield-001.html @@ -0,0 +1,36 @@ +<!-- DO NOT EDIT THIS FILE. +Edit the appearance-* file instead and then run: + ./tools/appearance-build-webkit-reftests.py +--> +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Basic User Interface Test: -webkit-appearance: textfield</title> +<link rel="help" href="https://drafts.csswg.org/css-ui-4/#appearance-switching"> +<meta name="assert" content="textfield is an alias to auto except on input type=search."> +<link rel="match" href="appearance-textfield-001-ref.html"> +<style> + #container { width: 500px; } + /* + * If the value being tested is not supported, then 'none' is used instead, + * which is intended to fail the test. + */ + #container > * { -webkit-appearance: none; -webkit-appearance: textfield; } +</style> +<div id="container"> + <a>a</a> + <button>button</button> + <input type="text" value="input-text"> + <input type="search" value="input-search"> + <textarea>textarea</textarea> + <input type="button" value="input-button"> + <input type="submit" value="input-submit"> + <input type="reset" value="input-reset"> + <input type="range"> + <input type="checkbox"> + <input type="radio"> + <input type="color"> + <select><option>select</option></select> + <select multiple><option>select-multiple</option></select> + <meter value=0.5></meter> + <progress value=0.5></progress> +</div> |
