| <!DOCTYPE HTML> |
| <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#calculation-of-computed-values" /> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| #divWithFontSizeSet, #parentDiv { |
| font-size: 10px; |
| } |
| #divWithFontSizeSet, #divWithFontSizeInherited { |
| --length-1: 12px; |
| --length-2: 13vw; |
| --length-3: 14em; |
| --length-4: 15vmin; |
| --length-5: calc(16px - 7em + 10vh); |
| --length-6: var(--length-3); |
| --length-percentage-1: 17em; |
| --length-percentage-2: 18%; |
| --length-percentage-3: calc(19em - 2%); |
| --csv-1: 10px, 3em; |
| --csv-2: 4em ,9px; |
| --csv-3: 8em; |
| --csv-4: 3% , 10vmax , 22px; |
| --csv-5: calc(50% + 1em), 4px; |
| --csv-6: calc(13% + 37px); |
| --list-1: 10px 3em; |
| --list-2: 4em 9px; |
| --list-3: 3% 10vmax 22px; |
| --list-4: calc(50% + 1em) 4px; |
| --transform-function-1: translateX(2px); |
| --transform-function-2: translateX(10em); |
| --transform-function-3: translateX(calc(11em + 10%)); |
| --transform-function-4: translateX(10%) scale(2); |
| } |
| </style> |
| |
| <div id=divWithFontSizeSet></div> |
| <div id=parentDiv> |
| <div id=divWithFontSizeInherited></div> |
| </div> |
| |
| <script> |
| test(() => { |
| CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-6', syntax: '<length>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--csv-1', syntax: '<length>#', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--csv-2', syntax: '<length>#', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--csv-3', syntax: '<length>#', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--csv-4', syntax: '<length-percentage>#', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--csv-5', syntax: '<length-percentage>#', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--csv-6', syntax: '<length-percentage>#', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px', inherits: false}); |
| CSS.registerProperty({name: '--transform-function-1', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false}); |
| CSS.registerProperty({name: '--transform-function-2', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false}); |
| CSS.registerProperty({name: '--transform-function-3', syntax: '<transform-function>', initialValue: 'translateX(0px)', inherits: false}); |
| CSS.registerProperty({name: '--transform-function-4', syntax: '<transform-function>+', initialValue: 'translateX(0px)', inherits: false}); |
| }, "CSS.registerProperty"); |
| |
| for (var element of [divWithFontSizeSet, divWithFontSizeInherited]) { |
| var id = element.id; |
| var computedStyle = getComputedStyle(element); |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--length-1'), '12px'); |
| assert_equals(computedStyle.getPropertyValue('--length-2'), '104px'); |
| assert_equals(computedStyle.getPropertyValue('--length-3'), '140px'); |
| assert_equals(computedStyle.getPropertyValue('--length-4'), '90px'); |
| assert_equals(computedStyle.getPropertyValue('--length-5'), '6px'); |
| assert_equals(computedStyle.getPropertyValue('--length-6'), '140px'); |
| }, "<length> values are computed correctly for " + id); |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--length-percentage-1'), '170px'); |
| assert_equals(computedStyle.getPropertyValue('--length-percentage-2'), '18%'); |
| assert_equals(computedStyle.getPropertyValue('--length-percentage-3'), 'calc(190px + -2%)'); |
| }, "<length-percentage> values are computed correctly for " + id); |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--csv-1'), '10px, 30px'); |
| assert_equals(computedStyle.getPropertyValue('--csv-2'), '40px, 9px'); |
| assert_equals(computedStyle.getPropertyValue('--csv-3'), '80px'); |
| }, "<length># values are computed correctly for " + id); |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--csv-4'), '3%, 80px, 22px'); |
| assert_equals(computedStyle.getPropertyValue('--csv-5'), 'calc(10px + 50%), 4px'); |
| assert_equals(computedStyle.getPropertyValue('--csv-6'), 'calc(37px + 13%)'); |
| }, "<length-percentage># values are computed correctly for " + id); |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px'); |
| assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px'); |
| }, "<length>+ values are computed correctly for " + id); |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--list-3'), '3% 80px 22px'); |
| assert_equals(computedStyle.getPropertyValue('--list-4'), 'calc(10px + 50%) 4px'); |
| }, "<length-percentage>+ values are computed correctly for " + id); |
| |
| test(function() { |
| assert_equals(computedStyle.getPropertyValue('--transform-function-1'), 'translateX(2px)'); |
| assert_equals(computedStyle.getPropertyValue('--transform-function-2'), 'translateX(100px)'); |
| assert_equals(computedStyle.getPropertyValue('--transform-function-3'), 'translateX(calc(110px + 10%))'); |
| assert_equals(computedStyle.getPropertyValue('--transform-function-4'), 'translateX(10%) scale(2)'); |
| }, "<transform-function> values are computed correctly for " + id); |
| } |
| </script> |
