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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html

Issue 2358203003: CSS Properties and Values API: Use initial value where appropriate for var() (Closed)
Patch Set: bla 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 | « no previous file | third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-cycles.html » ('j') | third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp » ('J')
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 <style> 4 <style>
5 div { 5 div {
6 --registered-length-1: 10px; 6 --registered-length-1: 10px;
7 --registered-length-2: var(--registered-length-1); 7 --registered-length-2: var(--registered-length-1);
8 --registered-length-3: var(--length-1); 8 --registered-length-3: var(--length-1);
9 --registered-length-4: calc(var(--length-1) + 40px); 9 --registered-length-4: calc(var(--length-1) + 40px);
10 --registered-length-5: var(--invalid, 70px); 10 --registered-length-5: var(--invalid, 70px);
11 --registered-length-6: calc(var(--registered-length-3)*4); 11 --registered-length-6: calc(var(--registered-length-3)*4);
12 --registered-length-7: var(--123px, 6px);
12 13
13 --length-1: 20px; 14 --length-1: 20px;
14 --length-2: var(--registered-length-1); 15 --length-2: var(--registered-length-1);
16 --length-3: calc(var(--123px, 6px) + var(--123px));
15 17
16 --percentage: 10%; 18 --percentage: 10%;
17 --registered-length-invalid: var(--percentage); 19 --registered-length-invalid: var(--percentage);
20
21 --registered-token-stream-1:var(--invalid);
22 --registered-token-stream-2:var(--invalid,fallback);
23 --token-stream-1:var(--registered-token-stream-1,moo);
18 } 24 }
19 </style> 25 </style>
20 <div id=element></div> 26 <div id=element></div>
21 <script> 27 <script>
28 CSS.registerProperty({name: '--123px', syntax: '<length>', initialValue: '123px' });
29
22 CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initial Value: '0px'}); 30 CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initial Value: '0px'});
23 CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initial Value: '0px'}); 31 CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initial Value: '0px'});
24 CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initial Value: '0px'}); 32 CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initial Value: '0px'});
25 CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initial Value: '0px'}); 33 CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initial Value: '0px'});
26 CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initial Value: '0px'}); 34 CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initial Value: '0px'});
27 CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initial Value: '0px'}); 35 CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initial Value: '0px'});
36 CSS.registerProperty({name: '--registered-length-7', syntax: '<length>', initial Value: '0px'});
28 CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', i nitialValue: '15px'}); 37 CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', i nitialValue: '15px'});
29 38
39 CSS.registerProperty({name: '--registered-token-stream-1', syntax: '*'});
40 CSS.registerProperty({name: '--registered-token-stream-2', syntax: '*'});
41
30 test(function() { 42 test(function() {
31 computedStyle = getComputedStyle(element); 43 computedStyle = getComputedStyle(element);
32 assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px '); 44 assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px ');
33 assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px '); 45 assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px ');
34 assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px '); 46 assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px ');
35 assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px '); 47 assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px ');
36 assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px '); 48 assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px ');
37 assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px '); 49 assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px ');
50 assert_equals(computedStyle.getPropertyValue('--registered-length-7'), '123p x');
38 assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px'); 51 assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px');
39 assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px'); 52 assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px');
53 assert_equals(computedStyle.getPropertyValue('--length-3'), ' calc(123px + 1 23px)');
40 assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px'); 54 assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px');
55
56 assert_equals(computedStyle.getPropertyValue('--registered-token-stream-1'), '');
57 assert_equals(computedStyle.getPropertyValue('--registered-token-stream-2'), 'fallback');
58 assert_equals(computedStyle.getPropertyValue('--token-stream-1'), 'moo');
41 }, "var() references work with registered properties"); 59 }, "var() references work with registered properties");
42 </script> 60 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-cycles.html » ('j') | third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698