<!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>
