Unreviewed GTK test gardening
[WebKit-https.git] / LayoutTests / css-custom-properties-api / initialValueJS.html
1 <!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSCustomPropertiesAndValuesEnabled=true ] -->
2 <!-- https://chromium.googlesource.com/chromium/src/+/01ce431409e3a019858677626a983c55168da6dc/third_party/WebKit/LayoutTests/custom-properties/register-property.html -->
3 <script src="../resources/testharness.js"></script>
4 <script src="../resources/testharnessreport.js"></script>
5
6 <style>
7   #parent1 {
8     width: 500px;
9     background: blue;
10   }
11   #child1 {
12     background: green;
13     --my-custom-prop: 100px;
14     width: var(--my-custom-prop);
15   }
16
17   #parent2 {
18     width: 500px;
19     background: blue;
20   }
21   #child2 {
22     background: green;
23     width: var(--my-custom-prop2);
24   }
25
26   #parent3 {
27     width: 500px;
28     background: blue;
29   }
30   #child3 {
31     background: green;
32     width: var(--my-custom-prop3);
33   }
34
35   #parent4 {
36     width: 500px;
37     background: blue;
38   }
39   #child4 {
40     background: green;
41     width: var(--my-custom-prop3, 300px);
42   }
43
44   #parent5 {
45     width: 500px;
46     background: blue;
47   }
48   #child5 {
49     background: green;
50     width: var(--my-custom-prop2, 300px);
51   }
52 </style>
53 <div>
54   <p> Specified </p>
55   <div id="parent1"><div id="child1"><p>100px green</p></div> </div>
56   <p> Not specified, use initial value </p>
57   <div id="parent2"><div id="child2"><p>200px green</p></div> </div>
58   <p> Not specified, but not registered so use initial value for width </p>
59   <div id="parent3"><div id="child3"><p>500px green</p></div> </div>
60   <p> Has a fallback for unregistered property </p>
61   <div id="parent4"><div id="child4"><p>300px green</p></div> </div>
62   <p> Has a fallback for a registered property </p>
63   <div id="parent5"><div id="child5"><p>200px green</p></div> </div>
64 </div>
65 <script>
66
67 function test_prop(id, prop, expected) {
68   assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected);
69 }
70
71 test(function() {
72   CSS.registerProperty({
73     name: '--my-custom-prop',
74     syntax: '<length>',
75     inherits: false,
76     initialValue: '200px'
77   })
78
79   CSS.registerProperty({
80     name: '--my-custom-prop2',
81     syntax: '<length>',
82     inherits: false,
83     initialValue: '200px'
84   })
85 }, "Registration is successful");
86 test(function() {
87   test_prop('child1', 'width', '100px');
88   test_prop('child1', '--my-custom-prop', '100px');
89   test_prop('child1', '--my-custom-prop2', '200px');
90 }, "JS Attributes are valid for element 1");
91 test(function() {
92   test_prop('child2', 'width', '200px');
93   test_prop('child2', '--my-custom-prop', '200px');
94   test_prop('child2', '--my-custom-prop2', '200px');
95 }, "JS Attributes are valid for element 2");
96 test(function() {
97   test_prop('child3', 'width', '500px');
98   test_prop('child3', '--my-custom-prop3', '');
99   test_prop('child3', '--my-custom-prop2', '200px');
100 }, "JS Attributes are valid for element 3");
101 test(function() {
102   test_prop('child4', 'width', '300px');
103   test_prop('child5', 'width', '200px');
104   test_prop('child4', '--my-custom-prop2', '200px');
105   test_prop('child5', '--my-custom-prop2', '200px');
106 }, "JS Attributes are valid for element 4 and 5");
107 </script>