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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2247773004: [WIP] CSS Motion Path: offset-anchor and offset-position Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: offsetAnchor Created 4 years, 3 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/css3/motion-path/motion-rotation-overflow-crash.html ('k') | third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script src="../../resources/testharness.js"></script>
5 <script src="../../resources/testharnessreport.js"></script>
6 <style>
7 #div2 {
8 offset: none 50% auto auto auto 400grad;
9 }
10 #div3 {
11 offset: path('M 10 20 h 30 v 150') 70px 10px 20px 30px 40px 0rad;
12 }
13 #div4 {
14 offset: none 10px 90deg reverse;
15 }
16 #div5 {
17 offset: path('m 0 0 h 20') 10px center center auto;
18 }
19 #div6 {
20 offset: path('m 0 0 h 20') 10px center 30% center auto;
21 }
22 #div7 {
23 offset: path('m 0 0 h 20') 10px left 30% bottom right auto;
24 }
25 #div8 {
26 offset: path('m 0 0 h 20') 10px left top 30% bottom auto;
27 }
28 #div9 {
29 offset: path('m 0 0 h 20') 10px left center 30% bottom auto;
30 }
31 #div10 {
32 offset: path('m 0 0 h 20') 10px left left auto;
33 }
34 #div11 {
35 offset: path('m 0 0 h 20') 10px bottom bottom auto;
36 }
37 #div12 {
38 offset: top 10%;
39 }
40 </style>
41 </head>
42 <body>
43 <div id="div1"></div>
44 <div id="div2"></div>
45 <div id="div3"></div>
46 <div id="div4"></div>
47 <div id="div5"></div>
48 <div id="div6"></div>
49 <div id="div7"></div>
50 <div id="div8"></div>
51 <div id="div9"></div>
52 <div id="div10"></div>
53 <div id="div11"></div>
54 <div id="div12"></div>
55 <span id="span1" style="offset: path('M 1 2 V 3') 4px 5deg"></span>
56 <span id="span2" style="offset: path('M 1 2 V 3') 4px left bottom right top 5deg "></span>
57 <span id="span3" style="offset: 30% bottom 20px"></span>
58 <script>
59 "use strict";
60
61 test(function() {
62 assert_equals(getComputedStyle(div1, null).offsetPath, 'none');
63 assert_equals(getComputedStyle(div1, null).offsetDistance, '0px');
64 assert_equals(getComputedStyle(div1, null).offsetRotation, 'auto 0deg');
65 assert_equals(getComputedStyle(div1, null).offset, 'none 0px auto auto auto 0deg');
66 assert_equals(getComputedStyle(div1, null).transform, 'none');
67 }, 'offset default is none 0px auto 0deg');
68
69 test(function() {
70 assert_equals(getComputedStyle(div2, null).offsetPath, 'none');
71 assert_equals(getComputedStyle(div2, null).offsetDistance, '50%');
72 assert_equals(getComputedStyle(div2, null).offsetRotation, 'auto 360deg');
73 assert_equals(getComputedStyle(div2, null).offset, 'none 50% auto auto auto 360deg');
74 assert_equals(getComputedStyle(div2, null).transform, 'none');
75 }, 'offset supports various angle units');
76
77 test(function() {
78 assert_equals(getComputedStyle(div3, null).offsetPath, "path('M 10 20 h 30 v 150')");
79 assert_equals(getComputedStyle(div3, null).offsetDistance, '70px');
80 assert_equals(getComputedStyle(div3, null).offsetPosition, '10px 20px');
81 assert_equals(getComputedStyle(div3, null).offsetAnchor, '30px 40px');
82 assert_equals(getComputedStyle(div3, null).offsetRotation, '0deg');
83 assert_equals(getComputedStyle(div3, null).offset, "path('M 10 20 h 30 v 150 ') 70px 10px 20px 30px 40px 0deg");
84 assert_equals(getComputedStyle(div3, null).transform, 'matrix(1, 0, 0, 1, 0, 0)');
85 }, 'offset supports SVG path data');
86
87 test(function() {
88 assert_equals(getComputedStyle(div4, null).offsetPath, 'none');
89 assert_equals(getComputedStyle(div4, null).offsetDistance, '10px');
90 assert_equals(getComputedStyle(div4, null).offsetRotation, 'auto 270deg');
91 assert_equals(getComputedStyle(div4, null).offset, 'none 10px auto auto auto 270deg');
92 assert_equals(getComputedStyle(div4, null).transform, 'none');
93 }, 'offset property data can be supplied in any order');
94
95 test(function() {
96 assert_equals(getComputedStyle(div5, null).offsetPosition, '50% 50%');
97 assert_equals(getComputedStyle(div5, null).offsetAnchor, 'auto');
98 assert_equals(getComputedStyle(div5, null).offsetRotation, 'auto 0deg');
99 assert_equals(getComputedStyle(div5, null).offset, "path('m 0 0 h 20') 10px 50% 50% auto auto 0deg");
100 }, 'offset position data can contain center');
101
102 test(function() {
103 assert_equals(getComputedStyle(div6, null).offsetPosition, '50% 30%');
104 assert_equals(getComputedStyle(div6, null).offsetAnchor, '50% 50%');
105 assert_equals(getComputedStyle(div6, null).offsetRotation, 'auto 0deg');
106 assert_equals(getComputedStyle(div6, null).offset, "path('m 0 0 h 20') 10px 50% 30% 50% 50% auto 0deg");
107 }, 'offset position data can contain center and length/percent');
108
109 test(function() {
110 assert_equals(getComputedStyle(div7, null).offsetPosition, '30% 100%');
111 assert_equals(getComputedStyle(div7, null).offsetAnchor, '100% 50%');
112 assert_equals(getComputedStyle(div7, null).offsetRotation, 'auto 0deg');
113 assert_equals(getComputedStyle(div7, null).offset, "path('m 0 0 h 20') 10px 30% 100% 100% 50% auto 0deg");
114 }, 'offset position data can contain edge and length/percent');
115
116 test(function() {
117 assert_equals(getComputedStyle(div8, null).offsetPosition, '0% 30%');
118 assert_equals(getComputedStyle(div8, null).offsetAnchor, '50% 100%');
119 assert_equals(getComputedStyle(div8, null).offsetRotation, 'auto 0deg');
120 assert_equals(getComputedStyle(div8, null).offset, "path('m 0 0 h 20') 10px 0% 30% 50% 100% auto 0deg");
121 }, 'offset position data can contain three values');
122
123 test(function() {
124 assert_equals(getComputedStyle(div9, null).offsetPosition, '0% 50%');
125 assert_equals(getComputedStyle(div9, null).offsetAnchor, '30% 100%');
126 assert_equals(getComputedStyle(div9, null).offsetRotation, 'auto 0deg');
127 assert_equals(getComputedStyle(div9, null).offset, "path('m 0 0 h 20') 10px 0% 50% 30% 100% auto 0deg");
128 }, 'offset anchor data can follow center');
129
130 test(function() {
131 assert_equals(getComputedStyle(div10, null).offsetPosition, '0% 50%');
132 assert_equals(getComputedStyle(div10, null).offsetAnchor, '0% 50%');
133 assert_equals(getComputedStyle(div10, null).offsetRotation, 'auto 0deg');
134 assert_equals(getComputedStyle(div10, null).offset, "path('m 0 0 h 20') 10px 0% 50% 0% 50% auto 0deg");
135 }, 'offset position and anchor data can be left');
136
137 test(function() {
138 assert_equals(getComputedStyle(div11, null).offsetPosition, '50% 100%');
139 assert_equals(getComputedStyle(div11, null).offsetAnchor, '50% 100%');
140 assert_equals(getComputedStyle(div11, null).offsetRotation, 'auto 0deg');
141 assert_equals(getComputedStyle(div11, null).offset, "path('m 0 0 h 20') 10px 50% 100% 50% 100% auto 0deg");
142 }, 'offset position and anchor data can be bottom');
143
144 test(function() {
145 assert_equals(getComputedStyle(div12, null).offsetPath, 'none');
146 assert_equals(getComputedStyle(div12, null).offsetDistance, '10%');
147 assert_equals(getComputedStyle(div12, null).offsetPosition, '50% 0%');
148 assert_equals(getComputedStyle(div12, null).offsetAnchor, 'auto');
149 assert_equals(getComputedStyle(div12, null).offsetRotation, 'auto 0deg');
150 assert_equals(getComputedStyle(div12, null).offset, 'none 10% 50% 0% auto au to 0deg');
151 }, 'offset position top can be followed by distance percentage');
152
153 test(function() {
154 assert_equals(span1.style.offsetPath, "path('M 1 2 V 3')");
155 assert_equals(span1.style.offsetDistance, '4px');
156 assert_equals(span1.style.offsetRotation, '5deg');
157 assert_equals(span1.style.offset, "path('M 1 2 V 3') 4px 5deg");
158 assert_equals(span1.style.transform, '');
159 }, 'offset style can be set inline');
160
161 test(function() {
162 assert_equals(span2.style.offsetPath, "path('M 1 2 V 3')");
163 assert_equals(span2.style.offsetDistance, '4px');
164 assert_equals(span2.style.offsetRotation, '5deg');
165 assert_equals(span2.style.offsetPosition, 'left bottom');
166 assert_equals(span2.style.offsetAnchor, 'right top');
167 assert_equals(span2.style.offset, "path('M 1 2 V 3') 4px left bottom right t op 5deg");
168 assert_equals(span2.style.transform, '');
169 }, 'offset style including position and anchor can be set inline');
170
171 test(function() {
172 assert_equals(span3.style.offsetDistance, '30%');
173 assert_equals(span3.style.offsetPosition, 'center bottom');
174 assert_equals(span3.style.offsetAnchor, '20px center');
175 assert_equals(span3.style.offset, '30% center bottom 20px center');
176 }, 'offset position bottom can be followed by anchor length');
177
178 </script>
179 </body>
180 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/css3/motion-path/motion-rotation-overflow-crash.html ('k') | third_party/WebKit/LayoutTests/css3/motion-path/offset-anchor.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698