Chromium Code Reviews Chromium Code Reviews
Issue 2354463002:
CSS Properties and Values API: Implement computation / computational independence (Closed)
| Index: third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html |
| diff --git a/third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html b/third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..214bd97f28524a1a608ea9772b9ac895765851d7 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html |
| @@ -0,0 +1,72 @@ |
| +<!DOCTYPE HTML> |
| +<script src="../resources/testharness.js"></script> |
| +<script src="../resources/testharnessreport.js"></script> |
| + |
| +<style> |
| +#div1, #div2 { |
| + font-size: 10px; |
| +} |
| +#div1, #div3 { |
| + --length-1: 12px; |
| + --length-2: 13vw; |
| + --length-3: 14em; |
| + --length-4: 15vmin; |
| + --length-5: calc(16px - 7em + 10vh); |
| + --length-percentage-1: 17em; |
| + --length-percentage-2: 18%; |
| + --length-percentage-3: calc(19em - 2%); |
| + --list-1: 10px 3em; |
| + --list-2: 4em 9px; |
| + --list-3: 3% 10vmax 22px; |
| + --list-4: calc(50% + 1em) 4px; |
| +} |
| +</style> |
| + |
| +<div id=div1></div> |
| +<div id=div2> |
| + <div id=div3></div> |
|
alancutter (OOO until 2018)
2016/09/22 03:08:43
Rename as outerDiv and innerDiv and use the ids in
Timothy Loh
2016/09/22 06:00:46
Done (left the other as div1, feels a bit weird..)
alancutter (OOO until 2018)
2016/09/22 07:58:41
My concern was the test names weren't descriptive
Timothy Loh
2016/09/22 08:18:58
Picked better names...
alancutter (OOO until 2018)
2016/09/22 08:25:56
Tests still don't mention the element ID being tes
Timothy Loh
2016/09/22 08:31:43
I fixed it now D:
|
| +</div> |
| + |
| +<script> |
| +CSS.registerProperty({name: '--length-1', syntax: '<length>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--length-2', syntax: '<length>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--length-3', syntax: '<length>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--length-4', syntax: '<length>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--length-5', syntax: '<length>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--length-percentage-1', syntax: '<length-percentage>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--length-percentage-2', syntax: '<length-percentage>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--length-percentage-3', syntax: '<length-percentage>', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--list-1', syntax: '<length>+', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--list-2', syntax: '<length>+', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--list-3', syntax: '<length-percentage>+', initialValue: '0px'}); |
| +CSS.registerProperty({name: '--list-4', syntax: '<length-percentage>+', initialValue: '0px'}); |
| + |
| +for (var i = 0; i < 2; i++) { |
| + // div1 has font-size explicitly set while div3 has font-size inherited |
| + var computedStyle = getComputedStyle([div1, div3][i]); |
| + |
| + 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'); |
| + }, "<length> values are computed correctly"); |
| + |
| + 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"); |
| + |
| + test(function() { |
| + assert_equals(computedStyle.getPropertyValue('--list-1'), '10px 30px'); |
| + assert_equals(computedStyle.getPropertyValue('--list-2'), '40px 9px'); |
| + }, "<length>+ values are computed correctly"); |
| + |
| + 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"); |
| +} |
| +</script> |
