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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/typedcssom/computedstyle/custom-properties.html

Issue 2791193004: [Typed CSSOM] New design for computed styles which includes custom properties (Closed)
Patch Set: tidy up Created 3 years, 8 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
« third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('K') | « third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('k') | third_party/WebKit/LayoutTests/typedcssom/computedstyle/line-height.html » ('j') | third_party/WebKit/Source/core/css/cssom/ComputedStylePropertyMap.cpp » ('J')
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 </head>
7 <body>
8 <div id='testElement'>
9 <div id='childTestElement'></div>
10 </div>
11 <script>
12 CSS.registerProperty(
13 {
14 name: '--my-image',
15 syntax: '<image>',
16 inherits: false,
17 initialValue: 'url()'
18 });
19 CSS.registerProperty(
20 {
21 name: '--my-length',
22 syntax: '<length>',
23 inherits: false,
24 initialValue: '0px'
25 });
26 CSS.registerProperty(
27 {
28 name: '--my-inherited-length',
29 syntax: '<length>',
30 inherits: true,
31 initialValue: '0px'
32 });
33 CSS.registerProperty(
34 {
35 name: '--my-percentage',
36 syntax: '<percentage>',
37 inherits: false,
38 initialValue: '0%'
39 });
40 CSS.registerProperty(
41 {
42 name: '--my-unused-property',
43 syntax: '<percentage>',
44 inherits: false,
45 initialValue: '0%'
46 });
47 </script>
48 <style>
49 #testElement {
50 font-size: 10px;
51 --my-length: 10em;
52 --my-inherited-length: 200px;
53 --my-percentage: 10%;
54 background-image: var(--my-image);
55 width: var(--my-length);
56 height: calc(var(--my-length) + var(--my-percentage) + 15px);
57 }
58 </style>
meade_UTC10 2017/04/06 03:47:32 Can this be above the script element, and the two
59 <script>
60 // TODO(rjwright): Change this & put it in the CSS when relative URLs work with registered
61 // properties.
62 var locationPath = location.href.substring(0, location.href.lastIndexOf('/'));
63 var imagePath = locationPath + '/resources/1x1-green.png';
64 testElement.style = '--my-image: url(\"' + imagePath + '\");';
65
66 var computedStyleMap = getComputedStyleMap(testElement);
67 var childComputedStyleMap = getComputedStyleMap(childTestElement);
68
69 test(function() {
70 assert_true(computedStyleMap.has('--my-length'));
71 var result = computedStyleMap.get('--my-length');
72 assert_true(result instanceof CSSSimpleLength);
73 assert_equals(result.cssText, '100px');
74 }, 'Getting a length type registered property returns a CSSSimpleLength');
75
76 var t1 = async_test('Getting a URL image type registered property returns a CSSU RLImageValue');
77 function t1Callback() {
78 t1.step(function() {
79 assert_true(computedStyleMap.has('--my-image'));
80 var result = computedStyleMap.get('--my-image');
81 assert_true(result instanceof CSSURLImageValue);
82 assert_equals(result.cssText, 'url(\"' + imagePath + '\")');
83 // FIXME(rjwright): I thought this was fixed!
meade_UTC10 2017/04/06 03:47:32 Perhaps a more helpful comment? :p
84 assert_equals(result.state, 'loaded');
85 assert_equals(result.intrinsicWidth, 1);
86 assert_equals(result.intrinsicHeight, 1);
87 assert_equals(result.intrinsicRatio, 1);
88 });
89 t1.done();
90 }
91
92 test(function() {
93 var result = computedStyleMap.get('width');
94 assert_true(result instanceof CSSSimpleLength);
95 assert_equals(result.cssText, '100px');
96 }, 'Getting a width with a length type var value returns a CSSSimpleLength');
97
98 var t2 = async_test('Getting a background-image with a URL image type var value returns a CSSURLImageValue');
99 function t2Callback() {
meade_UTC10 2017/04/06 03:47:32 If you move the calculation of the image path into
100 t2.step(function() {
101 var result = computedStyleMap.get('background-image');
102 assert_true(result instanceof CSSURLImageValue);
103 assert_equals(result.cssText, 'url(\"' + imagePath + '\")');
104 assert_equals(result.state, 'loaded');
105 assert_equals(result.intrinsicWidth, 1);
106 assert_equals(result.intrinsicHeight, 1);
107 assert_equals(result.intrinsicRatio, 1);
108 });
109 t2.done();
110 }
111
112 test(function() {
113 assert_true(childComputedStyleMap.has('--my-inherited-length'));
114 var result = childComputedStyleMap.get('--my-inherited-length');
115 assert_true(result instanceof CSSSimpleLength);
116 assert_equals(result.cssText, '200px');
117 }, 'Getting an inherited length type registered property returns a CSSSimpleLeng th');
118
119 test(function() {
120 assert_true(childComputedStyleMap.has('--my-length'));
121 result = childComputedStyleMap.get('--my-length');
122 assert_true(result instanceof CSSSimpleLength);
123 assert_equals(result.cssText, '0px');
124 }, 'Getting a non-inherited length type registered property returns a CSSSimpleL ength');
125
126 test(function() {
127 var result = computedStyleMap.get('height');
128 assert_true(result instanceof CSSCalcLength);
129 assert_equals(result.px, 115);
130 assert_equals(result.percent, 10);
131 assert_equals(result.cssText, 'calc(10% + 115px)');
132 }, 'Getting a height with a calc type containing var values returns a CSSCalcLen gth');
133
134 test(function() {
135 assert_true(computedStyleMap.has('--my-unused-property'));
136 result = computedStyleMap.get('--my-unused-property');
137 assert_true(result instanceof CSSSimpleLength);
138 assert_equals(result.cssText, '0%');
139 }, 'Getting the value of a registered property that isn\'t set on the element ' +
140 'returns the initial value for the property');
141
142 test(function() {
143 assert_false(computedStyleMap.has('--my-non-property'));
144 assert_equals(computedStyleMap.get('--my-non-property'), null);
145 }, 'Getting the value of a property that isn\'t registered returns null');
146
147 test(function() {
148 var result = computedStyleMap.getAll('--my-length');
149 assert_equals(result.length, 1);
150 assert_true(result[0] instanceof CSSSimpleLength);
151 assert_equals(result[0].cssText, '100px');
152 }, 'getAll for a length type registered property returns a single value');
153
154 document.onreadystatechange = function() {
155 if(document.readyState == 'complete') {
156 t1Callback(computedStyleMap);
157 t2Callback(computedStyleMap);
158 }
159 };
160
161 </script>
162 </body>
163 </html>
OLDNEW
« third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('K') | « third_party/WebKit/LayoutTests/typedcssom/computedstyle/computedStylePropertyMap.html ('k') | third_party/WebKit/LayoutTests/typedcssom/computedstyle/line-height.html » ('j') | third_party/WebKit/Source/core/css/cssom/ComputedStylePropertyMap.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698