mirror of
https://github.com/servo/servo.git
synced 2025-07-03 05:23:38 +01:00
180 lines
6.1 KiB
HTML
180 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/dom.html#the-directionality">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
</head>
|
|
<body>
|
|
<script>
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'tel';
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'foo');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'rtl');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'RTL');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'ltr');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'LTR');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'auto');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.value = '\u05EA';
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'AUTO');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.removeAttribute('dir');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
}, 'input element whose type attribute is in the telephone state');
|
|
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = 'tel';
|
|
|
|
const container = document.createElement('div');
|
|
container.setAttribute('dir', 'rtl');
|
|
container.appendChild(input);
|
|
|
|
// Insert the element into the document so that we can also check for
|
|
// 'direction' in computed style.
|
|
document.body.appendChild(container);
|
|
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
// Per https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering:
|
|
assert_equals(getComputedStyle(input).direction, 'ltr');
|
|
|
|
// Changing to a different type causes the special type=tel rule to no longer apply.
|
|
input.type = 'text';
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
assert_equals(getComputedStyle(input).direction, 'rtl');
|
|
|
|
// And restoring type=tel brings back that behavior.
|
|
input.type = 'tel';
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
assert_equals(getComputedStyle(input).direction, 'ltr');
|
|
|
|
document.body.removeChild(container);
|
|
}, 'input element whose type attribute is in the telephone state in a RTL block');
|
|
|
|
for (let type of ['text', 'search', 'url', 'email']) {
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = type;
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'foo');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'rtl');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'RTL');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'ltr');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'LTR');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'auto');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.value = '\u05EA';
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'AUTO');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'))
|
|
|
|
input.removeAttribute('dir');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
}, `input element whose type attribute is in the ${type} state`);
|
|
}
|
|
|
|
for (let type of ['password', 'date', 'time', 'number', 'range', 'color',
|
|
'checkbox', 'radio', 'submit', 'image', 'reset', 'button']) {
|
|
test(() => {
|
|
const input = document.createElement('input');
|
|
input.type = type;
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'foo');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'rtl');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'RTL');
|
|
assert_false(input.matches(':dir(ltr)'));
|
|
assert_true(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'ltr');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'LTR');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'auto');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.value = '\u05EA';
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
|
|
input.setAttribute('dir', 'AUTO');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'))
|
|
|
|
input.removeAttribute('dir');
|
|
assert_true(input.matches(':dir(ltr)'));
|
|
assert_false(input.matches(':dir(rtl)'));
|
|
}, `input element whose type attribute is in the ${type} state`);
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|