Skip to content

Commit 0132c62

Browse files
cdumezcdumez
authored
Add test coverage for :in-range and :out-of-range pseudo-classes for time inputs with reversed ranges (#58841)
This is upstreaming from the following WebKit bug fix: - https://commits.webkit.org/310156@main
1 parent fddd06a commit 0132c62

1 file changed

Lines changed: 53 additions & 0 deletions

File tree

‎html/semantics/selectors/pseudo-classes/inrange-outofrange-time-reversed.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
<title>Selector: pseudo-classes (:in-range, :out-of-range) with reversed time ranges</title>
4+
<link rel="help" href="https://html.spec.whatwg.org/multipage/#selector-in-range">
5+
<link rel="help" href="https://html.spec.whatwg.org/multipage/#selector-out-of-range">
6+
<link rel="help" href="https://html.spec.whatwg.org/multipage/input.html#has-a-reversed-range">
7+
<script src="/resources/testharness.js"></script>
8+
<script src="/resources/testharnessreport.js"></script>
9+
<script src="utils.js"></script>
10+
<div id="log"></div>
11+
12+
<!-- Reversed range: min="21:00" max="03:00" wraps around midnight.
13+
Valid values: >= 21:00:00 OR <= 03:00:00
14+
Out-of-range values: > 03:00:00 AND < 21:00:00 (the gap) -->
15+
16+
<!-- In range: value is after min, before midnight -->
17+
<input type="time" min="21:00:00" max="03:00:00" value="22:00:00" id="time-after-min">
18+
<!-- In range: value is after midnight, before max -->
19+
<input type="time" min="21:00:00" max="03:00:00" value="02:00:00" id="time-before-max">
20+
<!-- In range: value is exactly at min -->
21+
<input type="time" min="21:00:00" max="03:00:00" value="21:00:00" id="time-at-min">
22+
<!-- In range: value is exactly at max -->
23+
<input type="time" min="21:00:00" max="03:00:00" value="03:00:00" id="time-at-max">
24+
<!-- Out of range: value is in the gap -->
25+
<input type="time" min="21:00:00" max="03:00:00" value="12:00:00" id="time-in-gap">
26+
<!-- Out of range: value is just past max -->
27+
<input type="time" min="21:00:00" max="03:00:00" value="04:00:00" id="time-past-max">
28+
<!-- Out of range: value is just before min -->
29+
<input type="time" min="21:00:00" max="03:00:00" value="20:00:00" id="time-before-min">
30+
31+
<script>
32+
testSelectorIdsMatch(":in-range",
33+
["time-after-min", "time-before-max", "time-at-min", "time-at-max"],
34+
"':in-range' matches time inputs whose value is within a reversed range (>= min OR <= max)");
35+
36+
testSelectorIdsMatch(":out-of-range",
37+
["time-in-gap", "time-past-max", "time-before-min"],
38+
"':out-of-range' matches time inputs whose value is in the gap of a reversed range (> max AND < min)");
39+
40+
// Dynamic update: move an in-range value into the gap.
41+
document.getElementById("time-after-min").value = "12:00:00";
42+
test(function() {
43+
assert_false(document.getElementById("time-after-min").matches(":in-range"));
44+
assert_true(document.getElementById("time-after-min").matches(":out-of-range"));
45+
}, "Dynamic update from in-range to out-of-range in a reversed time range");
46+
47+
// Dynamic update: move an out-of-range value into the valid range.
48+
document.getElementById("time-in-gap").value = "23:00:00";
49+
test(function() {
50+
assert_true(document.getElementById("time-in-gap").matches(":in-range"));
51+
assert_false(document.getElementById("time-in-gap").matches(":out-of-range"));
52+
}, "Dynamic update from out-of-range to in-range in a reversed time range");
53+
</script>

0 commit comments

Comments
 (0)