Skip to content

Commit ffcd104

Browse files
ericwilligersCommit bot
authored and
Commit bot
committed
CSS Motion Path: Web Platform tests for longhand parsing
We introduce web platform tests for parsing of - offset-position - offset-path - offset-distance - offset-rotate - offset-anchor The unshipped properties offset-position and offset-anchor currently fail a test because we have not yet updated position parsing for a recent CSS Values spec change (see http://crbug.com/717833). offset-rotate currently fails a test because we parse 0 as an angle. This was correct (but leads to shorthand parsing ambiguities) until w3c/csswg-drafts#1162 offset-path fails some tests because we don't yet support url or basic-shape || geometry-box shapes. BUG=722757 Review-Url: https://codereview.chromium.org/2886703002 Cr-Commit-Position: refs/heads/master@{#474881}
1 parent ab4ae0f commit ffcd104

20 files changed

+324
-7
lines changed

third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-ray-ref.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: ray paths</title>
5-
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@google.com">
5+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
66
<style>
77
#target {
88
position: absolute;

third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-ray.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: ray paths</title>
5-
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@google.com">
5+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
66
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
77
<link rel="match" href="offset-path-ray-ref.html">
88
<meta name="assert" content="This tests that ray() generates a rotation and translation.">

third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-string-ref.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: path(string) paths</title>
5-
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@google.com">
5+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
66
<style>
77
#target {
88
position: absolute;

third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-path-string.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: path(string) paths</title>
5-
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@google.com">
5+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
66
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
77
<link rel="match" href="offset-path-string-ref.html">
88
<meta name="assert" content="This tests that path(<string>) generates a rotation and translation.">

third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-rotate-001.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: offset-rotate</title>
5-
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@google.com">
5+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
66
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
77
<link rel="match" href="offset-rotate-ref.html">
88
<meta name="assert" content="This tests offset-rotate auto">

third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-rotate-002.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: offset-rotate</title>
5-
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@google.com">
5+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
66
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
77
<link rel="match" href="offset-rotate-ref.html">
88
<meta name="assert" content="This tests offset-rotate reverse <angle>">

third_party/WebKit/LayoutTests/external/wpt/css/motion-1/offset-rotate-ref.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: offset-rotate</title>
5-
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@google.com">
5+
<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org">
66
<style>
77
#target {
88
position: absolute;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-anchor with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
8+
<meta name="assert" content="offset-anchor supports only the grammar 'auto | <position>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("offset-anchor", "none");
16+
test_invalid_value("offset-anchor", "30deg");
17+
test_invalid_value("offset-anchor", "left 10% top");
18+
</script>
19+
</body>
20+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-anchor with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-anchor-property">
8+
<meta name="assert" content="offset-anchor supports the full grammar 'auto | <position>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("offset-anchor", "auto");
16+
17+
test_valid_value("offset-anchor", "left bottom");
18+
test_valid_value("offset-anchor", "center center");
19+
test_valid_value("offset-anchor", "right center");
20+
test_valid_value("offset-anchor", "center top");
21+
test_valid_value("offset-anchor", "center bottom");
22+
test_valid_value("offset-anchor", "calc(10px + 20%) center");
23+
test_valid_value("offset-anchor", "right 30em");
24+
test_valid_value("offset-anchor", "10px 20%");
25+
test_valid_value("offset-anchor", "left -10px top -20%");
26+
test_valid_value("offset-anchor", "right 10% bottom 20em");
27+
</script>
28+
</body>
29+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-distance with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
8+
<meta name="assert" content="offset-distance supports only the grammar '<length-percentage>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("offset-distance", "none");
16+
test_invalid_value("offset-distance", "30deg");
17+
</script>
18+
</body>
19+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-distance with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-distance-property">
8+
<meta name="assert" content="offset-distance supports the full grammar '<length-percentage>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("offset-distance", "10px");
16+
test_valid_value("offset-distance", "20%");
17+
test_valid_value("offset-distance", "calc(30px + 40%)");
18+
test_valid_value("offset-distance", "0", "0px");
19+
</script>
20+
</body>
21+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-path with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
8+
<meta name="assert" content="offset-path supports only the grammar from the spec.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
// arc path segments must have at least 7 arguments.
16+
// https://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands
17+
test_invalid_value("offset-path", "path('M 20 30 A 60 70 80')");
18+
19+
test_invalid_value("offset-path", "ray(0 sides)");
20+
test_invalid_value("offset-path", "ray(0deg)");
21+
test_invalid_value("offset-path", "ray(closest-side)");
22+
test_invalid_value("offset-path", "ray(closest-side 0deg closest-side)");
23+
test_invalid_value("offset-path", "ray(0deg closest-side 0deg)");
24+
test_invalid_value("offset-path", "ray(contain 0deg closest-side contain)");
25+
26+
</script>
27+
</body>
28+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
This is a testharness.js-based test.
2+
PASS e.style['offset-path'] = "none" should set the property value
3+
PASS Serialization should round-trip after setting e.style['offset-path'] = "none"
4+
PASS e.style['offset-path'] = "ray(0rad closest-side)" should set the property value
5+
PASS Serialization should round-trip after setting e.style['offset-path'] = "ray(0rad closest-side)"
6+
PASS e.style['offset-path'] = "ray(0.25turn closest-corner contain)" should set the property value
7+
PASS Serialization should round-trip after setting e.style['offset-path'] = "ray(0.25turn closest-corner contain)"
8+
PASS e.style['offset-path'] = "ray(200grad farthest-side)" should set the property value
9+
PASS Serialization should round-trip after setting e.style['offset-path'] = "ray(200grad farthest-side)"
10+
PASS e.style['offset-path'] = "ray(270deg farthest-corner contain)" should set the property value
11+
PASS Serialization should round-trip after setting e.style['offset-path'] = "ray(270deg farthest-corner contain)"
12+
PASS e.style['offset-path'] = "ray(-720deg sides)" should set the property value
13+
PASS Serialization should round-trip after setting e.style['offset-path'] = "ray(-720deg sides)"
14+
PASS e.style['offset-path'] = "ray(calc(180deg - 45deg) farthest-side)" should set the property value
15+
PASS Serialization should round-trip after setting e.style['offset-path'] = "ray(calc(180deg - 45deg) farthest-side)"
16+
PASS e.style['offset-path'] = "path('m 0 0 h -100')" should set the property value
17+
PASS Serialization should round-trip after setting e.style['offset-path'] = "path('m 0 0 h -100')"
18+
PASS e.style['offset-path'] = "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z')" should set the property value
19+
PASS Serialization should round-trip after setting e.style['offset-path'] = "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z')"
20+
FAIL e.style['offset-path'] = "url(\"http://www.example.com/index.html#polyline1\")" should set the property value assert_not_equals: got disallowed value ""
21+
FAIL Serialization should round-trip after setting e.style['offset-path'] = "url(\"http://www.example.com/index.html#polyline1\")" assert_equals: expected "url(\"http://www.example.com/index.html#polyline1\")" but got ""
22+
FAIL e.style['offset-path'] = "circle(100px)" should set the property value assert_not_equals: got disallowed value ""
23+
FAIL Serialization should round-trip after setting e.style['offset-path'] = "circle(100px)" assert_equals: expected "circle(100px)" but got ""
24+
FAIL e.style['offset-path'] = "margin-box" should set the property value assert_not_equals: got disallowed value ""
25+
FAIL Serialization should round-trip after setting e.style['offset-path'] = "margin-box" assert_equals: expected "margin-box" but got ""
26+
FAIL e.style['offset-path'] = "inset(10% 20% 30% 40%) border-box" should set the property value assert_not_equals: got disallowed value ""
27+
FAIL Serialization should round-trip after setting e.style['offset-path'] = "inset(10% 20% 30% 40%) border-box" assert_equals: expected "inset(10% 20% 30% 40%) border-box" but got ""
28+
FAIL e.style['offset-path'] = "fill-box ellipse(50% 60%)" should set the property value assert_not_equals: got disallowed value ""
29+
FAIL Serialization should round-trip after setting e.style['offset-path'] = "fill-box ellipse(50% 60%)" assert_equals: expected "ellipse(50% 60%) fill-box" but got ""
30+
Harness: the test ran to completion.
31+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-path with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-path-property">
8+
<meta name="assert" content="offset-path supports the full grammar from the spec.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("offset-path", "none");
16+
17+
test_valid_value("offset-path", "ray(0rad closest-side)");
18+
test_valid_value("offset-path", "ray(0.25turn closest-corner contain)");
19+
test_valid_value("offset-path", "ray(200grad farthest-side)");
20+
test_valid_value("offset-path", "ray(270deg farthest-corner contain)");
21+
test_valid_value("offset-path", "ray(-720deg sides)");
22+
test_valid_value("offset-path", "ray(calc(180deg - 45deg) farthest-side)", "ray(calc(135deg) farthest-side)");
23+
24+
test_valid_value("offset-path", "path('m 0 0 h -100')");
25+
test_valid_value("offset-path", "path('M 0 0 L 100 100 M 100 200 L 200 200 Z L 300 300 Z')");
26+
27+
test_valid_value("offset-path", 'url("http://www.example.com/index.html#polyline1")');
28+
29+
test_valid_value("offset-path", "circle(100px)");
30+
test_valid_value("offset-path", "margin-box");
31+
test_valid_value("offset-path", "inset(10% 20% 30% 40%) border-box");
32+
test_valid_value("offset-path", "fill-box ellipse(50% 60%)", "ellipse(50% 60%) fill-box");
33+
</script>
34+
</body>
35+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-position with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
8+
<meta name="assert" content="offset-position supports only the grammar 'auto | <position>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("offset-position", "none");
16+
test_invalid_value("offset-position", "30deg");
17+
test_invalid_value("offset-position", "left 10% top");
18+
</script>
19+
</body>
20+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-position with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-position-property">
8+
<meta name="assert" content="offset-position supports the full grammar 'auto | <position>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("offset-position", "auto");
16+
17+
test_valid_value("offset-position", "left bottom");
18+
test_valid_value("offset-position", "center center");
19+
test_valid_value("offset-position", "right center");
20+
test_valid_value("offset-position", "center top");
21+
test_valid_value("offset-position", "center bottom");
22+
test_valid_value("offset-position", "calc(10px + 20%) center");
23+
test_valid_value("offset-position", "right 30em");
24+
test_valid_value("offset-position", "10px 20%");
25+
test_valid_value("offset-position", "left -10px top -20%");
26+
test_valid_value("offset-position", "right 10% bottom 20em");
27+
</script>
28+
</body>
29+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
This is a testharness.js-based test.
2+
PASS e.style['offset-rotate'] = "none" should not set the property value
3+
FAIL e.style['offset-rotate'] = "0" should not set the property value assert_equals: expected "" but got "0deg"
4+
PASS e.style['offset-rotate'] = "auto reverse" should not set the property value
5+
PASS e.style['offset-rotate'] = "reverse 30deg auto" should not set the property value
6+
Harness: the test ran to completion.
7+
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-rotate with invalid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
8+
<meta name="assert" content="offset-rotate supports only the grammar '[ auto | reverse ] || <angle>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_invalid_value("offset-rotate", "none");
16+
test_invalid_value("offset-rotate", "0");
17+
test_invalid_value("offset-rotate", "auto reverse");
18+
test_invalid_value("offset-rotate", "reverse 30deg auto");
19+
</script>
20+
</body>
21+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-rotate with valid values</title>
6+
<link rel="author" title="Eric Willigers" href="mailto:[email protected]">
7+
<link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property">
8+
<meta name="assert" content="offset-rotate supports the full grammar '[ auto | reverse ] || <angle>'.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="resources/parsing-testcommon.js"></script>
12+
</head>
13+
<body>
14+
<script>
15+
test_valid_value("offset-rotate", "auto");
16+
test_valid_value("offset-rotate", "reverse");
17+
test_valid_value("offset-rotate", "-400deg");
18+
test_valid_value("offset-rotate", "auto 5turn");
19+
test_valid_value("offset-rotate", "reverse 0rad");
20+
test_valid_value("offset-rotate", "5turn auto", "auto 5turn");
21+
test_valid_value("offset-rotate", "0rad reverse", "reverse 0rad");
22+
</script>
23+
</body>
24+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use strict';
2+
3+
function test_valid_value(property, value, serializedValue) {
4+
if (arguments.length < 3)
5+
serializedValue = value;
6+
7+
var stringifiedValue = JSON.stringify(value);
8+
9+
test(function(){
10+
var div = document.createElement('div');
11+
div.style[property] = value;
12+
assert_not_equals(div.style[property], "");
13+
}, "e.style['" + property + "'] = " + stringifiedValue + " should set the property value");
14+
15+
test(function(){
16+
var div = document.createElement('div');
17+
div.style[property] = value;
18+
var readValue = div.style[property];
19+
assert_equals(readValue, serializedValue);
20+
div.style[property] = readValue;
21+
assert_equals(div.style[property], readValue);
22+
}, "Serialization should round-trip after setting e.style['" + property + "'] = " + stringifiedValue);
23+
}
24+
25+
function test_invalid_value(property, value) {
26+
var stringifiedValue = JSON.stringify(value);
27+
28+
test(function(){
29+
var div = document.createElement('div');
30+
div.style[property] = value;
31+
assert_equals(div.style[property], "");
32+
}, "e.style['" + property + "'] = " + stringifiedValue + " should not set the property value");
33+
}

0 commit comments

Comments
 (0)