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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/transform.html

Issue 2514043002: [CSS Typed OM] Add CSSValue->CSSSkew conversions (Closed)
Patch Set: Merge branch 'update-transform-tests' into cssskew-fromcssvalue-2 Created 3 years, 12 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 | « no previous file | third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/transform-expected.txt » ('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 <script src='../../../resources/testharness.js'></script> 2 <script src='../../../resources/testharness.js'></script>
3 <script src='../../../resources/testharnessreport.js'></script> 3 <script src='../../../resources/testharnessreport.js'></script>
4 <script src='property-suite.js'></script> 4 <script src='property-suite.js'></script>
5 5
6 <div id="testElement"></div> 6 <div id="testElement"></div>
7 7
8 <script> 8 <script>
9 9
10 let zeroAngle = new CSSAngleValue(0, 'deg');
11
12 function angleValue(value, unit) {
13 return new CSSAngleValue(value, unit);
14 }
15
10 function cssTransformWithRotate(angleValue) { 16 function cssTransformWithRotate(angleValue) {
11 return new CSSTransformValue([ 17 return new CSSTransformValue([
12 new CSSRotation(angleValue)]); 18 new CSSRotation(angleValue)]);
13 } 19 }
14 20
15 function cssTransformWithRotate3D(x, y, z, angleValue) { 21 function cssTransformWithRotate3D(x, y, z, angleValue) {
16 return new CSSTransformValue([ 22 return new CSSTransformValue([
17 new CSSRotation(x, y, z, angleValue)]); 23 new CSSRotation(x, y, z, angleValue)]);
18 } 24 }
19 25
20 runInlineStylePropertyMapTests( { 26 runInlineStylePropertyMapTests( {
21 property: 'transform', 27 property: 'transform',
22 validKeywords: [ 28 validKeywords: [
23 'none', 29 'none',
24 ], 30 ],
25 validObjects: [ 31 validObjects: [
26 // Translations 32 // Translations
27 // TODO(meade) 33 // TODO(meade)
28 // Scales 34 // Scales
29 // TODO(meade) 35 // TODO(meade)
30 // Skews 36 // Skews
31 // TODO(meade) 37 new CSSTransformValue([new CSSSkew(angleValue(30, 'deg'), zeroAngle)]),
38 new CSSTransformValue([new CSSSkew(angleValue(10, 'rad'), zeroAngle)]),
39 new CSSTransformValue([new CSSSkew(angleValue(2, 'grad'), zeroAngle)]),
40 new CSSTransformValue([new CSSSkew(angleValue(0.2, 'turn'), zeroAngle)]),
41 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(30, 'deg'))]),
42 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(10, 'rad'))]),
43 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(2, 'grad'))]),
44 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(0.2, 'turn'))]),
32 // Rotations 45 // Rotations
33 cssTransformWithRotate(new CSSAngleValue(30, 'deg')), 46 cssTransformWithRotate(angleValue(30, 'deg')),
34 cssTransformWithRotate(new CSSAngleValue(10, 'rad')), 47 cssTransformWithRotate(angleValue(10, 'rad')),
35 cssTransformWithRotate(new CSSAngleValue(2, 'grad')), 48 cssTransformWithRotate(angleValue(2, 'grad')),
36 cssTransformWithRotate(new CSSAngleValue(0.2, 'turn')), 49 cssTransformWithRotate(angleValue(0.2, 'turn')),
37 cssTransformWithRotate3D(1, 2, 3, new CSSAngleValue(30, 'deg')), 50 cssTransformWithRotate3D(1, 2, 3, angleValue(30, 'deg')),
38 cssTransformWithRotate3D(1, 2, 3, new CSSAngleValue(10, 'rad')), 51 cssTransformWithRotate3D(1, 2, 3, angleValue(10, 'rad')),
39 cssTransformWithRotate3D(1, 2, 3, new CSSAngleValue(2, 'grad')), 52 cssTransformWithRotate3D(1, 2, 3, angleValue(2, 'grad')),
40 cssTransformWithRotate3D(1, 2, 3, new CSSAngleValue(0.2, 'turn')), 53 cssTransformWithRotate3D(1, 2, 3, angleValue(0.2, 'turn')),
41 // Perspectives 54 // Perspectives
42 // TODO(meade) 55 // TODO(meade)
43 ], 56 ],
44 // Values with these strings aren't used in Typed OM, but can also be 57 // Values with these strings aren't used in Typed OM, but can also be
45 // represented by the specified values. 58 // represented by the specified values.
46 validStringMappings: { 59 validStringMappings: {
60 // Skews
61 'skew(45deg)':
62 new CSSTransformValue([new CSSSkew(angleValue(45, 'deg'), zeroAngle)]),
63 'skew(1rad)':
64 new CSSTransformValue([new CSSSkew(angleValue(1, 'rad'), zeroAngle)]),
65 'skew(6.2grad)':
66 new CSSTransformValue([new CSSSkew(angleValue(6.2, 'grad'), zeroAngle)]),
67 'skew(0.31turn)':
68 new CSSTransformValue([new CSSSkew(angleValue(0.31, 'turn'), zeroAngle)]),
69 'skewX(45deg)':
70 new CSSTransformValue([new CSSSkew(angleValue(45, 'deg'), zeroAngle)]),
71 'skewX(1rad)':
72 new CSSTransformValue([new CSSSkew(angleValue(1, 'rad'), zeroAngle)]),
73 'skewX(6.2grad)':
74 new CSSTransformValue([new CSSSkew(angleValue(6.2, 'grad'), zeroAngle)]),
75 'skewX(0.31turn)':
76 new CSSTransformValue([new CSSSkew(angleValue(0.31, 'turn'), zeroAngle)]),
77 'skewY(45deg)':
78 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(45, 'deg'))]),
79 'skewY(1rad)':
80 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(1, 'rad'))]),
81 'skewY(6.2grad)':
82 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(6.2, 'grad'))]),
83 'skewY(0.31turn)':
84 new CSSTransformValue([new CSSSkew(zeroAngle, angleValue(0.31, 'turn'))]),
47 // Rotations 85 // Rotations
48 'rotateX(45deg)': 86 'rotateX(45deg)': cssTransformWithRotate3D(1, 0, 0, angleValue(45, 'deg')),
49 cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(45, 'deg')), 87 'rotateX(1rad)': cssTransformWithRotate3D(1, 0, 0, angleValue(1, 'rad')),
50 'rotateX(1rad)':
51 cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(1, 'rad')),
52 'rotateX(6.2grad)': 88 'rotateX(6.2grad)':
53 cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(6.2, 'grad')), 89 cssTransformWithRotate3D(1, 0, 0, angleValue(6.2, 'grad')),
54 'rotateX(0.31turn)': 90 'rotateX(0.31turn)':
55 cssTransformWithRotate3D(1, 0, 0, new CSSAngleValue(0.31, 'turn')), 91 cssTransformWithRotate3D(1, 0, 0, angleValue(0.31, 'turn')),
56 'rotateY(45deg)': 92 'rotateY(45deg)': cssTransformWithRotate3D(0, 1, 0, angleValue(45, 'deg')),
57 cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(45, 'deg')), 93 'rotateY(1rad)': cssTransformWithRotate3D(0, 1, 0, angleValue(1, 'rad')),
58 'rotateY(1rad)':
59 cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(1, 'rad')),
60 'rotateY(6.2grad)': 94 'rotateY(6.2grad)':
61 cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(6.2, 'grad')), 95 cssTransformWithRotate3D(0, 1, 0, angleValue(6.2, 'grad')),
62 'rotateY(0.31turn)': 96 'rotateY(0.31turn)':
63 cssTransformWithRotate3D(0, 1, 0, new CSSAngleValue(0.31, 'turn')), 97 cssTransformWithRotate3D(0, 1, 0, angleValue(0.31, 'turn')),
64 'rotateZ(45deg)': 98 'rotateZ(45deg)': cssTransformWithRotate3D(0, 0, 1, angleValue(45, 'deg')),
65 cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(45, 'deg')), 99 'rotateZ(1rad)': cssTransformWithRotate3D(0, 0, 1, angleValue(1, 'rad')),
66 'rotateZ(1rad)':
67 cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(1, 'rad')),
68 'rotateZ(6.2grad)': 100 'rotateZ(6.2grad)':
69 cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(6.2, 'grad')), 101 cssTransformWithRotate3D(0, 0, 1, angleValue(6.2, 'grad')),
70 'rotateZ(0.31turn)': 102 'rotateZ(0.31turn)':
71 cssTransformWithRotate3D(0, 0, 1, new CSSAngleValue(0.31, 'turn')), 103 cssTransformWithRotate3D(0, 0, 1, angleValue(0.31, 'turn')),
72 }, 104 },
73 supportsMultiple: false, 105 supportsMultiple: false,
74 invalidObjects: [new CSSSimpleLength(4, 'px')] 106 invalidObjects: [new CSSSimpleLength(4, 'px')]
75 }); 107 });
76 108
77 // TODO(meade): Remove/update this test once translate is supported. 109 // TODO(meade): Remove/update this test once translate is supported.
78 test(function() { 110 test(function() {
79 testElement.style.transform = 'translateY(50px)'; 111 testElement.style.transform = 'translateY(50px)';
80 testElement.styleMap.entries(); 112 testElement.styleMap.entries();
81 }, "Unhandled case doesn't crash."); 113 }, "Unhandled case doesn't crash.");
82 114
83 test(function() { 115 test(function() {
84 testElement.style.transform = 'rotate(calc(45deg + 1rad))'; 116 testElement.style.transform = 'rotate(calc(45deg + 1rad))';
85 let result = testElement.styleMap.get('transform'); 117 let result = testElement.styleMap.get('transform');
86 assert_equals(result.constructor, CSSStyleValue, 118 assert_equals(result.constructor, CSSStyleValue,
87 'result is a base CSSStyleValue'); 119 'result is a base CSSStyleValue');
88 assert_equals(result.cssText, 'rotate(calc(102.296deg))'); 120 assert_equals(result.cssText, 'rotate(calc(102.296deg))');
89 }, 'Getting transform when it has a rotate with a calc angle does not crash'); 121 }, 'Getting transform when it has a rotate with a calc angle does not crash');
90 122
91 test(function() { 123 test(function() {
92 testElement.style.transform = 'rotate3d(1, 2, 3, calc(45deg + 1rad))'; 124 testElement.style.transform = 'rotate3d(1, 2, 3, calc(45deg + 1rad))';
93 let result = testElement.styleMap.get('transform'); 125 let result = testElement.styleMap.get('transform');
94 assert_equals(result.constructor, CSSStyleValue, 126 assert_equals(result.constructor, CSSStyleValue,
95 'result is a base CSSStyleValue'); 127 'result is a base CSSStyleValue');
96 assert_equals(result.cssText, 'rotate3d(1, 2, 3, calc(102.296deg))'); 128 assert_equals(result.cssText, 'rotate3d(1, 2, 3, calc(102.296deg))');
97 }, 'Getting transform when it has a rotate3d with a calc angle does not crash'); 129 }, 'Getting transform when it has a rotate3d with a calc angle does not crash');
98 130
131 test(function() {
132 testElement.style.transform = 'skew(calc(5deg + 0.1rad))';
133 let result = testElement.styleMap.get('transform');
134 assert_equals(result.cssText, 'skew(calc(10.7296deg))');
135 assert_equals(result.constructor, CSSStyleValue);
136 }, 'Getting transform when it has a skew with a calc angle does not crash');
137
138 test(function() {
139 testElement.style.transform = 'skew(calc(5deg + 0.1rad), 5deg)';
140 let result = testElement.styleMap.get('transform');
141 assert_equals(result.cssText, 'skew(calc(10.7296deg), 5deg)');
142 assert_equals(result.constructor, CSSStyleValue);
143
144 testElement.style.transform = 'skew(5deg, calc(5deg + 0.1rad))';
145 result = testElement.styleMap.get('transform');
146 assert_equals(result.cssText, 'skew(5deg, calc(10.7296deg))');
147 assert_equals(result.constructor, CSSStyleValue);
148 }, 'Getting transform when it has a 2-argument skew with a calc angle ' +
149 'does not crash');
150
151 test(function() {
152 testElement.style.transform = 'skewX(calc(5deg + 0.1rad))';
153 let result = testElement.styleMap.get('transform');
154 assert_equals(result.cssText, 'skewX(calc(10.7296deg))');
155 assert_equals(result.constructor, CSSStyleValue);
156 }, 'Getting transform when it has a skewX with a calc angle does not crash');
157
158 test(function() {
159 testElement.style.transform = 'skewY(calc(5deg + 0.1rad))';
160 let result = testElement.styleMap.get('transform');
161 assert_equals(result.cssText, 'skewY(calc(10.7296deg))');
162 assert_equals(result.constructor, CSSStyleValue);
163 }, 'Getting transform when it has a skewY with a calc angle does not crash');
164
99 </script> 165 </script>
100
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/typedcssom/inlinestyle/properties/transform-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698