Skip to content

Commit 1059c16

Browse files
ericwilligersjeffcarp
ericwilligers
authored and
jeffcarp
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 a793f5d commit 1059c16

18 files changed

+286
-7
lines changed

‎css/motion-1/offset-path-ray-ref.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: ray pathstitle>
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;

‎css/motion-1/offset-path-ray.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: ray pathstitle>
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.">

‎css/motion-1/offset-path-string-ref.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: path(string) pathstitle>
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;

‎css/motion-1/offset-path-string.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: path(string) pathstitle>
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() generates a rotation and translation.">

‎css/motion-1/offset-rotate-001.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: offset-rotatetitle>
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">

‎css/motion-1/offset-rotate-002.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: offset-rotatetitle>
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 ">

‎css/motion-1/offset-rotate-ref.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<title>CSS Motion Path: offset-rotatetitle>
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;

‎css/motion-1/parsing/offset-anchor-parsing-invalid.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-anchor with invalid valuestitle>
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 | '.">
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>

‎css/motion-1/parsing/offset-anchor-parsing-valid.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-anchor with valid valuestitle>
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 | '.">
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>

‎css/motion-1/parsing/offset-distance-parsing-invalid.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-distance with invalid valuestitle>
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 ''.">
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>

‎css/motion-1/parsing/offset-distance-parsing-valid.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-distance with valid valuestitle>
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 ''.">
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>

‎css/motion-1/parsing/offset-path-parsing-invalid.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-path with invalid valuestitle>
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>

‎css/motion-1/parsing/offset-path-parsing-valid.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-path with valid valuestitle>
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>

‎css/motion-1/parsing/offset-position-parsing-invalid.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-position with invalid valuestitle>
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 | '.">
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>

‎css/motion-1/parsing/offset-position-parsing-valid.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-position with valid valuestitle>
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 | '.">
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>

‎css/motion-1/parsing/offset-rotate-parsing-invalid.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-rotate with invalid valuestitle>
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 ] || '.">
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>

‎css/motion-1/parsing/offset-rotate-parsing-valid.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Motion Path Module Level 1: parsing offset-rotate with valid valuestitle>
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 ] || '.">
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>

‎css/motion-1/parsing/resources/parsing-testcommon.js

Lines changed: 33 additions & 0 deletions
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)