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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html

Issue 2406203004: Compute registered properties after resolving high priority properties (Closed)
Patch Set: font size cycle test 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/registered-property-computation-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 4
5 <style> 5 <style>
6 #divWithFontSizeSet, #parentDiv { 6 #divWithFontSizeSet, #parentDiv {
7 font-size: 10px; 7 font-size: 10px;
8 } 8 }
9 #divWithFontSizeSet, #divWithFontSizeInherited { 9 #divWithFontSizeSet, #divWithFontSizeInherited {
10 --length-1: 12px; 10 --length-1: 12px;
11 --length-2: 13vw; 11 --length-2: 13vw;
12 --length-3: 14em; 12 --length-3: 14em;
13 --length-4: 15vmin; 13 --length-4: 15vmin;
14 --length-5: calc(16px - 7em + 10vh); 14 --length-5: calc(16px - 7em + 10vh);
15 --length-6: var(--length-3); 15 --length-6: var(--length-3);
16 --length-percentage-1: 17em; 16 --length-percentage-1: 17em;
17 --length-percentage-2: 18%; 17 --length-percentage-2: 18%;
18 --length-percentage-3: calc(19em - 2%); 18 --length-percentage-3: calc(19em - 2%);
19 --list-1: 10px 3em; 19 --list-1: 10px 3em;
20 --list-2: 4em 9px; 20 --list-2: 4em 9px;
21 --list-3: 3% 10vmax 22px; 21 --list-3: 3% 10vmax 22px;
22 --list-4: calc(50% + 1em) 4px; 22 --list-4: calc(50% + 1em) 4px;
23 } 23 }
24 #fontSizeCycle {
25 --font-size: 2em;
26 font-size: var(--font-size);
27 }
24 </style> 28 </style>
25 29
26 <div id=divWithFontSizeSet></div> 30 <div id=divWithFontSizeSet></div>
27 <div id=parentDiv> 31 <div id=parentDiv>
28 <div id=divWithFontSizeInherited></div> 32 <div id=divWithFontSizeInherited></div>
33 <div id=fontSizeCycle></div>
29 </div> 34 </div>
30 35
31 <script> 36 <script>
32 CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px '}); 37 CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px '});
33 CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px '}); 38 CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px '});
34 CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px '}); 39 CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px '});
35 CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px '}); 40 CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px '});
36 CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px '}); 41 CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px '});
37 CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px '}); 42 CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px '});
38 CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage >', initialValue: '0px'}); 43 CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage >', initialValue: '0px'});
39 CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage >', initialValue: '0px'}); 44 CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage >', initialValue: '0px'});
40 CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage >', initialValue: '0px'}); 45 CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage >', initialValue: '0px'});
41 CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px' }); 46 CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px' });
42 CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px' }); 47 CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px' });
43 CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialV alue: '0px'}); 48 CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialV alue: '0px'});
44 CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialV alue: '0px'}); 49 CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialV alue: '0px'});
50 CSS.registerProperty({name: '--font-size', syntax: '<length>', initialValue: '0p x'});
45 51
46 for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) { 52 for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) {
47 var id = element.id; 53 var id = element.id;
48 var computedStyle = getComputedStyle(element); 54 var computedStyle = getComputedStyle(element);
49 55
50 test(function() { 56 test(function() {
51 assert_equals(computedStyle.getPropertyValue('--length-1'), '12px'); 57 assert_equals(computedStyle.getPropertyValue('--length-1'), '12px');
52 assert_equals(computedStyle.getPropertyValue('--length-2'), '104px'); 58 assert_equals(computedStyle.getPropertyValue('--length-2'), '104px');
53 assert_equals(computedStyle.getPropertyValue('--length-3'), '140px'); 59 assert_equals(computedStyle.getPropertyValue('--length-3'), '140px');
54 assert_equals(computedStyle.getPropertyValue('--length-4'), '90px'); 60 assert_equals(computedStyle.getPropertyValue('--length-4'), '90px');
(...skipping 10 matching lines...) Expand all
65 test(function() { 71 test(function() {
66 assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px'); 72 assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px');
67 assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px'); 73 assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px');
68 }, "<length>+ values are computed correctly for " + id); 74 }, "<length>+ values are computed correctly for " + id);
69 75
70 test(function() { 76 test(function() {
71 assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px' ); 77 assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px' );
72 assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 5 0%) 4px'); 78 assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 5 0%) 4px');
73 }, "<length-percentage>+ values are computed correctly for " + id); 79 }, "<length-percentage>+ values are computed correctly for " + id);
74 } 80 }
81
82 test(function() {
83 var computedStyle = getComputedStyle(fontSizeCycle);
84 assert_equals(computedStyle.fontSize, '20px');
85 assert_equals(computedStyle.getPropertyValue('--font-size'), '40px');
86 }, "font-size with a var() reference to a registered property using ems works as expected");
75 </script> 87 </script>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/custom-properties/registered-property-computation-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698