| <!DOCTYPE html> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/parsing-testcommon.js"></script> |
| <div id="target"></div> |
| <script> |
| |
| // Runs a function while a stylesheet is temporarily inserted into the |
| // document. |
| function with_stylesheet(text, func) { |
| let s = document.createElement('style'); |
| try { |
| s.textContent = text; |
| document.documentElement.append(s); |
| func(s.sheet.rules); |
| } finally { |
| s.remove(); |
| } |
| } |
| |
| // Runs a test while a stylesheet is temporarily inserted into the |
| // document. |
| function test_stylesheet(text, func, description) { |
| test(() => { |
| with_stylesheet(text, func); |
| }, description); |
| } |
| |
| function test_valid_rule(text, description) { |
| test_stylesheet(text, (rules) => { |
| assert_equals(rules.length, 1); |
| assert_equals(rules[0].constructor.name, 'CSSScrollTimelineRule'); |
| }, description); |
| } |
| |
| function test_invalid_rule(text, description) { |
| test_stylesheet(text, (rules) => { |
| assert_equals(rules.length, 0); |
| }, description); |
| } |
| |
| // Verify that for the _specifed_ value for a given _descriptor_, the _expected_ |
| // string can be observed via the equivalent attribute on CSSScrollTimelineRule. |
| function test_descriptor(descriptor, specified, expected) { |
| if (typeof(expected) == 'undefined') |
| expected = specified; |
| let attribute = descriptor.replaceAll(/\-./g, x => x[1].toUpperCase()); |
| test_stylesheet(`@scroll-timeline test { ${descriptor}:${specified}; }`, (rules) => { |
| assert_equals(rules.length, 1); |
| assert_equals(rules[0].constructor.name, 'CSSScrollTimelineRule'); |
| assert_equals(rules[0][attribute], expected); |
| }, `CSSScrollTimelineRule.${attribute} ${specified}`); |
| } |
| |
| test_valid_rule('@scroll-timeline foo {}', 'Empty block'); |
| test_valid_rule('@scroll-timeline foo {', 'EOF ends block'); |
| test_valid_rule('@scroll-timeline "foo" {}', 'Timeline name can be a <string>'); |
| |
| test_invalid_rule('@scroll-timeline', 'Missing prelude'); |
| test_invalid_rule('@scroll-timeline foo', 'Missing block'); |
| test_invalid_rule('@scroll-timeline {}', 'Missing timeline name'); |
| test_invalid_rule('@scroll-timeline 123 {}', 'Timeline name must be an identifier'); |
| test_invalid_rule('@scroll-timeline none {}', 'Timeline name must match <custom-ident>'); |
| test_invalid_rule('@scroll-timeline NONE {}', 'Timeline name must match <custom-ident> (caps)'); |
| test_invalid_rule('@scroll-timeline NoNe {}', 'Timeline name must match <custom-ident> (mixed)'); |
| test_invalid_rule('@scroll-timeline initial {}', 'Timeline name may not be initial'); |
| test_invalid_rule('@scroll-timeline inherit {}', 'Timeline name may not be inherit'); |
| test_invalid_rule('@scroll-timeline unset {}', 'Timeline name may not be unset'); |
| test_invalid_rule('@scroll-timeline revert {}', 'Timeline name may not be revert'); |
| test_invalid_rule('@scroll-timeline default {}', 'Timeline name may not be default'); |
| test_invalid_rule('@scroll-timeline foo bar {}', 'Extra timeline name'); |
| |
| // CSSRule.type |
| |
| test(() => { |
| with_stylesheet(`@scroll-timeline valid { }`, (rules) => { |
| assert_equals(rules.length, 1); |
| let rule = rules[0]; |
| assert_equals(rule.constructor.name, 'CSSScrollTimelineRule'); |
| assert_equals(rule.type, 0); |
| }); |
| }, 'CSSRule.type returns 0'); |
| |
| // CSSScrollTimelineRule.name |
| |
| function test_name(specified, expected) { |
| if (typeof(expected) == 'undefined') |
| expected = specified; |
| test_stylesheet(`@scroll-timeline ${specified} { }`, (rules) => { |
| assert_equals(rules.length, 1); |
| assert_equals(rules[0].constructor.name, 'CSSScrollTimelineRule'); |
| assert_equals(rules[0].name, expected); |
| }, `CSSScrollTimelineRule.name ${specified}`); |
| } |
| |
| test_name('foo'); |
| test_name('Foo'); |
| test_name('f___123'); |
| test_name('a\\9 b', 'a\tb'); // U+0009 CHARACTER TABULATION |
| test_name('"foo"', 'foo'); |
| test_name('"none"', 'none'); |
| |
| // CSSScrollTimelineRule.source |
| |
| function test_source(specified, expected) { |
| test_descriptor('source', specified, expected); |
| } |
| |
| test_source('selector(#foo)'); |
| test_source('selector( #foo )', 'selector(#foo)'); |
| test_source(' selector(#foo) ', 'selector(#foo)'); |
| test_source('none'); |
| test_source(' none ', 'none'); |
| test_source('selector(#a\\9 b)'); |
| |
| test_source('#foo', 'none'); |
| test_source('', 'none'); |
| test_source('element(#foo)', 'none'); |
| test_source('selector(#foo more)', 'none'); |
| test_source('selector(html)', 'none'); |
| test_source('selector(foo)', 'none'); |
| test_source('selector(:before)', 'none'); |
| test_source('selector(*)', 'none'); |
| test_source('selector(.a)', 'none'); |
| test_source('selector(.a, .b)', 'none'); |
| |
| // CSSScrollTimelineRule.orientation |
| |
| function test_orientation(specified, expected) { |
| test_descriptor('orientation', specified, expected); |
| } |
| |
| test_orientation('auto'); |
| test_orientation('block'); |
| test_orientation('inline'); |
| test_orientation('horizontal'); |
| test_orientation('vertical'); |
| test_orientation(' vertical ', 'vertical'); |
| |
| test_orientation('', 'auto'); |
| test_orientation('foo', 'auto'); |
| test_orientation('10px', 'auto'); |
| test_orientation('red', 'auto'); |
| |
| // CSSScrollTimelineRule.start |
| // CSSScrollTimelineRule.end |
| |
| function test_offsets(specified, expected) { |
| test_descriptor('start', specified, expected); |
| test_descriptor('end', specified, expected); |
| } |
| |
| test_offsets('auto'); |
| test_offsets(' auto ', 'auto'); |
| test_offsets('10px',); |
| test_offsets(' 10px ', '10px'); |
| test_offsets('10em'); |
| test_offsets('10%'); |
| test_offsets('calc(1px + 1%)'); |
| |
| test_offsets('', 'auto'); |
| test_offsets('red', 'auto'); |
| test_offsets('#fff', 'auto'); |
| test_offsets('unset', 'auto'); |
| test_offsets('selector(#foo)', 'auto'); |
| |
| // CSSScrollTimelineRule.timeRange |
| |
| function test_scroll_time_range(specified, expected) { |
| test_descriptor('time-range', specified, expected); |
| } |
| |
| test_scroll_time_range('auto'); |
| test_scroll_time_range(' auto ', 'auto'); |
| test_scroll_time_range('1s'); |
| test_scroll_time_range(' 1s ', '1s'); |
| test_scroll_time_range('1000ms'); |
| |
| test_scroll_time_range('', 'auto'); |
| test_scroll_time_range('red', 'auto'); |
| test_scroll_time_range('#fff', 'auto'); |
| test_scroll_time_range('unset', 'auto'); |
| |
| </script> |