Skip to content

GitLab

T
tangled
Commit e524522f authored by Eric Willigers's avatar Eric Willigers Committed by Commit Bot
Browse files
Options

CSS: Test computed values for CSS Motion path properties 

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/+/1794943Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#695109}
parent 39a5bc67
Hide whitespace changes
Inline Side-by-side
Showing with 155 additions and 0 deletions
third_party/blink/web_tests/external/wpt/css/motion/parsing/offset-anchor-computed.html 0 → 100644
View file @ e524522f
<!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>
third_party/blink/web_tests/external/wpt/css/motion/parsing/offset-distance-computed.html 0 → 100644
View file @ e524522f
<!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>
third_party/blink/web_tests/external/wpt/css/motion/parsing/offset-path-computed-expected.txt 0 → 100644
View file @ e524522f
This is a testharness.js-based test.
PASS Property offset-path value 'none' computes to 'none'
PASS Property offset-path value 'ray(0rad closest-side)' computes to 'ray(0deg closest-side)'
PASS Property offset-path value 'ray(0.25turn closest-corner contain)' computes to 'ray(90deg closest-corner contain)'
PASS Property offset-path value 'ray(200grad farthest-side)' computes to 'ray(180deg farthest-side)'
PASS Property offset-path value 'ray(270deg farthest-corner contain)' computes to 'ray(270deg farthest-corner contain)'
PASS Property offset-path value 'ray(-720deg sides)' computes to 'ray(-720deg sides)'
FAIL Property offset-path value 'ray(calc(180deg - 45deg) farthest-side)' computes to 'ray(calc(135deg) farthest-side)' assert_equals: expected "ray(calc(135deg) farthest-side)" but got "ray(135deg farthest-side)"
PASS Property offset-path value 'path("m 20 0 h -100")' computes to 'path("M 20 0 H -80")'
PASS Property offset-path value 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")' computes to 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z")'
PASS Property offset-path value 'path("m 10 20 q 30 60 40 50 q 100 70 90 80")' computes to 'path("M 10 20 Q 40 80 50 70 Q 150 140 140 150")'
PASS Property offset-path value 'path("M 0 0 L 100 100 m 0 100 l 100 0 Z l 160 20 Z")' computes to 'path("M 0 0 L 100 100 M 100 200 L 200 200 Z L 260 220 Z")'
PASS Property offset-path value 'path("m 10 20 l 20 30 Z l 50 60 Z m 70 80 l 90 60 Z t 70 120")' computes to 'path("M 10 20 L 30 50 Z L 60 80 Z M 80 100 L 170 160 Z T 150 220")'
PASS Property offset-path value 'path("m 10 170 h 90 v 30 m 0 0 s 1 2 3 4 z c 9 8 7 6 5 4")' computes to 'path("M 10 170 H 100 V 200 M 100 200 S 101 202 103 204 Z C 109 208 107 206 105 204")'
PASS Property offset-path value 'path("m 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50")' computes to 'path("M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120")'
Harness: the test ran to completion.
third_party/blink/web_tests/external/wpt/css/motion/parsing/offset-path-computed.html 0 → 100644
View file @ e524522f
<!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>
third_party/blink/web_tests/external/wpt/css/motion/parsing/offset-position-computed.html 0 → 100644
View file @ e524522f
<!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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment