Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/selectors/dir-pseudo-on-input-element.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<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)'));
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 (const type of ['password', 'text', 'search', 'url', 'email', 'submit', 'reset', 'button', 'hidden']) {
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`);
}
test(() => {
const input = document.createElement('input');
input.type = 'text';
// bidirectional character type R
input.value = '\u05EA';
input.setAttribute('dir', 'auto');
const container = document.createElement('div');
container.appendChild(input);
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
// Changing to a different type that does't use value causes the bidi rule to no longer apply.
input.type = 'radio';
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
// And restoring type=text brings back that behavior.
input.type = 'text';
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
}, 'dynamic changes to type of input elements affect whether value is used for dir=auto');
for (const type of ['date', 'time', 'number', 'range', 'color', 'checkbox', 'radio', 'image']) {
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)'));
let rtlParent = document.createElement("div");
rtlParent.dir = "rtl";
input.dir = "auto";
rtlParent.appendChild(input);
document.body.appendChild(rtlParent); // Just for good measure.
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
rtlParent.remove();
}, `input element whose type attribute is in the ${type} state`);
}
</script>
</html>