<!DOCTYPE html>
<body>
<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/common-pseudo-classes.js"></script>

<div id="container">
<input type="time" value="12:34:00" id="enabled">
<input type="time" value="12:34:00" id="disabled" disabled>
<input type="time" value="12:34:00" min="11:00:00" step="3600" id="invalid">
<input type="time" value="12:34:00" min="12:00:00" max="13:00:00" id="inrange">
<input type="time" value="ABC" min="12:00:00" max="13:00:00" id="badvalue">
<input type="time" value="12:34:00" min="13:00:00" max="14:00:00" id="outofrange">
<input type="time" value="12:34:56" readonly id="readonly">
<input type="time" value="12:34:56" required id="required">
</div>

<script>
description('Test if an input field matches to various pseudo classes');
var container = document.getElementById('container');
shouldBeTrue('matchedNodesContainId(container, ":enabled", "enabled")');
shouldBeTrue('matchedNodesContainId(container, ":valid", "enabled")');
shouldBeTrue('matchedNodesContainId(container, ":optional", "enabled")');
shouldBeTrue('matchedNodesContainId(container, ":read-write", "enabled")');
shouldBeTrue('matchedNodesContainId(container, ":disabled", "disabled")');
shouldBeTrue('matchedNodesContainId(container, ":invalid", "invalid")');
shouldBeTrue('matchedNodesContainId(container, ":in-range", "inrange")');
shouldBeTrue('matchedNodesContainId(container, ":in-range", "badvalue")');
shouldBeTrue('matchedNodesContainId(container, ":out-of-range", "outofrange")');
shouldBeTrue('matchedNodesContainId(container, ":read-only", "readonly")');
shouldBeTrue('matchedNodesContainId(container, ":required", "required")');
// Make the id=outofrange element in-range state.
document.getElementById('outofrange').value = '13:34:00';
shouldBeFalse('matchedNodesContainId(container, ":out-of-range", "outofrange")');
shouldBeTrue('matchedNodesContainId(container, ":in-range", "outofrange")');
// Make the id=inrange element out-of-range state.
document.getElementById('inrange').value = '13:34:00';
shouldBeFalse('matchedNodesContainId(container, ":in-range", "inrange")');
shouldBeTrue('matchedNodesContainId(container, ":out-of-range", "inrange")');
container.remove();
</script>
<script src="../../../resources/js-test-post.js"></script>
</body>