Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(60)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/css3/motion-path/offset.html

Issue 2368013002: [WIP] CSS Motion Path: offset shorthand ready for position and anchor
Patch Set: code review feedback Created 4 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/css-parser/offset-parsing.html ('k') | third_party/WebKit/Source/core/css/CSSProperties.in » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../resources/testharness.js"></script> 2 <script src="../../resources/testharness.js"></script>
5 <script src="../../resources/testharnessreport.js"></script> 3 <script src="../../resources/testharnessreport.js"></script>
6 <style> 4 <div id="container"></div>
7 #div2 {
8 offset: none 50% auto 400grad;
9 }
10 #div3 {
11 offset: path('M 10 20 h 30 v 150') 70px 0rad;
12 }
13 #div4 {
14 offset: none 10px 90deg reverse;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="div1"></div>
20 <div id="div2"></div>
21 <div id="div3"></div>
22 <div id="div4"></div>
23 <span id="span1" style="offset: path('M 1 2 V 3') 4px 5deg"></span>
24 <script> 5 <script>
25 "use strict"; 6 "use strict";
26 7
8 var counter = 0;
9 var container = document.getElementById('container');
10
11 function computedStyleFromDefault() {
12 var div = document.createElement('div');
13 container.appendChild(div);
14
15 return getComputedStyle(div, null);
16 }
17
18 function computedStyleFromRule(offset) {
19 var id = 't' + counter++;
20 var style = document.createElement('style');
21 style.innerHTML = '#' + id + ' { offset: ' + offset + '; }';
22 container.appendChild(style);
23
24 var div = document.createElement('div');
25 div.id = id;
26 container.appendChild(div);
27
28 return getComputedStyle(div, null);
29 }
30
31 function styleFromInline(offset) {
32 var div = document.createElement('div');
33 div.style = 'offset: ' + offset + ';';
34 container.appendChild(div);
35
36 return div.style;
37 }
38
27 test(function() { 39 test(function() {
28 assert_equals(getComputedStyle(div1, null).offsetPath, 'none'); 40 var computedStyle = computedStyleFromDefault();
29 assert_equals(getComputedStyle(div1, null).offsetDistance, '0px'); 41 assert_equals(computedStyle.offsetPath, 'none');
30 assert_equals(getComputedStyle(div1, null).offsetRotation, 'auto 0deg'); 42 assert_equals(computedStyle.offsetDistance, '0px');
31 assert_equals(getComputedStyle(div1, null).offset, 'none 0px auto 0deg'); 43 assert_equals(computedStyle.offsetRotation, 'auto 0deg');
32 assert_equals(getComputedStyle(div1, null).transform, 'none'); 44 assert_equals(computedStyle.offset, 'none 0px auto 0deg');
45 assert_equals(computedStyle.transform, 'none');
33 }, 'offset default is none 0px auto 0deg'); 46 }, 'offset default is none 0px auto 0deg');
34 47
35 test(function() { 48 test(function() {
36 assert_equals(getComputedStyle(div2, null).offsetPath, 'none'); 49 var computedStyle = computedStyleFromRule("none 50% auto 400grad");
37 assert_equals(getComputedStyle(div2, null).offsetDistance, '50%'); 50 assert_equals(computedStyle.offsetPath, 'none');
38 assert_equals(getComputedStyle(div2, null).offsetRotation, 'auto 360deg'); 51 assert_equals(computedStyle.offsetDistance, '50%');
39 assert_equals(getComputedStyle(div2, null).offset, 'none 50% auto 360deg'); 52 assert_equals(computedStyle.offsetRotation, 'auto 360deg');
40 assert_equals(getComputedStyle(div2, null).transform, 'none'); 53 assert_equals(computedStyle.offset, 'none 50% auto 360deg');
54 assert_equals(computedStyle.transform, 'none');
41 }, 'offset supports various angle units'); 55 }, 'offset supports various angle units');
42 56
43 test(function() { 57 test(function() {
44 assert_equals(getComputedStyle(div3, null).offsetPath, "path('M 10 20 h 30 v 150')"); 58 var computedStyle = computedStyleFromRule("path('M 10 20 h 30 v 150') 70px 0 rad");
45 assert_equals(getComputedStyle(div3, null).offsetDistance, '70px'); 59 assert_equals(computedStyle.offsetPath, "path('M 10 20 h 30 v 150')");
46 assert_equals(getComputedStyle(div3, null).offsetRotation, '0deg'); 60 assert_equals(computedStyle.offsetDistance, '70px');
47 assert_equals(getComputedStyle(div3, null).offset, "path('M 10 20 h 30 v 150 ') 70px 0deg"); 61 assert_equals(computedStyle.offsetRotation, '0deg');
48 assert_equals(getComputedStyle(div3, null).transform, 'matrix(1, 0, 0, 1, 0, 0)'); 62 assert_equals(computedStyle.offset, "path('M 10 20 h 30 v 150') 70px 0deg");
63 assert_equals(computedStyle.transform, 'matrix(1, 0, 0, 1, 0, 0)');
49 }, 'offset supports SVG path data'); 64 }, 'offset supports SVG path data');
50 65
51 test(function() { 66 test(function() {
52 assert_equals(getComputedStyle(div4, null).offsetPath, 'none'); 67 var computedStyle = computedStyleFromRule("none 90deg reverse 10px");
53 assert_equals(getComputedStyle(div4, null).offsetDistance, '10px'); 68 assert_equals(computedStyle.offsetPath, 'none');
54 assert_equals(getComputedStyle(div4, null).offsetRotation, 'auto 270deg'); 69 assert_equals(computedStyle.offsetDistance, '10px');
55 assert_equals(getComputedStyle(div4, null).offset, 'none 10px auto 270deg'); 70 assert_equals(computedStyle.offsetRotation, 'auto 270deg');
56 assert_equals(getComputedStyle(div4, null).transform, 'none'); 71 assert_equals(computedStyle.offset, 'none 10px auto 270deg');
57 }, 'offset property data can be supplied in any order'); 72 assert_equals(computedStyle.transform, 'none');
73 }, 'offset rotation can be supplied before distance');
58 74
59 test(function() { 75 test(function() {
60 assert_equals(span1.style.offsetPath, "path('M 1 2 V 3')"); 76 var computedStyle = computedStyleFromRule("none");
61 assert_equals(span1.style.offsetDistance, '4px'); 77 assert_equals(computedStyle.offsetPath, 'none');
62 assert_equals(span1.style.offsetRotation, '5deg'); 78 assert_equals(computedStyle.offsetDistance, '0px');
63 assert_equals(span1.style.offset, "path('M 1 2 V 3') 4px 5deg"); 79 assert_equals(computedStyle.offsetRotation, 'auto 0deg');
64 assert_equals(span1.style.transform, ''); 80 assert_equals(computedStyle.offset, 'none 0px auto 0deg');
81 assert_equals(computedStyle.transform, 'none');
82 }, 'offset property can be path only');
83
84 test(function() {
85 var computedStyle = computedStyleFromRule("70px 80px");
86 assert_equals(computedStyle.offsetPosition, '70px 80px');
87 assert_equals(computedStyle.offsetPath, 'none');
88 assert_equals(computedStyle.offsetDistance, '0px');
89 assert_equals(computedStyle.offsetRotation, 'auto 0deg');
90 assert_equals(computedStyle.offsetAnchor, '50% 50%');
91 assert_equals(computedStyle.offset, '70px 80px none 0px auto 0deg');
92 assert_equals(computedStyle.transform, 'none');
93 }, 'offset property can be position only');
94
95 test(function() {
96 var computedStyle = computedStyleFromRule("top right / auto");
97 assert_equals(computedStyle.offsetPosition, '100% 0%');
98 assert_equals(computedStyle.offsetPath, 'none');
99 assert_equals(computedStyle.offsetDistance, '0px');
100 assert_equals(computedStyle.offsetRotation, 'auto 0deg');
101 assert_equals(computedStyle.offsetAnchor, 'auto');
102 assert_equals(computedStyle.offset, '100% 0% none 0px auto 0deg / auto');
103 assert_equals(computedStyle.transform, 'none');
104 }, 'offset property can have position and anchor');
105
106 test(function() {
107 var computedStyle = computedStyleFromRule("right 60deg");
108 assert_equals(computedStyle.offsetPosition, '100% 50%');
109 assert_equals(computedStyle.offsetPath, 'none');
110 assert_equals(computedStyle.offsetDistance, '0px');
111 assert_equals(computedStyle.offsetRotation, '60deg');
112 assert_equals(computedStyle.offsetAnchor, '50% 50%');
113 assert_equals(computedStyle.offset, '100% 50% none 0px 60deg');
114 assert_equals(computedStyle.transform, 'none');
115 }, 'offset can be position and rotation');
116
117 test(function() {
118 var style = styleFromInline("path('M 1 2 V 3') 4px 400grad auto");
119 assert_equals(style.offsetPath, "path('M 1 2 V 3')");
120 assert_equals(style.offsetDistance, '4px');
121 assert_equals(style.offsetRotation, 'auto 400grad');
122 assert_equals(style.offset, "path('M 1 2 V 3') 4px auto 400grad");
123 assert_equals(style.transform, '');
65 }, 'offset style can be set inline'); 124 }, 'offset style can be set inline');
66 125
126 test(function() {
127 var style = styleFromInline("path('M 1 2 V 3') 50%");
128 assert_equals(style.offsetPath, "path('M 1 2 V 3')");
129 assert_equals(style.offsetDistance, '50%');
130 assert_equals(style.offsetRotation, 'auto');
131 assert_equals(style.offsetAnchor, '50% 50%');
132 assert_equals(style.offset, "path('M 1 2 V 3') 50% auto");
133 assert_equals(style.transform, '');
134 }, 'offset style set inline can have path and distance');
135
136 test(function() {
137 var style = styleFromInline("bottom path('M 1 2 V 3') 10% 400grad / left");
138 assert_equals(style.offsetPosition, "center bottom");
139 assert_equals(style.offsetPath, "path('M 1 2 V 3')");
140 assert_equals(style.offsetDistance, '10%');
141 assert_equals(style.offsetRotation, '400grad');
142 assert_equals(style.offsetAnchor, 'left center');
143 assert_equals(style.offset, "center bottom path('M 1 2 V 3') 10% 400grad/lef t center");
144 assert_equals(style.transform, '');
145 }, 'offset style set inline can have position and anchor');
67 </script> 146 </script>
68 </body>
69 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/css-parser/offset-parsing.html ('k') | third_party/WebKit/Source/core/css/CSSProperties.in » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698