-
-
Notifications
You must be signed in to change notification settings - Fork 84
Expand file tree
/
Copy pathbasic.css
More file actions
223 lines (191 loc) · 8.2 KB
/
basic.css
File metadata and controls
223 lines (191 loc) · 8.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
.test-color-multi-channel {
color-1: color(display-p3 1);
color-2: color(display-p3 1 / 0.5);
color-3: color(display-p3 1 1);
color-4: color(display-p3 1 1 / 0.5);
color-5: color(display-p3 1 1 1 1);
color-6: color(display-p3 1 1 1 1 / 0.5);
}
.test-case {
color-1: color(DISPLAY-P3 0 0 0);
color-3: color(display-P3 0 0 0 / CALC(1 + 1));
color-4: color(Display-P3 1 1 1 / VAR(--ALPHA));
}
.test-color-none {
color-1: color(display-p3 none);
color-3: color(display-p3 none none);
color-4: color(display-p3 none none none);
color-5: color(display-p3 1 none 1);
color-6: color(display-p3 1 none none);
color-7: color(display-p3 none 1 none);
color-8: color(display-p3 none none 1);
}
.test-css-color-5-interop {
color-1: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / alpha);
color-2: color(from color(a98-rgb 0.7 0.5 0.3) a98-rgb r g b / none);
color-3: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g b);
color-4: color(from color(prophoto-rgb 0.7 0.5 0.3) prophoto-rgb r g none);
}
.test-unknown-space {
color-1: color(unknown 0.64331 0.19245 0.16771);
}
.test-percentage-rgb {
color-1: color(srgb 64.331% 0.19245 0.16771);
color-2: color(srgb 0.64331 19.245% 0.16771);
color-3: color(srgb 0.64331 0.19245 16.771%);
}
.test-srgb {
color-1: color(srgb 0.64331 0.19245 0.16771);
color-2: color(srgb 0.64331 0.19245 0.16771 / 1);
color-3: color(srgb 0.64331 0.19245 0.16771 / .5);
color-4: color(srgb 0.64331 0.19245 0.16771 / 100%);
color-5: color(srgb 0.64331 0.19245 0.16771 / 50%);
color-6: color(srgb 0.81388 0.43646 0.57322);
color-7: color(srgb 0.81388 0.43646 foo);
}
.test-display-p3 {
color-1: color(display-p3 0.64331 0.19245 0.16771);
color-2: color(display-p3 0.64331 0.19245 0.16771 / 1);
color-3: color(display-p3 0.64331 0.19245 0.16771 / .5);
color-4: color(display-p3 0.64331 0.19245 0.16771 / 100%);
color-5: color(display-p3 0.64331 0.19245 0.16771 / 50%);
color-6: color(display-p3 0.81388 0.43646 0.57322);
color-7: color(display-p3 0.81388 0.43646 foo);
}
.test-display-p3-linear {
color-1: color(display-p3-linear 0.3081 0.014 0.0567);
color-2: color(display-p3-linear 0.3081 0.014 0.0567 / 0.3);
--color-3: color(display-p3-linear 0.3081 0.014 0.0567 / 0.3);
}
.test-linear-srgb {
color-1: color(srgb 0.691 0.139 0.259);
color-2: color(srgb-linear 0.435 0.017 0.055);
}
.test-xyz {
color-1: color(xyz-d50 0.2005 0.14089 0.4472);
color-2: color(xyz-d65 0.21661 0.14602 0.59452);
color-3: color(xyz 0.21661 0.14602 0.59452);
}
.test-percentage-xyz {
color-1: color(xyz-d50 64.331% 0.19245 0.16771);
color-2: color(xyz-d65 0.64331 19.245% 0.16771);
color-3: color(xyz 0.64331 0.19245 16.771%);
}
.test-author-provided-fallback {
color: rgb(0, 0, 0);
color: color(display-p3 1 1 1);
}
/* this will most likely be a mistake by the author */
.test-author-provided-override {
color: color(display-p3 1 1 1);
color: rgb(0, 0, 0);
}
.test-alpha {
color-1: color(display-p3 0.02472 0.01150 0.00574 / 1);
color-2: color(display-p3 0.02472 0.01150 0.00574 / calc(33 / 22));
color-3: color(display-p3 0.02472 0.01150 0.00574 / calc(20% * 5));
color-4: color(display-p3 0.02472 0.01150 0.00574 / var(--foo));
color-5: color(display-p3 0.02472 0.01150 0.00574 /);
}
.test-ignore {
prop-1: 'color(display-p3 0.02472 0.01150 0.00574 / 1)';
prop-2: url('color(display-p3 0.02472 0.01150 0.00574 / 1)');
}
.test-unparseable-lab-function {
background-image: color(; );
}
.test-gamut {
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B48%2C-53%2C12%5D%2C%5B58%2C-54%2C69%5D%5D */
/* out */
prop-1: color(display-p3 0.00000 0.51872 0.36985);
/* out */
prop-2: color(display-p3 0.31275 0.62335 0.08647);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B45%2C-13%2C29%5D%2C%5B77%2C33%2C97%5D%5D */
/* in */
prop-3: color(display-p3 0.39215 0.43776 0.24705);
/* out */
prop-4: color(display-p3 0.99733 0.66278 0.12085);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B76%2C-29%2C-23%5D%2C%5B16%2C-32%2C24%5D%5D */
/* in */
prop-5: color(display-p3 0.46284 0.78863 0.88439);
/* out */
prop-6: color(display-p3 0.00652 0.18999 0.01056);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B85%2C16%2C29%5D%2C%5B55%2C-42%2C58%5D%5D */
/* out */
prop-7: color(display-p3 0.96684 0.79482 0.64336);
/* out */
prop-8: color(display-p3 0.35483 0.57788 0.15007);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B87%2C-94%2C103%5D%2C%5B88%2C-9%2C62%5D%5D */
/* out */
prop-9: color(display-p3 0.32231 0.99185 0.02928);
/* in */
prop-10: color(display-p3 0.90245 0.87996 0.45339);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B69%2C-35%2C-39%5D%2C%5B68%2C61%2C39%5D%5D */
/* out */
prop-11: color(display-p3 0.16541 0.72332 0.91352);
/* out */
prop-12: color(display-p3 0.99104 0.47662 0.41939);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C74%5D%2C%5B65%2C81%2C-13%5D%5D */
/* out */
prop-13: color(display-p3 0.49844 0.61099 0.07831);
/* out */
prop-14: color(display-p3 0.99687 0.35134 0.71095);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B60%2C-28%2C15%5D%2C%5B65%2C81%2C-11%5D%5D */
/* in */
prop-15: color(display-p3 0.43165 0.61289 0.47061);
/* out */
prop-16: color(display-p3 0.99937 0.35096 0.69833);
/* https://romainmenke.github.io/lab-lch-display-p3/lab-interactive-b.html#%5B%5B78%2C-64%2C-44%5D%2C%5B76%2C81%2C-11%5D%5D */
/* out */
prop-17: color(display-p3 0.00000 0.83784 0.97033);
/* out */
prop-18: color(display-p3 1.00000 0.62326 0.79886);
}
.test-out-of-range-values-srgb {
color-1: color(srgb 0.5 0 1);
color-2: color(srgb 0.5 -0.2 1);
color-3: color(srgb 0.1 1 0.1);
color-4: color(srgb 0.1 1.1 0.1);
}
.test-lime {
color-1: color(srgb 0.0005556487875468122 0.9999999999999999 -0.00220276712790066);
color-2: color(srgb-linear 0.000043006872101146454 0.9999999999999999 -0.00017049281175701703);
color-3: color(a98-rgb 0.565 1 0.234);
color-4: color(prophoto-rgb 0.5402796954751572 0.9275945561561767 0.30435477084804174);
color-5: color(display-p3 0.45844420720487417 0.9852652233445233 0.29798036139719497);
color-6: color(rec2020 0.5675603321833232 0.9592792129938423 0.2686829491074993);
color-7: color(xyz-d50 0.3851458288094242 0.7168862873215868 0.09696013568183873);
color-8: color(xyz-d65 0.35757130434515494 0.7151655154354521 0.11903355225337156);
color-9: color(xyz 0.35757130434515494 0.7151655154354521 0.11903355225337156);
}
.test-blue-teal {
color-1: color(srgb -0.13610556145124594 0.5177053690420603 0.540031109817831);
color-2: color(srgb-linear -0.01656723676661187 0.23079644121427306 0.25298181882824156);
color-3: color(a98-rgb 0.265 0.5134 0.5344);
color-4: color(prophoto-rgb 0.28284813138491105 0.41695332740189284 0.4586239337463392);
color-5: color(display-p3 0.18049383596973329 0.5091259470889726 0.5339002129941044);
color-6: color(rec2020 0.3584374937329418 0.5234107856368522 0.548844528912945);
color-7: color(xyz-d50 0.11786343156307554 0.1771045882551784 0.2028294891298204);
color-8: color(xyz-d65 0.12135537506539545 0.1797988884168019 0.2676568254682071);
color-9: color(xyz 0.12135537506539545 0.1797988884168019 0.2676568254682071);
}
.test-bright-purple {
color-1: color(srgb 0.8978862558205767 0.4885001647805462 0.9594359763905097);
color-2: color(srgb-linear 0.7832360124544266 0.2035510416163499 0.9101924728483531);
color-3: color(a98-rgb 0.8035122804301492 0.484896415622613 0.9440692746539695);
color-4: color(prophoto-rgb 0.7596595159204217 0.4934889951894072 0.8985832663171222);
color-5: color(display-p3 0.843565234 0.509345345 0.9342344435);
color-6: color(rec2020 0.8075367152908116 0.5641142016050468 0.9339114003184052);
color-7: color(xyz-d50 0.5501693084815327 0.37536346388820246 0.6806345611398199);
color-8: color(xyz-d65 0.5600582450343325 0.37782875858447507 0.904570025128693);
color-9: color(xyz 0.5600582450343325 0.37782875858447507 0.904570025128693);
}
/* manual @supports */
@supports (color: color(display-p3 0 0 0)) and (contain: content) {
:root {
--one-a50-var: color(display-p3 0.1 0.1 0.1);
}
}
to-clone {
color: color(display-p3 1 0 0);
}