Skip to content

Commit

Permalink
CSS: Test computed values for CSS Motion path properties
Browse files Browse the repository at this point in the history 
offset-distance is a computed length-percentage.
offset-anchor and offset-position are each a computed position
(i.e. a pair of computed length-percentage).

offset-path has absolute path commands.

https://drafts.fxtf.org/motion-1/#property-index

Change-Id: Ic63904ec78c09214a9feb5ff02d6f6f43ae8d420
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1794943
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#695109}
  • Loading branch information
@ericwilligers @chromium-wpt-export-bot
ericwilligers authored and chromium-wpt-export-bot committed Sep 10, 2019
1 parent 4b106c8 commit b84a53c
Show file tree
Hide file tree
Showing 4 changed files with 138 additions and 0 deletions.
37 changes: 37 additions & 0 deletions css/motion/parsing/offset-anchor-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Path Module Level 1: getComputedStyle().offsetAnchor</title>
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
<meta name="assert" content="offset-anchor is 'auto' or a computed position.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("offset-anchor", "auto");

test_computed_value("offset-anchor", "left bottom", "0% 100%");
test_computed_value("offset-anchor", "center center", "50% 50%");
test_computed_value("offset-anchor", "right center", "100% 50%");
test_computed_value("offset-anchor", "center top", "50% 0%");
test_computed_value("offset-anchor", "center bottom", "50% 100%");
test_computed_value("offset-anchor", "calc(20% - 5em) center", "calc(20% - 200px) 50%");
test_computed_value("offset-anchor", "right 4em", "100% 160px");
test_computed_value("offset-anchor", "10px 20%");
test_computed_value("offset-anchor", "left -10px top -20%", "-10px -20%");
test_computed_value("offset-anchor", "right 10% bottom 20em", "90% calc(100% - 800px)");
test_computed_value("offset-anchor", "top 10px right -20%", "120% 10px");
test_computed_value("offset-anchor", "left 10% bottom 20em", "10% calc(100% - 800px)");
test_computed_value('offset-anchor', 'calc(10px - 0.5em) calc(10px + 0.5em)', '-10px 30px');
</script>
</body>
</html>
29 changes: 29 additions & 0 deletions css/motion/parsing/offset-distance-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Path Module Level 1: getComputedStyle().offsetDistance</title>
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
<meta name="assert" content="offset-distance is a computed '<length-percentage>'.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("offset-distance", "10px");
test_computed_value("offset-distance", "20%");
test_computed_value("offset-distance", "calc(40% - 30px)");
test_computed_value("offset-distance", "0", "0px");
test_computed_value('offset-distance', 'calc(10px - 0.5em)', '-10px');
test_computed_value('offset-distance', 'calc(10px + 0.5em)', '30px');
</script>
</body>
</html>
35 changes: 35 additions & 0 deletions css/motion/parsing/offset-path-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Path Module Level 1: getComputedStyle().offsetPath</title>
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
<meta name="assert" content="offset-path has absolute path commands.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("offset-path", "none");

test_computed_value("offset-path", "ray(0rad closest-side)", "ray(0deg closest-side)");
test_computed_value("offset-path", "ray(0.25turn closest-corner contain)", "ray(90deg closest-corner contain)");
test_computed_value("offset-path", "ray(200grad farthest-side)", "ray(180deg farthest-side)");
test_computed_value("offset-path", "ray(270deg farthest-corner contain)");
test_computed_value("offset-path", "ray(-720deg sides)");
test_computed_value("offset-path", "ray(calc(180deg - 45deg) farthest-side)", "ray(calc(135deg) farthest-side)");

test_computed_value("offset-path", 'path("m 20 0 h -100")', 'path("M 20 0 H -80")');
test_computed_value("offset-path", 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")');
test_computed_value("offset-path", 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")', 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")');
test_computed_value("offset-path", 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")', 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z")');
test_computed_value("offset-path", 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")', 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")');
test_computed_value("offset-path", 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")', 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")');
test_computed_value("offset-path", 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")', 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")');

// url, shape and geometry-box paths are not yet supported by implementations.
</script>
</body>
</html>
37 changes: 37 additions & 0 deletions css/motion/parsing/offset-position-computed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Motion Path Module Level 1: getComputedStyle().offsetPosition</title>
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
<meta name="assert" content="offset-position is 'auto' or a computed position.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/computed-testcommon.js"></script>
<style>
#target {
font-size: 40px;
}
</style>
</head>
<body>
<div id="target"></div>
<script>
test_computed_value("offset-position", "auto");

test_computed_value("offset-position", "left bottom", "0% 100%");
test_computed_value("offset-position", "center center", "50% 50%");
test_computed_value("offset-position", "right center", "100% 50%");
test_computed_value("offset-position", "center top", "50% 0%");
test_computed_value("offset-position", "center bottom", "50% 100%");
test_computed_value("offset-position", "calc(5em + 20%) center", "calc(20% + 200px) 50%");
test_computed_value("offset-position", "right 3em", "100% 120px");
test_computed_value("offset-position", "10px 20%");
test_computed_value("offset-position", "left -10px top -20%", "-10px -20%");
test_computed_value("offset-position", "right 10% bottom 5em", "90% calc(100% - 200px)");
test_computed_value("offset-position", "top 10px right -20%", "120% 10px");
test_computed_value("offset-position", "left 10% bottom 2em", "10% calc(100% - 80px)");
test_computed_value('offset-position', 'calc(10px - 0.5em) calc(10px + 0.5em)', '-10px 30px');
</script>
</body>
</html>

0 comments on commit b84a53c

Please sign in to comment.