third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html - Issue 2310823002: Skeleton implementation of CSS Properties and Values API

Unified Diff: third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html

Issue 2310823002: Skeleton implementation of CSS Properties and Values API (Closed)

Patch Set: custom properties :D 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/unregister-property.html ('k') | third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-expected.txt » ('j') | third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties-expected.txt » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html

diff --git a/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html b/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html

new file mode 100644

index 0000000000000000000000000000000000000000..5ccbaef46f742b62eea6ca8662e8feafdbf6407f

--- /dev/null

+++ b/third_party/WebKit/LayoutTests/custom-properties/var-reference-registered-properties.html

@@ -0,0 +1,42 @@

+<!DOCTYPE HTML>

+<script src="../resources/testharness.js"></script>

+<script src="../resources/testharnessreport.js"></script>

+<style>

+div {

+ --registered-length-1: 10px;

+ --registered-length-2: var(--registered-length-1);

+ --registered-length-3: var(--length-1);

+ --registered-length-4: calc(var(--length-1) + 40px);

+ --registered-length-5: var(--invalid, 70px);

+ --registered-length-6: calc(var(--registered-length-3)*4);

+ --length-1: 20px;

+ --length-2: var(--registered-length-1);

+ --percentage: 10%;

+ --registered-length-invalid: var(--percentage);

+</style>

+<div id=element></div>

+<script>

+CSS.registerProperty({name: '--registered-length-1', syntax: '<length>', initialValue: '0px'});

+CSS.registerProperty({name: '--registered-length-2', syntax: '<length>', initialValue: '0px'});

+CSS.registerProperty({name: '--registered-length-3', syntax: '<length>', initialValue: '0px'});

+CSS.registerProperty({name: '--registered-length-4', syntax: '<length>', initialValue: '0px'});

+CSS.registerProperty({name: '--registered-length-5', syntax: '<length>', initialValue: '0px'});

+CSS.registerProperty({name: '--registered-length-6', syntax: '<length>', initialValue: '0px'});

+CSS.registerProperty({name: '--registered-length-invalid', syntax: '<length>', initialValue: '15px'});

+test(function() {

+ computedStyle = getComputedStyle(element);

+ assert_equals(computedStyle.getPropertyValue('--registered-length-1'), '10px');

+ assert_equals(computedStyle.getPropertyValue('--registered-length-2'), '10px');

+ assert_equals(computedStyle.getPropertyValue('--registered-length-3'), '20px');

+ assert_equals(computedStyle.getPropertyValue('--registered-length-4'), '60px');

+ assert_equals(computedStyle.getPropertyValue('--registered-length-5'), '70px');

+ assert_equals(computedStyle.getPropertyValue('--registered-length-6'), '80px');

+ assert_equals(computedStyle.getPropertyValue('--length-1'), ' 20px');

+ assert_equals(computedStyle.getPropertyValue('--length-2'), ' 10px');

+ assert_equals(computedStyle.getPropertyValue('--registered-length-invalid'), '15px');

+}, "var() references work with registered properties");

+</script>