third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html - Issue 2354463002: CSS Properties and Values API: Implement computation / computational independence

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

Issue 2354463002: CSS Properties and Values API: Implement computation / computational independence (Closed)

Patch Set: actually fix test :) Created 4 years, 3 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 side-by-side diff with in-line comments

« no previous file with comments | « third_party/WebKit/LayoutTests/custom-properties/register-property-syntax-parsing-expected.txt ('k') | third_party/WebKit/LayoutTests/custom-properties/registered-property-computation-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

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..897550f63c9ae144af35fcfa267f9f3195b27b98

--- /dev/null

+++ b/third_party/WebKit/LayoutTests/custom-properties/registered-property-computation.html

@@ -0,0 +1,75 @@

+<!DOCTYPE HTML>

+<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%);

+ --list-1: 10px 3em;

+ --list-2: 4em 9px;

+ --list-3: 3% 10vmax 22px;

+ --list-4: calc(50% + 1em) 4px;

+</style>

+<div id=divWithFontSizeSet></div>

+<div id=parentDiv>

+ <div id=divWithFontSizeInherited></div>

+</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-6', 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 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('--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);

+</script>