Skip to content

Commit

Permalink
[scroll-animations] Add parsing for timeline-scope property
Browse files Browse the repository at this point in the history
There is consensus to add a new property, which we think will be
called timeline-scope.

w3c/csswg-drafts#7759

Bug: 1425939
Change-Id: I30ff7652ea970346b241f8bd2b48474c89479fe4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4533096
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Reviewed-by: Kevin Ellis <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1144835}
  • Loading branch information
andruud authored and chromium-wpt-export-bot committed May 16, 2023
1 parent 0d3e62f commit 25eb850
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 0 deletions.
35 changes: 35 additions & 0 deletions scroll-animations/css/timeline-scope-computed.tentative.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7759">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<style>
#outer { timeline-scope: foo; }
#target { timeline-scope: bar; }
</style>
<div id="outer">
<div id="target"></div>
</div>
<script>
test_computed_value('timeline-scope', 'initial', 'none');
test_computed_value('timeline-scope', 'inherit', 'foo');
test_computed_value('timeline-scope', 'unset', 'none');
test_computed_value('timeline-scope', 'revert', 'none');
test_computed_value('timeline-scope', 'none');
test_computed_value('timeline-scope', 'test');
test_computed_value('timeline-scope', 'foo, bar');
test_computed_value('timeline-scope', 'bar, foo');
test_computed_value('timeline-scope', 'a, b, c, D, e');

test(() => {
let style = getComputedStyle(document.getElementById('target'));
assert_not_equals(Array.from(style).indexOf('timeline-scope'), -1);
}, 'The timeline-scope property shows up in CSSStyleDeclaration enumeration');

test(() => {
let style = document.getElementById('target').style;
assert_not_equals(style.cssText.indexOf('timeline-scope'), -1);
}, 'The timeline-scope property shows up in CSSStyleDeclaration.cssText');

</script>
29 changes: 29 additions & 0 deletions scroll-animations/css/timeline-scope-parsing.tentative.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7759">
<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>

test_valid_value('timeline-scope', 'initial');
test_valid_value('timeline-scope', 'inherit');
test_valid_value('timeline-scope', 'unset');
test_valid_value('timeline-scope', 'revert');

test_valid_value('timeline-scope', 'none');
test_valid_value('timeline-scope', 'abc');
test_valid_value('timeline-scope', ' abc', 'abc');
test_valid_value('timeline-scope', 'aBc');
test_valid_value('timeline-scope', 'foo, bar');
test_valid_value('timeline-scope', 'bar, foo');
test_valid_value('timeline-scope', 'auto');

test_invalid_value('timeline-scope', 'none, abc');
test_invalid_value('timeline-scope', '10px');
test_invalid_value('timeline-scope', 'foo bar');
test_invalid_value('timeline-scope', '"foo" "bar"');
test_invalid_value('timeline-scope', 'rgb(1, 2, 3)');
test_invalid_value('timeline-scope', '#fefefe');

</script>

0 comments on commit 25eb850

Please sign in to comment.