OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE HTML> |
| 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> |
| 4 |
| 5 <style> |
| 6 #divWithFontSizeSet, #parentDiv { |
| 7 font-size: 10px; |
| 8 } |
| 9 #divWithFontSizeSet, #divWithFontSizeInherited { |
| 10 --length-1: 12px; |
| 11 --length-2: 13vw; |
| 12 --length-3: 14em; |
| 13 --length-4: 15vmin; |
| 14 --length-5: calc(16px - 7em + 10vh); |
| 15 --length-6: var(--length-3); |
| 16 --length-percentage-1: 17em; |
| 17 --length-percentage-2: 18%; |
| 18 --length-percentage-3: calc(19em - 2%); |
| 19 --list-1: 10px 3em; |
| 20 --list-2: 4em 9px; |
| 21 --list-3: 3% 10vmax 22px; |
| 22 --list-4: calc(50% + 1em) 4px; |
| 23 } |
| 24 </style> |
| 25 |
| 26 <div id=divWithFontSizeSet></div> |
| 27 <div id=parentDiv> |
| 28 <div id=divWithFontSizeInherited></div> |
| 29 </div> |
| 30 |
| 31 <script> |
| 32 CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px
'}); |
| 33 CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px
'}); |
| 34 CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px
'}); |
| 35 CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px
'}); |
| 36 CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px
'}); |
| 37 CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px
'}); |
| 38 CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage
>', initialValue: '0px'}); |
| 39 CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage
>', initialValue: '0px'}); |
| 40 CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage
>', initialValue: '0px'}); |
| 41 CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px'
}); |
| 42 CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px'
}); |
| 43 CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialV
alue: '0px'}); |
| 44 CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialV
alue: '0px'}); |
| 45 |
| 46 for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) { |
| 47 var id = element.id; |
| 48 var computedStyle = getComputedStyle(element); |
| 49 |
| 50 test(function() { |
| 51 assert_equals(computedStyle.getPropertyValue('--length-1'), '12px'); |
| 52 assert_equals(computedStyle.getPropertyValue('--length-2'), '104px'); |
| 53 assert_equals(computedStyle.getPropertyValue('--length-3'), '140px'); |
| 54 assert_equals(computedStyle.getPropertyValue('--length-4'), '90px'); |
| 55 assert_equals(computedStyle.getPropertyValue('--length-5'), '6px'); |
| 56 assert_equals(computedStyle.getPropertyValue('--length-6'), '140px'); |
| 57 }, "<length> values are computed correctly for " + id); |
| 58 |
| 59 test(function() { |
| 60 assert_equals(computedStyle.getPropertyValue('--length-percentage-1'), '
170px'); |
| 61 assert_equals(computedStyle.getPropertyValue('--length-percentage-2'), '
18%'); |
| 62 assert_equals(computedStyle.getPropertyValue('--length-percentage-3'), '
calc(190px + -2%)'); |
| 63 }, "<length-percentage> values are computed correctly for " + id); |
| 64 |
| 65 test(function() { |
| 66 assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px'); |
| 67 assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px'); |
| 68 }, "<length>+ values are computed correctly for " + id); |
| 69 |
| 70 test(function() { |
| 71 assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px'
); |
| 72 assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 5
0%) 4px'); |
| 73 }, "<length-percentage>+ values are computed correctly for " + id); |
| 74 } |
| 75 </script> |
OLD | NEW |