Skip to content

Commit fdaf3a6

Browse files
marco-cmarco-c
committed
Bug 1949857 [wpt PR 50878] - Add CSS Color 4 gradient options to CanvasGradient, a=testonly
Automatic update from web-platform-tests Add CSS Color 4 gradient options to CanvasGradient Add ColorInterpolationMethod, HueInterpolationMethod and premultipliedAlpha attributes to CanvasGradient as described here: whatwg/html#7947 This is done behind the flag CanvasGradientCSSColor4, as spec is not yet settled: whatwg/html#10986 Chromestatus: https://chromestatus.com/feature/5168382242193408 I2P thread: https://groups.google.com/a/chromium.org/g/blink-dev/c/6PhsIK2kxeM Gradient::ColorInterpolation is also renamed to Gradient::PremultipliedAlpha, because that's what it is. Subpixel antialiasing for test labels is being inconsistently applied on windows, so the tests are marked as failing with a bug. crbug.com/396344375 Bug: 394052224 Change-Id: I6b1092376d08c051b161f83c82d585bd03cd4131 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6226021 Reviewed-by: Chris Harrelson <chrishtrchromium.org> Commit-Queue: Aaron Krajeski <aaronhkchromium.org> Cr-Commit-Position: refs/heads/main{#1423255} -- wpt-commits: fa9792e79e03bcdb6ce8a913c74981cbebe77756 wpt-pr: 50878 UltraBlame original commit: f95ce76846e9f8b4d9cce5a7926d6b2778608be2
1 parent efe2210 commit fdaf3a6

12 files changed

+4422
-1
lines changed

‎testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.colorInterpolationMethod-expected.html

+250
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
<!DOCTYPE html>
2+
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
3+
<meta charset="UTF-8">
4+
<title>Canvas test: 2d.gradient.colorInterpolationMethod</title>
5+
<link rel="stylesheet" href="/html/canvas/resources/canvas-grid-reftest.css">
6+
<h1>2d.gradient.colorInterpolationMethod</h1>
7+
<p class="desc">CSS color spaces work as a CanvasGradient color interpolation methods</p>
8+
9+
<div class="grid-container" style="--grid-width: 5">
10+
<span>
11+
<div>srgb</div>
12+
<div class="grid-cell-content"
13+
style="width: 100px; height: 50px;">
14+
<style>
15+
#swatch-srgb {
16+
width: 100%;
17+
height: 100%;
18+
background: linear-gradient(to right in srgb,
19+
color(srgb 1 0 0), color(srgb 0 1 0));
20+
}
21+
</style>
22+
<div id="swatch-srgb"></div>
23+
</div>
24+
</span>
25+
26+
<span>
27+
<div>hsl</div>
28+
<div class="grid-cell-content"
29+
style="width: 100px; height: 50px;">
30+
<style>
31+
#swatch-hsl {
32+
width: 100%;
33+
height: 100%;
34+
background: linear-gradient(to right in hsl,
35+
color(srgb 1 0 0), color(srgb 0 1 0));
36+
}
37+
</style>
38+
<div id="swatch-hsl"></div>
39+
</div>
40+
</span>
41+
42+
<span>
43+
<div>hwb</div>
44+
<div class="grid-cell-content"
45+
style="width: 100px; height: 50px;">
46+
<style>
47+
#swatch-hwb {
48+
width: 100%;
49+
height: 100%;
50+
background: linear-gradient(to right in hwb,
51+
color(srgb 1 0 0), color(srgb 0 1 0));
52+
}
53+
</style>
54+
<div id="swatch-hwb"></div>
55+
</div>
56+
</span>
57+
58+
<span>
59+
<div>srgb-linear</div>
60+
<div class="grid-cell-content"
61+
style="width: 100px; height: 50px;">
62+
<style>
63+
#swatch-srgb-linear {
64+
width: 100%;
65+
height: 100%;
66+
background: linear-gradient(to right in srgb-linear,
67+
color(srgb 1 0 0), color(srgb 0 1 0));
68+
}
69+
</style>
70+
<div id="swatch-srgb-linear"></div>
71+
</div>
72+
</span>
73+
74+
<span>
75+
<div>display-p3</div>
76+
<div class="grid-cell-content"
77+
style="width: 100px; height: 50px;">
78+
<style>
79+
#swatch-display-p3 {
80+
width: 100%;
81+
height: 100%;
82+
background: linear-gradient(to right in display-p3,
83+
color(srgb 1 0 0), color(srgb 0 1 0));
84+
}
85+
</style>
86+
<div id="swatch-display-p3"></div>
87+
</div>
88+
</span>
89+
90+
<span>
91+
<div>a98-rgb</div>
92+
<div class="grid-cell-content"
93+
style="width: 100px; height: 50px;">
94+
<style>
95+
#swatch-a98-rgb {
96+
width: 100%;
97+
height: 100%;
98+
background: linear-gradient(to right in a98-rgb,
99+
color(srgb 1 0 0), color(srgb 0 1 0));
100+
}
101+
</style>
102+
<div id="swatch-a98-rgb"></div>
103+
</div>
104+
</span>
105+
106+
<span>
107+
<div>prophoto-rgb</div>
108+
<div class="grid-cell-content"
109+
style="width: 100px; height: 50px;">
110+
<style>
111+
#swatch-prophoto-rgb {
112+
width: 100%;
113+
height: 100%;
114+
background: linear-gradient(to right in prophoto-rgb,
115+
color(srgb 1 0 0), color(srgb 0 1 0));
116+
}
117+
</style>
118+
<div id="swatch-prophoto-rgb"></div>
119+
</div>
120+
</span>
121+
122+
<span>
123+
<div>rec2020</div>
124+
<div class="grid-cell-content"
125+
style="width: 100px; height: 50px;">
126+
<style>
127+
#swatch-rec2020 {
128+
width: 100%;
129+
height: 100%;
130+
background: linear-gradient(to right in rec2020,
131+
color(srgb 1 0 0), color(srgb 0 1 0));
132+
}
133+
</style>
134+
<div id="swatch-rec2020"></div>
135+
</div>
136+
</span>
137+
138+
<span>
139+
<div>lab</div>
140+
<div class="grid-cell-content"
141+
style="width: 100px; height: 50px;">
142+
<style>
143+
#swatch-lab {
144+
width: 100%;
145+
height: 100%;
146+
background: linear-gradient(to right in lab,
147+
color(srgb 1 0 0), color(srgb 0 1 0));
148+
}
149+
</style>
150+
<div id="swatch-lab"></div>
151+
</div>
152+
</span>
153+
154+
<span>
155+
<div>oklab</div>
156+
<div class="grid-cell-content"
157+
style="width: 100px; height: 50px;">
158+
<style>
159+
#swatch-oklab {
160+
width: 100%;
161+
height: 100%;
162+
background: linear-gradient(to right in oklab,
163+
color(srgb 1 0 0), color(srgb 0 1 0));
164+
}
165+
</style>
166+
<div id="swatch-oklab"></div>
167+
</div>
168+
</span>
169+
170+
<span>
171+
<div>lch</div>
172+
<div class="grid-cell-content"
173+
style="width: 100px; height: 50px;">
174+
<style>
175+
#swatch-lch {
176+
width: 100%;
177+
height: 100%;
178+
background: linear-gradient(to right in lch,
179+
color(srgb 1 0 0), color(srgb 0 1 0));
180+
}
181+
</style>
182+
<div id="swatch-lch"></div>
183+
</div>
184+
</span>
185+
186+
<span>
187+
<div>oklch</div>
188+
<div class="grid-cell-content"
189+
style="width: 100px; height: 50px;">
190+
<style>
191+
#swatch-oklch {
192+
width: 100%;
193+
height: 100%;
194+
background: linear-gradient(to right in oklch,
195+
color(srgb 1 0 0), color(srgb 0 1 0));
196+
}
197+
</style>
198+
<div id="swatch-oklch"></div>
199+
</div>
200+
</span>
201+
202+
<span>
203+
<div>xyz</div>
204+
<div class="grid-cell-content"
205+
style="width: 100px; height: 50px;">
206+
<style>
207+
#swatch-xyz {
208+
width: 100%;
209+
height: 100%;
210+
background: linear-gradient(to right in xyz,
211+
color(srgb 1 0 0), color(srgb 0 1 0));
212+
}
213+
</style>
214+
<div id="swatch-xyz"></div>
215+
</div>
216+
</span>
217+
218+
<span>
219+
<div>xyz-d50</div>
220+
<div class="grid-cell-content"
221+
style="width: 100px; height: 50px;">
222+
<style>
223+
#swatch-xyz-d50 {
224+
width: 100%;
225+
height: 100%;
226+
background: linear-gradient(to right in xyz-d50,
227+
color(srgb 1 0 0), color(srgb 0 1 0));
228+
}
229+
</style>
230+
<div id="swatch-xyz-d50"></div>
231+
</div>
232+
</span>
233+
234+
<span>
235+
<div>xyz-d65</div>
236+
<div class="grid-cell-content"
237+
style="width: 100px; height: 50px;">
238+
<style>
239+
#swatch-xyz-d65 {
240+
width: 100%;
241+
height: 100%;
242+
background: linear-gradient(to right in xyz-d65,
243+
color(srgb 1 0 0), color(srgb 0 1 0));
244+
}
245+
</style>
246+
<div id="swatch-xyz-d65"></div>
247+
</div>
248+
</span>
249+
250+
</div>

0 commit comments

Comments
 (0)