1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<title>CSS Animations Test: Parse tests for keyframe selectors</title>
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
<link rel="help" href="https://drafts.csswg.org/scroll-animations-1/#typedef-timeline-range-name">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id="test_sheet">
</style>
<script>
function isValidKeyFrameSelector(selector_text) {
let sheet = test_sheet.sheet;
sheet.insertRule(`@keyframes --foo { ${selector_text} {} }`);
let keyframe_rule = sheet.cssRules[0].cssRules[0];
sheet.deleteRule(0);
return keyframe_rule != undefined;
}
function test_valid_keyframe_selector(selector_text) {
test(() => {
assert_true(isValidKeyFrameSelector(selector_text));
}, `'${selector_text}' should be a valid keyframe selector`);
}
function test_invalid_keyframe_selector(selector_text) {
test(() => {
assert_false(isValidKeyFrameSelector(selector_text));
}, `'${selector_text}' should not be a valid keyframe selector`);
}
test_valid_keyframe_selector("0%");
test_valid_keyframe_selector("10%");
test_valid_keyframe_selector("100%");
test_valid_keyframe_selector("from");
test_valid_keyframe_selector("to");
test_valid_keyframe_selector("entry 10%");
test_valid_keyframe_selector("exit 60%");
test_invalid_keyframe_selector("-10%");
test_invalid_keyframe_selector("120%");
test_invalid_keyframe_selector("calc(10%)");
test_invalid_keyframe_selector("calc(10% * sibling-index())");
test_invalid_keyframe_selector("calc(10% * sign(1em - 1px))");
test_invalid_keyframe_selector("entry calc(10%)");
test_invalid_keyframe_selector("exit calc(60%)");
</script>
|
