input-type-change.html | Explore in Territory

<html>
<head>
<script src="../../resources/js-test.js"></script>
</head>
<body onload="change()">
<p>Test the changing of an input type=TEXT to type=IMAGE, and vice versa. This test is to make sure that
the height and width attributes are used for only IMAGE type.</p>
<div id=console></div>
<form id=parent>
<input id="text" type="text" src="resources/apple.gif" height="17" width="19">
<input id="image" type="image" src="resources/apple.gif" height="17" width="19">
</form>
<script>
window.jsTestIsAsync = true;
var text = document.getElementById('text');
var image = document.getElementById('image');

function change() {
    debug('Check metrics before the change:');
    shouldBeFalse('text.offsetWidth == 19');
    shouldBeFalse('text.offsetHeight == 17');
    shouldBe('image.offsetWidth', '19');
    shouldBe('image.offsetHeight', '17');

    text.type = 'image';
    image.type = 'text';
    debug('Check metrics after the change:');
    shouldBe('text.offsetWidth', '19');
    shouldBe('text.offsetHeight', '17');
    shouldBeFalse('image.offsetWidth == 19');
    shouldBeFalse('image.offsetHeight == 17');

    document.body.removeChild(document.getElementById('parent'));
    finishJSTest();
}
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/input-type-change.html
