<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<script>
description("Change multiple fields time input UI layout by value");
var testInput = document.createElement("input");
testInput.setAttribute("type", "time");
testInput.setAttribute("step", "60");
testInput.setAttribute("value", "12:34:56");
document.body.appendChild(testInput);
var widthOfStep60 = testInput.offsetWidth;

testInput.value = "12:34:56.789";
var widthWithMillisecond = testInput.offsetWidth;
shouldBeTrue('widthOfStep60 < widthWithMillisecond');

testInput.value = "12:34:56";
var widthWithSecond = testInput.offsetWidth;
shouldBeTrue('widthOfStep60 == widthWithSecond');

document.body.removeChild(testInput);
</script>
</body>
</html>