summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles
parentInitial commit. (diff)
downloadfirefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz
firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles')
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSHSL.html51
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSRGB.html60
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.transparency.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.default.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.halftransparent.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.semitransparent.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.solid.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.transparent.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidstring.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidtype.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.pngbin0 -> 221 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.html43
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.pngbin0 -> 112 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.pngbin0 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.pngbin0 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.pngbin0 -> 112 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.pngbin0 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.pngbin0 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.pngbin0 -> 112 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex7.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex8.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.pngbin0 -> 220 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.pngbin0 -> 205 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.pngbin0 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.pngbin0 -> 207 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.system.html30
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.pngbin0 -> 117 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.toStringFunctionCallback.html40
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.invalid.inputs.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.negative.rotation.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.positive.rotation.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.empty.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.pngbin0 -> 219 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.pngbin0 -> 219 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.pngbin0 -> 396 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.pngbin0 -> 256 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.outside.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.html52
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.pngbin0 -> 248 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap2.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.solid.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.pngbin0 -> 229 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fill.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillRect.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillText.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.stroke.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeRect.html43
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeText.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.nonfinite.html49
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.1.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.2.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.3.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.compare.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.crosscanvas.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.html37
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.pngbin0 -> 112 bytes
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidcolor.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidoffset.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.return.html35
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.type.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.update.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.behind.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.beside.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.bottom.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.cylinder.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.front.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape1.html53
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape2.html53
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.top.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.equal.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside1.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside2.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside3.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.negative.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.nonfinite.html101
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside1.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside2.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside3.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch1.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch2.html46
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch3.html44
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.1.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.2.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.3.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.animated.gif.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.canvas.html49
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.image.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.nocontext.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.type.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.zerocanvas.html43
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.crosscanvas.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.emptysrc.html30
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.immediate.html34
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.nosrc.html28
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.reload.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.removedsrc.html30
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent-but-loading.html32
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nosrc.html30
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.null.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.string.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.undefined.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zeroheight.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zerowidth.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas1.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas2.html49
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image1.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image2.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.basic.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord1.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord2.html43
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord3.html43
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.outside.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.canvas.html48
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.image.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.basic.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord1.html40
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord2.html36
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord3.html39
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.outside.html40
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.basic.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.coord1.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.outside.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.basic.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.coord1.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.outside.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.case.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.empty.html38
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.null.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.nullsuffix.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.undefined.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognised.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognisednull.html27
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.nonexistent.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zeroheight.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zerowidth.html29
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.identity.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.infinity.html42
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.invalid.html31
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.html45
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.transparency.html41
-rw-r--r--testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.default.html27
333 files changed, 8683 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSHSL.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSHSL.html
new file mode 100644
index 0000000000..cc48c2e147
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSHSL.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.CSSHSL</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.CSSHSL</h1>
+<p class="desc">CSSHSL works as color input</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("CSSHSL works as color input");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = new CSSHSL(CSS.deg(180), 0.5, 0.5);
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 50,25, 64,191,191,255, 3);
+
+const color = new CSSHSL(CSS.deg(180), 1, 1);
+ctx.fillStyle = color;
+_assertSame(ctx.fillStyle, '#ffffff', "ctx.fillStyle", "'#ffffff'");
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 255,255,255,255);
+color.l = 0.5;
+ctx.fillStyle = color;
+_assertSame(ctx.fillStyle, '#00ffff', "ctx.fillStyle", "'#00ffff'");
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,255,255);
+
+ctx.fillStyle = new CSSRGB(1, 0, 1).toHSL();
+_assertSame(ctx.fillStyle, '#ff00ff', "ctx.fillStyle", "'#ff00ff'");
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 255,0,255,255);
+
+color.h = CSS.deg(120);
+color.s = 1;
+color.l = 0.5;
+ctx.fillStyle = color;
+ctx.fillRect(0, 0, 100, 50);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSRGB.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSRGB.html
new file mode 100644
index 0000000000..0e3fcd4f67
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSRGB.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.CSSRGB</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.CSSRGB</h1>
+<p class="desc">CSSRGB works as color input</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("CSSRGB works as color input");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = new CSSRGB(1, 0, 1);
+_assertSame(ctx.fillStyle, '#ff00ff', "ctx.fillStyle", "'#ff00ff'");
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 255,0,255,255);
+
+const color = new CSSRGB(0, CSS.percent(50), 0);
+ctx.fillStyle = color;
+_assertSame(ctx.fillStyle, '#008000', "ctx.fillStyle", "'#008000'");
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,128,0,255);
+color.g = 0;
+ctx.fillStyle = color;
+_assertSame(ctx.fillStyle, '#000000', "ctx.fillStyle", "'#000000'");
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,255);
+
+color.alpha = 0;
+ctx.fillStyle = color;
+_assertSame(ctx.fillStyle, 'rgba(0, 0, 0, 0)', "ctx.fillStyle", "'rgba(0, 0, 0, 0)'");
+ctx.reset();
+color.alpha = 0.5;
+ctx.fillStyle = color;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,128);
+
+ctx.fillStyle = new CSSHSL(CSS.deg(0), 1, 1).toRGB();
+_assertSame(ctx.fillStyle, '#ffffff', "ctx.fillStyle", "'#ffffff'");
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 255,255,255,255);
+
+color.alpha = 1;
+color.g = 1;
+ctx.fillStyle = color;
+ctx.fillRect(0, 0, 100, 50);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.html
new file mode 100644
index 0000000000..02408138c2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.colorObject</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.colorObject</h1>
+<p class="desc">ctx.fillStyle works with color objects</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("ctx.fillStyle works with color objects");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = {r: 1, g: 0, b: 0};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 255,0,0,255);
+ctx.fillStyle = {r: 0, g: 0, b: 1};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,255,255);
+ctx.fillStyle = {r: 0.2, g: 0.4, b: 0.6};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 51,102,153,255);
+ctx.fillStyle = {r: 0, g: 1, b: 0};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+ctx.fillStyle = {r: -1, g: 0, b: 0};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,255);
+ctx.fillStyle = {r: 0, g: 2, b: 0};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.transparency.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.transparency.html
new file mode 100644
index 0000000000..09a8eacdec
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.transparency.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.colorObject.transparency</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.colorObject.transparency</h1>
+<p class="desc">ctx.fillStyle with color objects has transparency</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("ctx.fillStyle with color objects has transparency");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = {r: 0, g: 1, b: 0, a: 0};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+ctx.clearRect(0, 0, 100, 50);
+ctx.fillStyle = {r: 0, g: 1, b: 0, a: -1};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+ctx.clearRect(0, 0, 100, 50);
+ctx.fillStyle = {r: 0, g: 1, b: 0, a: 0.5};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,128);
+ctx.clearRect(0, 0, 100, 50);
+ctx.fillStyle = {r: 0, g: 1, b: 0, a: 1};
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.default.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.default.html
new file mode 100644
index 0000000000..31e051ae6c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.default.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.default</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.default</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+_assertSame(ctx.fillStyle, '#000000', "ctx.fillStyle", "'#000000'");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.halftransparent.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.halftransparent.html
new file mode 100644
index 0000000000..4101bf4ce9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.halftransparent.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.get.halftransparent</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.get.halftransparent</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = 'rgba(255,255,255,0.5)';
+_assertSame(ctx.fillStyle, 'rgba(255, 255, 255, 0.5)', "ctx.fillStyle", "'rgba(255, 255, 255, 0.5)'");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.semitransparent.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.semitransparent.html
new file mode 100644
index 0000000000..9f17847309
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.semitransparent.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.get.semitransparent</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.get.semitransparent</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = 'rgba(255,255,255,0.45)';
+assert_regexp_match(ctx.fillStyle, /^rgba\(255, 255, 255, 0\.4\d+\)$/);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.solid.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.solid.html
new file mode 100644
index 0000000000..9361389541
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.solid.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.get.solid</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.get.solid</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#fa0';
+_assertSame(ctx.fillStyle, '#ffaa00', "ctx.fillStyle", "'#ffaa00'");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.transparent.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.transparent.html
new file mode 100644
index 0000000000..fd381eb814
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.transparent.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.get.transparent</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.get.transparent</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = 'rgba(0,0,0,0)';
+_assertSame(ctx.fillStyle, 'rgba(0, 0, 0, 0)', "ctx.fillStyle", "'rgba(0, 0, 0, 0)'");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidstring.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidstring.html
new file mode 100644
index 0000000000..16bb9235c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidstring.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.invalidstring</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.invalidstring</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#0f0';
+ctx.fillStyle = 'invalid';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidtype.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidtype.html
new file mode 100644
index 0000000000..d218368359
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidtype.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.invalidtype</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.invalidtype</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#0f0';
+ctx.fillStyle = null;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html
new file mode 100644
index 0000000000..12a338e066
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html
new file mode 100644
index 0000000000..71db4187ac
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0% / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html
new file mode 100644
index 0000000000..6c84e94b03
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html
new file mode 100644
index 0000000000..d37965702e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html
new file mode 100644
index 0000000000..62ad91f1db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html
new file mode 100644
index 0000000000..9c879828d0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html
new file mode 100644
index 0000000000..c3e2334d44
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-7</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-7</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-7.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(133.33333333grad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html
new file mode 100644
index 0000000000..b9baf11e2b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-8</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-8</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-8.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(2.0943951024rad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html
new file mode 100644
index 0000000000..274585c3c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsl-9</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsl-9</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsl-9.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(0.3333333333turn, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html
new file mode 100644
index 0000000000..e4a5cbc094
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html
new file mode 100644
index 0000000000..976bf71b87
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120 100.0% 50.0% / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html
new file mode 100644
index 0000000000..16100e6a94
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html
new file mode 100644
index 0000000000..eb0158e392
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html
new file mode 100644
index 0000000000..c1b7c566b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html
new file mode 100644
index 0000000000..06aa355d25
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120deg, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html
new file mode 100644
index 0000000000..eb66e2748a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-7</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-7</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-7.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(133.33333333grad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html
new file mode 100644
index 0000000000..0c13368ac2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-8</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-8</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-8.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(2.0943951024rad, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html
new file mode 100644
index 0000000000..fd2cedd56d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-hsla-9</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-hsla-9</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-hsla-9.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(0.3333333333turn, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html
new file mode 100644
index 0000000000..7fa79bf07d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0, 255.0, 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html
new file mode 100644
index 0000000000..89ef2183a7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0, 255, 0, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html
new file mode 100644
index 0000000000..6be6f06067
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0, 255, 0, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html
new file mode 100644
index 0000000000..23c69bd939
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0 255 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html
new file mode 100644
index 0000000000..b853fbf353
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0 255 0 / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html
new file mode 100644
index 0000000000..8a62fa22d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgb-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgb-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgb-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0 255 0 / 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html
new file mode 100644
index 0000000000..66834dd706
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255.0, 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html
new file mode 100644
index 0000000000..4a4cb78c62
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html
new file mode 100644
index 0000000000..51e9468786
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255, 0, 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html
new file mode 100644
index 0000000000..07a65ac8f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0 255 0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html
new file mode 100644
index 0000000000..2f798f47f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0 255 0 / 0.2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html
new file mode 100644
index 0000000000..5ca7564a05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.css-color-4-rgba-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.css-color-4-rgba-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.css-color-4-rgba-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0 255 0 / 20%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,51);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png
new file mode 100644
index 0000000000..c5661de82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html
new file mode 100644
index 0000000000..e48d05ceab
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.current.basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.current.basic</h1>
+<p class="desc">currentColor is computed from the canvas element</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("currentColor is computed from the canvas element");
+_addTest(function(canvas, ctx) {
+
+canvas.setAttribute('style', 'color: #0f0');
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'currentColor';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.html
new file mode 100644
index 0000000000..f298af5adb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.current.changed</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.current.changed</h1>
+<p class="desc">currentColor is computed when the attribute is set, not when it is painted</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("currentColor is computed when the attribute is set, not when it is painted");
+_addTest(function(canvas, ctx) {
+
+canvas.setAttribute('style', 'color: #0f0');
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'currentColor';
+canvas.setAttribute('style', 'color: #f00');
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.html
new file mode 100644
index 0000000000..2642b888e9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.current.removed</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.current.removed</h1>
+<p class="desc">currentColor is solid black when the canvas element is not in a document</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.current.removed.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("currentColor is solid black when the canvas element is not in a document");
+_addTest(function(canvas, ctx) {
+
+// Try not to let it undetectably incorrectly pick up opaque-black
+// from other parts of the document:
+document.body.parentNode.setAttribute('style', 'color: #f00');
+document.body.setAttribute('style', 'color: #f00');
+canvas.setAttribute('style', 'color: #f00');
+
+var canvas2 = document.createElement('canvas');
+var ctx2 = canvas2.getContext('2d');
+ctx2.fillStyle = '#f00';
+ctx2.fillStyle = 'currentColor';
+ctx2.fillRect(0, 0, 100, 50);
+ctx.drawImage(canvas2, 0, 0);
+
+document.body.parentNode.removeAttribute('style');
+document.body.removeAttribute('style');
+
+_assertPixel(canvas, 50,25, 0,0,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.png
new file mode 100644
index 0000000000..d638d03386
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.html
new file mode 100644
index 0000000000..9fbb275014
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hex3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hex3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hex3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.html
new file mode 100644
index 0000000000..fc79cc7d3f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hex4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hex4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hex4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = '#0f0f';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.html
new file mode 100644
index 0000000000..b946c30e17
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hex6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hex6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hex6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = '#00fF00';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.html
new file mode 100644
index 0000000000..5865e98f3f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hex8</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hex8</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hex8.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = '#00ff00ff';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.html
new file mode 100644
index 0000000000..e169904889
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120, 100%, 50%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.html
new file mode 100644
index 0000000000..ec61f580eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl( -240 , 100% , 50% )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.html
new file mode 100644
index 0000000000..0ec6fce487
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(360120, 100%, 50%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.html
new file mode 100644
index 0000000000..b3119da927
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(-360240, 100%, 50%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.html
new file mode 100644
index 0000000000..1867bba7cb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120.0, 100.0%, 50.0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.html
new file mode 100644
index 0000000000..7a5e764d95
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(+120, +100%, +50%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html
new file mode 100644
index 0000000000..f623320cd5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-clamp-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120, 200%, 50%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html
new file mode 100644
index 0000000000..0293acd9eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-clamp-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120, -200%, 49.9%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 127,127,127,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png
new file mode 100644
index 0000000000..88fd827985
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html
new file mode 100644
index 0000000000..2ea1a5115a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-clamp-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120, 100%, 200%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 255,255,255,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png
new file mode 100644
index 0000000000..bf48767a88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html
new file mode 100644
index 0000000000..add688ebc9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsl-clamp-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsl-clamp-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsl-clamp-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsl(120, 100%, -200%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png
new file mode 100644
index 0000000000..d638d03386
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.html
new file mode 100644
index 0000000000..38427cfc3a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla(120, 100%, 50%, 0.499)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,127);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.png
new file mode 100644
index 0000000000..2aa6265f06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.html
new file mode 100644
index 0000000000..01a83676ad
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla( 120.0 , 100.0% , 50.0% , 1 )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html
new file mode 100644
index 0000000000..b7914e3a02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-clamp-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla(120, 200%, 50%, 1)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html
new file mode 100644
index 0000000000..94b6237456
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-clamp-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla(120, -200%, 49.9%, 1)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 127,127,127,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png
new file mode 100644
index 0000000000..88fd827985
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html
new file mode 100644
index 0000000000..bc2466b6b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-clamp-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla(120, 100%, 200%, 1)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 255,255,255,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png
new file mode 100644
index 0000000000..bf48767a88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html
new file mode 100644
index 0000000000..35c0d00011
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-clamp-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla(120, 100%, -200%, 1)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png
new file mode 100644
index 0000000000..d638d03386
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html
new file mode 100644
index 0000000000..13fac2fd58
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-clamp-5</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla(120, 100%, 50%, 2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html
new file mode 100644
index 0000000000..ba76ad6a99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.hsla-clamp-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.hsla-clamp-6</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.hsla-clamp-6.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'hsla(120, 100%, 0%, -2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.html
new file mode 100644
index 0000000000..ae54397c92
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.html4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.html4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.html4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'limE';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html
new file mode 100644
index 0000000000..1850125baa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100%, 50% / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html
new file mode 100644
index 0000000000..b4fd4a6fd9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0 100% 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html
new file mode 100644
index 0000000000..224da3a981
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100% 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html
new file mode 100644
index 0000000000..0e4b77ba80
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-4</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0 100% 50% /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html
new file mode 100644
index 0000000000..08e03db12f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsl-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsl-5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100%, 50% /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html
new file mode 100644
index 0000000000..62f82953fd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsla-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsla-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0, 100%, 50% / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html
new file mode 100644
index 0000000000..d6b78e923d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsla-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsla-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0 100% 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html
new file mode 100644
index 0000000000..c5717406a2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-hsla-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-hsla-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0, 100% 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html
new file mode 100644
index 0000000000..01ff94e8b0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(255, 0, 0 / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html
new file mode 100644
index 0000000000..2b782e35fc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(255 0 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html
new file mode 100644
index 0000000000..54849f6c55
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(255, 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html
new file mode 100644
index 0000000000..97d5748aaf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-4</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(0 0 0 /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html
new file mode 100644
index 0000000000..666c3c3d3e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgb-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgb-5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(0, 0, 0 /)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html
new file mode 100644
index 0000000000..fefe336c19
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgba-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgba-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0, 0 / 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html
new file mode 100644
index 0000000000..bf12006745
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgba-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgba-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255 0 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html
new file mode 100644
index 0000000000..a4e4e906af
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.css-color-4-rgba-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.css-color-4-rgba-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.html
new file mode 100644
index 0000000000..04c67e343e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#f'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex2.html
new file mode 100644
index 0000000000..7027db50ca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#f0'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex3.html
new file mode 100644
index 0000000000..ae7a32a5a4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#g00'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex4.html
new file mode 100644
index 0000000000..d355309c19
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex4</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#fg00'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex5.html
new file mode 100644
index 0000000000..0b80566b8c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#ff000'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex6.html
new file mode 100644
index 0000000000..02b75c3aba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex6</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#fg0000'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex7.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex7.html
new file mode 100644
index 0000000000..6a73bc1f75
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex7.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex7</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex7</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#ff0000f'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex8.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex8.html
new file mode 100644
index 0000000000..3a03959ec4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex8.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hex8</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hex8</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '#fg0000ff'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-1.html
new file mode 100644
index 0000000000..38a01fc107
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsl-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsl-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0%, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-2.html
new file mode 100644
index 0000000000..6783a18e87
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsl-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsl-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(z, 100%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-3.html
new file mode 100644
index 0000000000..8f9137e4d7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsl-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsl-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 0, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-4.html
new file mode 100644
index 0000000000..56c7228b41
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsl-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsl-4</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100%, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html
new file mode 100644
index 0000000000..df84f6854f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsl-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsl-5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100.%, 50%)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html
new file mode 100644
index 0000000000..2a7d0753d9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsl-6</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsl-6</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsl(0, 100%, 50%,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-1.html
new file mode 100644
index 0000000000..5d22135c5c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsla-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsla-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0%, 100%, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.html
new file mode 100644
index 0000000000..f1a29cdac2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsla-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsla-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0, 0, 50%, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html
new file mode 100644
index 0000000000..e48d086ef2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.hsla-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.hsla-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'hsla(0, 0, 50%, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.html
new file mode 100644
index 0000000000..80433bcffd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.name-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.name-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'darkbrown'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-2.html
new file mode 100644
index 0000000000..e1a49f97c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.name-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.name-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'firebrick1'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-3.html
new file mode 100644
index 0000000000..c8a7f2e658
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.name-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.name-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'red blue'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-4.html
new file mode 100644
index 0000000000..b9c491fd31
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.name-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.name-4</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '"red"'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-5.html
new file mode 100644
index 0000000000..15dab0bef5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.name-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.name-5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = '"red'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html
new file mode 100644
index 0000000000..7ab4a42fa8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgb-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgb-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(255.0, 0, 0,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html
new file mode 100644
index 0000000000..1aa36bb32b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgb-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgb-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(100%, 0, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html
new file mode 100644
index 0000000000..7ce48c1b7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgb-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgb-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgb(255, - 1, 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html
new file mode 100644
index 0000000000..d3bd36dcf2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgba-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgba-1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(100%, 0, 0, 1)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html
new file mode 100644
index 0000000000..0f468b66fa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgba-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgba-2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0, 0, 1. 0)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html
new file mode 100644
index 0000000000..20da461ad9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgba-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgba-3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0, 0, 1.)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html
new file mode 100644
index 0000000000..6dc36ea341
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgba-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgba-4</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0, 0, '; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html
new file mode 100644
index 0000000000..86afaa7097
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.invalid.rgba-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.invalid.rgba-5</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#0f0';
+try { ctx.fillStyle = 'rgba(255, 0, 0, 1,)'; } catch (e) { } // this shouldn't throw, but it shouldn't matter here if it does
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.html
new file mode 100644
index 0000000000..dfaac14637
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-clamp-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-clamp-1</h1>
+<p class="desc"></p>
+
+<p class="notes">Assumes colors are clamped to [0,255].
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-clamp-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(-1000, 1000, -1000)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.html
new file mode 100644
index 0000000000..5247f46731
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-clamp-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-clamp-2</h1>
+<p class="desc"></p>
+
+<p class="notes">Assumes colors are clamped to [0,255].
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-clamp-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(-200%, 200%, -200%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.html
new file mode 100644
index 0000000000..8db471c3c0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-clamp-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-clamp-3</h1>
+<p class="desc"></p>
+
+<p class="notes">Assumes colors are clamped to [0,255].
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-clamp-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(-2147483649, 4294967298, -18446744073709551619)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.html
new file mode 100644
index 0000000000..e7a210f48d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-clamp-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-clamp-4</h1>
+<p class="desc"></p>
+
+<p class="notes">Assumes colors are clamped to [0,255].
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-clamp-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(-1000000000000000000000000000000000000000, 1000000000000000000000000000000000000000, -1000000000000000000000000000000000000000)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.html
new file mode 100644
index 0000000000..1f1e9ef70f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-clamp-5</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-clamp-5</h1>
+<p class="desc"></p>
+
+<p class="notes">Assumes colors are clamped to [0,255].
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-clamp-5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(-10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, 10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000, -10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.html
new file mode 100644
index 0000000000..b69c779a7a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-eof</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-eof</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-eof.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0, 255, 0';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.html
new file mode 100644
index 0000000000..7d9d5eda56
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-num</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-num</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-num.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0,255,0)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.html
new file mode 100644
index 0000000000..ea5529c0ee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgb-percent</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgb-percent</h1>
+<p class="desc"></p>
+
+<p class="notes">CSS3 Color says "The integer value 255 corresponds to 100%". (In particular, it is not 254...)
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgb-percent.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgb(0% ,100% ,0%)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.html
new file mode 100644
index 0000000000..c5816e0660
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-clamp-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-clamp-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-clamp-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255, 0, -2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.html
new file mode 100644
index 0000000000..69a55cfc9a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-clamp-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-clamp-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-clamp-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255, 0, 2)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.html
new file mode 100644
index 0000000000..12c296dcfb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-eof</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-eof</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-eof.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0, 255, 0, 1';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.html
new file mode 100644
index 0000000000..41968883df
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-num-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-num-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-num-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba( 0 , 255 , 0 , .499 )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,127);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.png
new file mode 100644
index 0000000000..2aa6265f06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.html
new file mode 100644
index 0000000000..f7fb6185ea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-num-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-num-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-num-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba( 0 , 255 , 0 , 0.499 )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,127);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.png
new file mode 100644
index 0000000000..2aa6265f06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.html
new file mode 100644
index 0000000000..3f1a7305bd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-percent</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-percent</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-percent.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba(0%,100%,0%,0.499)';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,127);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.png
new file mode 100644
index 0000000000..2aa6265f06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.html
new file mode 100644
index 0000000000..efa7eb8928
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-solid-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-solid-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-solid-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1 )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.html
new file mode 100644
index 0000000000..eaf917e2c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-solid-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-solid-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-solid-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba( 0 , 255 , 0 , 1.0 )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.html
new file mode 100644
index 0000000000..c525f824a9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-solid-3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-solid-3</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-solid-3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba( 0 , 255 , 0 , +1 )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.html
new file mode 100644
index 0000000000..b7f96741bd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.rgba-solid-4</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.rgba-solid-4</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.rgba-solid-4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'rgba( -0 , 255 , +0 , 1 )';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.png
new file mode 100644
index 0000000000..2733836c99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.html
new file mode 100644
index 0000000000..9a9a280c47
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.svg-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.svg-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.svg-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'gray';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 128,128,128,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.png
new file mode 100644
index 0000000000..5bc39cc699
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.html
new file mode 100644
index 0000000000..26c2abec09
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.svg-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.svg-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.svg-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'grey';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 128,128,128,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.png
new file mode 100644
index 0000000000..5bc39cc699
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.system.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.system.html
new file mode 100644
index 0000000000..d6c6195176
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.system.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.system</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.system</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'ThreeDDarkShadow';
+assert_regexp_match(ctx.fillStyle, /^#(?!(FF0000|ff0000|f00)$)/); // test that it's not red
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.html
new file mode 100644
index 0000000000..9ab01f0cbb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.transparent-1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.transparent-1</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.transparent-1.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'transparent';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.html
new file mode 100644
index 0000000000..d7730a5504
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.parse.transparent-2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.parse.transparent-2</h1>
+<p class="desc"></p>
+
+<p class="notes">
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.fillStyle.parse.transparent-2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+
+ctx.fillStyle = '#f00';
+ctx.fillStyle = 'TrAnSpArEnT';
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.png
new file mode 100644
index 0000000000..eeedd0ff05
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.toStringFunctionCallback.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.toStringFunctionCallback.html
new file mode 100644
index 0000000000..d420bbfc36
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.toStringFunctionCallback.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillStyle.toStringFunctionCallback</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.fillStyle.toStringFunctionCallback</h1>
+<p class="desc">Passing a function in to ctx.fillStyle or ctx.strokeStyle with a toString callback works as specified</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Passing a function in to ctx.fillStyle or ctx.strokeStyle with a toString callback works as specified");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = { toString: function() { return "#008000"; } };
+_assertSame(ctx.fillStyle, "#008000", "ctx.fillStyle", "\"#008000\"");
+ctx.fillStyle = {};
+_assertSame(ctx.fillStyle, "#008000", "ctx.fillStyle", "\"#008000\"");
+ctx.fillStyle = 800000;
+_assertSame(ctx.fillStyle, "#008000", "ctx.fillStyle", "\"#008000\"");
+assert_throws_js(TypeError, function() { ctx.fillStyle = { toString: function() { throw new TypeError; } }; });
+ctx.strokeStyle = { toString: function() { return "#008000"; } };
+_assertSame(ctx.strokeStyle, "#008000", "ctx.strokeStyle", "\"#008000\"");
+ctx.strokeStyle = {};
+_assertSame(ctx.strokeStyle, "#008000", "ctx.strokeStyle", "\"#008000\"");
+ctx.strokeStyle = 800000;
+_assertSame(ctx.strokeStyle, "#008000", "ctx.strokeStyle", "\"#008000\"");
+assert_throws_js(TypeError, function() { ctx.strokeStyle = { toString: function() { throw new TypeError; } }; });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.invalid.inputs.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.invalid.inputs.html
new file mode 100644
index 0000000000..ab10f44b2f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.invalid.inputs.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.conic.invalid.inputs</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.conic.invalid.inputs</h1>
+<p class="desc">Conic gradient function with invalid inputs</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Conic gradient function with invalid inputs");
+_addTest(function(canvas, ctx) {
+
+assert_throws_js(TypeError, function() { ctx.createConicGradient(Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(-Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(NaN, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(0, -Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(0, NaN, 1); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(0, 0, -Infinity); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(0, 0, NaN); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createConicGradient(0, Infinity, Infinity); });
+
+const g = ctx.createConicGradient(0, 0, 25);
+assert_throws_js(TypeError, function() { g.addColorStop(-Infinity, '#f00'); });
+assert_throws_js(TypeError, function() { g.addColorStop(NaN, '#f00'); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, -Infinity); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, NaN); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.negative.rotation.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.negative.rotation.html
new file mode 100644
index 0000000000..f61b614f70
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.negative.rotation.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.conic.negative.rotation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.conic.negative.rotation</h1>
+<p class="desc">Conic gradient with negative rotation</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Conic gradient with negative rotation");
+_addTest(function(canvas, ctx) {
+
+const g = ctx.createConicGradient(-Math.PI/2, 50, 25);
+// It's red in the upper right region and green on the lower left region
+g.addColorStop(0, "#f00");
+g.addColorStop(0.25, "#0f0");
+g.addColorStop(0.50, "#0f0");
+g.addColorStop(0.75, "#f00");
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 25,15, 255,0,0,255, 3);
+_assertPixelApprox(canvas, 75,40, 0,255,0,255, 3);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.positive.rotation.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.positive.rotation.html
new file mode 100644
index 0000000000..ffe9586658
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.positive.rotation.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.conic.positive.rotation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.conic.positive.rotation</h1>
+<p class="desc">Conic gradient with positive rotation</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Conic gradient with positive rotation");
+_addTest(function(canvas, ctx) {
+
+const g = ctx.createConicGradient(3*Math.PI/2, 50, 25);
+// It's red in the upper right region and green on the lower left region
+g.addColorStop(0, "#f00");
+g.addColorStop(0.25, "#0f0");
+g.addColorStop(0.50, "#0f0");
+g.addColorStop(0.75, "#f00");
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 25,15, 255,0,0,255, 3);
+_assertPixelApprox(canvas, 75,40, 0,255,0,255, 3);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.empty.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.empty.html
new file mode 100644
index 0000000000..bdf702fb49
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.empty.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.empty</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.empty</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+var g = ctx.createLinearGradient(0, 0, 0, 50);
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.html
new file mode 100644
index 0000000000..e0ed47e03f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.alpha</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.alpha</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.gradient.interpolate.alpha.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#ff0';
+ctx.fillRect(0, 0, 100, 50);
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+g.addColorStop(0, 'rgba(0,0,255, 0)');
+g.addColorStop(1, 'rgba(0,0,255, 1)');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 25,25, 191,191,63,255, 3);
+_assertPixelApprox(canvas, 50,25, 127,127,127,255, 3);
+_assertPixelApprox(canvas, 75,25, 63,63,191,255, 3);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.png
new file mode 100644
index 0000000000..af5ac0f07d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.html
new file mode 100644
index 0000000000..e6806d7df1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.color</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.color</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.gradient.interpolate.color.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+g.addColorStop(0, '#ff0');
+g.addColorStop(1, '#00f');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 25,25, 191,191,63,255, 3);
+_assertPixelApprox(canvas, 50,25, 127,127,127,255, 3);
+_assertPixelApprox(canvas, 75,25, 63,63,191,255, 3);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.png
new file mode 100644
index 0000000000..af5ac0f07d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html
new file mode 100644
index 0000000000..33fee527d4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.coloralpha</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.coloralpha</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.gradient.interpolate.coloralpha.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+g.addColorStop(0, 'rgba(255,255,0, 0)');
+g.addColorStop(1, 'rgba(0,0,255, 1)');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 25,25, 190,190,65,65, 3);
+_assertPixelApprox(canvas, 50,25, 126,126,128,128, 3);
+_assertPixelApprox(canvas, 75,25, 62,62,192,192, 3);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.png
new file mode 100644
index 0000000000..552e6ee44b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.html
new file mode 100644
index 0000000000..adfac66d57
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.multiple</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.multiple</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.gradient.interpolate.multiple.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+canvas.width = 200;
+var g = ctx.createLinearGradient(0, 0, 200, 0);
+g.addColorStop(0, '#ff0');
+g.addColorStop(0.5, '#0ff');
+g.addColorStop(1, '#f0f');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 200, 50);
+_assertPixelApprox(canvas, 50,25, 127,255,127,255, 3);
+_assertPixelApprox(canvas, 100,25, 0,255,255,255, 3);
+_assertPixelApprox(canvas, 150,25, 127,127,255,255, 3);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.png
new file mode 100644
index 0000000000..86122450d3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.outside.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.outside.html
new file mode 100644
index 0000000000..abad0b5cb0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.outside.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.outside</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.outside</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(25, 0, 75, 0);
+g.addColorStop(0.4, '#0f0');
+g.addColorStop(0.6, '#0f0');
+
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 20,25, 0,255,0,255, 2);
+_assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+_assertPixelApprox(canvas, 80,25, 0,255,0,255, 2);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.html
new file mode 100644
index 0000000000..ecd61728c2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.overlap</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.overlap</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.gradient.interpolate.overlap.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+canvas.width = 200;
+var g = ctx.createLinearGradient(0, 0, 200, 0);
+g.addColorStop(0, '#f00');
+g.addColorStop(0, '#ff0');
+g.addColorStop(0.25, '#00f');
+g.addColorStop(0.25, '#0f0');
+g.addColorStop(0.25, '#0f0');
+g.addColorStop(0.25, '#0f0');
+g.addColorStop(0.25, '#ff0');
+g.addColorStop(0.5, '#00f');
+g.addColorStop(0.5, '#0f0');
+g.addColorStop(0.75, '#00f');
+g.addColorStop(0.75, '#f00');
+g.addColorStop(0.75, '#ff0');
+g.addColorStop(0.5, '#0f0');
+g.addColorStop(0.5, '#0f0');
+g.addColorStop(0.5, '#ff0');
+g.addColorStop(1, '#00f');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 200, 50);
+_assertPixelApprox(canvas, 49,25, 0,0,255,255, 16);
+_assertPixelApprox(canvas, 51,25, 255,255,0,255, 16);
+_assertPixelApprox(canvas, 99,25, 0,0,255,255, 16);
+_assertPixelApprox(canvas, 101,25, 255,255,0,255, 16);
+_assertPixelApprox(canvas, 149,25, 0,0,255,255, 16);
+_assertPixelApprox(canvas, 151,25, 255,255,0,255, 16);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.png
new file mode 100644
index 0000000000..5c2bb964e0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap2.html
new file mode 100644
index 0000000000..3b54469505
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap2.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.overlap2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.overlap2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+var ps = [ 0, 1/10, 1/4, 1/3, 1/2, 3/4, 1 ];
+for (var p = 0; p < ps.length; ++p)
+{
+ g.addColorStop(ps[p], '#0f0');
+ for (var i = 0; i < 15; ++i)
+ g.addColorStop(ps[p], '#f00');
+ g.addColorStop(ps[p], '#0f0');
+}
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 30,25, 0,255,0,255);
+_assertPixel(canvas, 40,25, 0,255,0,255);
+_assertPixel(canvas, 60,25, 0,255,0,255);
+_assertPixel(canvas, 80,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.solid.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.solid.html
new file mode 100644
index 0000000000..f6fa97475b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.solid.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.solid</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.solid</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+g.addColorStop(0, '#0f0');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.html
new file mode 100644
index 0000000000..5297996c06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.vertical</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.vertical</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.gradient.interpolate.vertical.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 0, 50);
+g.addColorStop(0, '#ff0');
+g.addColorStop(1, '#00f');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 50,12, 191,191,63,255, 10);
+_assertPixelApprox(canvas, 50,25, 127,127,127,255, 5);
+_assertPixelApprox(canvas, 50,37, 63,63,191,255, 10);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.png
new file mode 100644
index 0000000000..37d6a00c62
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fill.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fill.html
new file mode 100644
index 0000000000..8c6b944cff
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fill.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.zerosize.fill</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.zerosize.fill</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.rect(0, 0, 100, 50);
+ctx.fill();
+_assertPixel(canvas, 40,20, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillRect.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillRect.html
new file mode 100644
index 0000000000..3a7fe18a34
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillRect.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.zerosize.fillRect</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.zerosize.fillRect</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixel(canvas, 40,20, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillText.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillText.html
new file mode 100644
index 0000000000..619dc843e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillText.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.zerosize.fillText</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.zerosize.fillText</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.font = '100px sans-serif';
+ctx.fillText("AA", 0, 50);
+_assertGreen(ctx, 100, 50);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.stroke.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.stroke.html
new file mode 100644
index 0000000000..e5fb648202
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.stroke.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.zerosize.stroke</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.zerosize.stroke</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.strokeStyle = g;
+ctx.rect(20, 20, 60, 10);
+ctx.stroke();
+_assertPixel(canvas, 19,19, 0,255,0,255);
+_assertPixel(canvas, 20,19, 0,255,0,255);
+_assertPixel(canvas, 21,19, 0,255,0,255);
+_assertPixel(canvas, 19,20, 0,255,0,255);
+_assertPixel(canvas, 20,20, 0,255,0,255);
+_assertPixel(canvas, 21,20, 0,255,0,255);
+_assertPixel(canvas, 19,21, 0,255,0,255);
+_assertPixel(canvas, 20,21, 0,255,0,255);
+_assertPixel(canvas, 21,21, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeRect.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeRect.html
new file mode 100644
index 0000000000..54f49233b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeRect.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.zerosize.strokeRect</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.zerosize.strokeRect</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.strokeStyle = g;
+ctx.strokeRect(20, 20, 60, 10);
+_assertPixel(canvas, 19,19, 0,255,0,255);
+_assertPixel(canvas, 20,19, 0,255,0,255);
+_assertPixel(canvas, 21,19, 0,255,0,255);
+_assertPixel(canvas, 19,20, 0,255,0,255);
+_assertPixel(canvas, 20,20, 0,255,0,255);
+_assertPixel(canvas, 21,20, 0,255,0,255);
+_assertPixel(canvas, 19,21, 0,255,0,255);
+_assertPixel(canvas, 20,21, 0,255,0,255);
+_assertPixel(canvas, 21,21, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeText.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeText.html
new file mode 100644
index 0000000000..df8553d67e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeText.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.interpolate.zerosize.strokeText</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.interpolate.zerosize.strokeText</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(50, 25, 50, 25); // zero-length line (undefined direction)
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.strokeStyle = g;
+ctx.font = '100px sans-serif';
+ctx.strokeText("AA", 0, 50);
+_assertGreen(ctx, 100, 50);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.nonfinite.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.nonfinite.html
new file mode 100644
index 0000000000..2a7e270b34
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.nonfinite.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.linear.nonfinite</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.linear.nonfinite</h1>
+<p class="desc">createLinearGradient() throws TypeError if arguments are not finite</p>
+
+<p class="notes">Defined in "Web IDL" (draft)
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("createLinearGradient() throws TypeError if arguments are not finite");
+_addTest(function(canvas, ctx) {
+
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, 0, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(-Infinity, 0, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(NaN, 0, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, Infinity, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, -Infinity, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, NaN, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, Infinity, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, -Infinity, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, NaN, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, 1, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, 1, -Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, 1, NaN); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, Infinity, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, Infinity, Infinity, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, Infinity, 1, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, 0, Infinity, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(Infinity, 0, 1, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, Infinity, Infinity, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, Infinity, 1, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, Infinity, Infinity); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.1.html
new file mode 100644
index 0000000000..b2b1f78ffd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.1.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.linear.transform.1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.linear.transform.1</h1>
+<p class="desc">Linear gradient coordinates are relative to the coordinate space at the time of filling</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Linear gradient coordinates are relative to the coordinate space at the time of filling");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 200, 0);
+g.addColorStop(0, '#f00');
+g.addColorStop(0.25, '#0f0');
+g.addColorStop(0.75, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.translate(-50, 0);
+ctx.fillRect(50, 0, 100, 50);
+_assertPixel(canvas, 25,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 75,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.2.html
new file mode 100644
index 0000000000..49ff026226
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.2.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.linear.transform.2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.linear.transform.2</h1>
+<p class="desc">Linear gradient coordinates are relative to the coordinate space at the time of filling</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Linear gradient coordinates are relative to the coordinate space at the time of filling");
+_addTest(function(canvas, ctx) {
+
+ctx.translate(100, 0);
+var g = ctx.createLinearGradient(0, 0, 200, 0);
+g.addColorStop(0, '#f00');
+g.addColorStop(0.25, '#0f0');
+g.addColorStop(0.75, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.translate(-150, 0);
+ctx.fillRect(50, 0, 100, 50);
+_assertPixel(canvas, 25,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 75,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.3.html
new file mode 100644
index 0000000000..36f5e46972
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.3.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.linear.transform.3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.linear.transform.3</h1>
+<p class="desc">Linear gradient transforms do not experience broken caching effects</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Linear gradient transforms do not experience broken caching effects");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 200, 0);
+g.addColorStop(0, '#f00');
+g.addColorStop(0.25, '#0f0');
+g.addColorStop(0.75, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+ctx.translate(-50, 0);
+ctx.fillRect(50, 0, 100, 50);
+_assertPixel(canvas, 25,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 75,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.compare.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.compare.html
new file mode 100644
index 0000000000..cc20035d28
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.compare.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.compare</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.compare</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g1 = ctx.createLinearGradient(0, 0, 100, 0);
+var g2 = ctx.createLinearGradient(0, 0, 100, 0);
+_assertDifferent(g1, g2, "g1", "g2");
+ctx.fillStyle = g1;
+_assertSame(ctx.fillStyle, g1, "ctx.fillStyle", "g1");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.crosscanvas.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.crosscanvas.html
new file mode 100644
index 0000000000..3b185b4dfe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.crosscanvas.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.crosscanvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.crosscanvas</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+var g = document.createElement('canvas').getContext('2d').createLinearGradient(0, 0, 100, 0);
+g.addColorStop(0, '#0f0');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.html
new file mode 100644
index 0000000000..b0d5c01cae
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.current</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.current</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.gradient.object.current.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+canvas.setAttribute('style', 'color: #f00');
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+g.addColorStop(0, 'currentColor');
+g.addColorStop(1, 'currentColor');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 50,25, 0,0,0,255, 2);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.png b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.png
new file mode 100644
index 0000000000..d638d03386
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.png
Binary files differ
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidcolor.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidcolor.html
new file mode 100644
index 0000000000..3150e9c75a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidcolor.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.invalidcolor</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.invalidcolor</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, ""); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, 'rgb(NaN%, NaN%, NaN%)'); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, 'null'); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, 'undefined'); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, null); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, undefined); });
+
+var g = ctx.createRadialGradient(0, 0, 0, 100, 0, 0);
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, ""); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, 'rgb(NaN%, NaN%, NaN%)'); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, 'null'); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, 'undefined'); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, null); });
+assert_throws_dom("SYNTAX_ERR", function() { g.addColorStop(0, undefined); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidoffset.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidoffset.html
new file mode 100644
index 0000000000..b11a1a5c88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidoffset.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.invalidoffset</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.invalidoffset</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(0, 0, 100, 0);
+assert_throws_dom("INDEX_SIZE_ERR", function() { g.addColorStop(-1, '#000'); });
+assert_throws_dom("INDEX_SIZE_ERR", function() { g.addColorStop(2, '#000'); });
+assert_throws_js(TypeError, function() { g.addColorStop(Infinity, '#000'); });
+assert_throws_js(TypeError, function() { g.addColorStop(-Infinity, '#000'); });
+assert_throws_js(TypeError, function() { g.addColorStop(NaN, '#000'); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.return.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.return.html
new file mode 100644
index 0000000000..80af9caaa5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.return.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.return</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.return</h1>
+<p class="desc">createLinearGradient() and createRadialGradient() returns objects implementing CanvasGradient</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("createLinearGradient() and createRadialGradient() returns objects implementing CanvasGradient");
+_addTest(function(canvas, ctx) {
+
+window.CanvasGradient.prototype.thisImplementsCanvasGradient = true;
+
+var g1 = ctx.createLinearGradient(0, 0, 100, 0);
+_assertDifferent(g1.addColorStop, undefined, "g1.addColorStop", "undefined");
+_assertSame(g1.thisImplementsCanvasGradient, true, "g1.thisImplementsCanvasGradient", "true");
+
+var g2 = ctx.createRadialGradient(0, 0, 10, 0, 0, 20);
+_assertDifferent(g2.addColorStop, undefined, "g2.addColorStop", "undefined");
+_assertSame(g2.thisImplementsCanvasGradient, true, "g2.thisImplementsCanvasGradient", "true");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.type.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.type.html
new file mode 100644
index 0000000000..e79f8d0b2e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.type.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.type</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.type</h1>
+<p class="desc">window.CanvasGradient exists and has the right properties</p>
+
+<p class="notes">Defined in "Web IDL" (draft)
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("window.CanvasGradient exists and has the right properties");
+_addTest(function(canvas, ctx) {
+
+_assertDifferent(window.CanvasGradient, undefined, "window.CanvasGradient", "undefined");
+_assertDifferent(window.CanvasGradient.prototype.addColorStop, undefined, "window.CanvasGradient.prototype.addColorStop", "undefined");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.update.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.update.html
new file mode 100644
index 0000000000..b54b110c5f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.update.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.object.update</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.object.update</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createLinearGradient(-100, 0, 200, 0);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+g.addColorStop(0.1, '#0f0');
+g.addColorStop(0.9, '#0f0');
+ctx.fillRect(0, 0, 100, 50);
+_assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.behind.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.behind.html
new file mode 100644
index 0000000000..4200a1e7b8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.behind.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.behind</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.behind</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(120, 25, 10, 211, 25, 100);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.beside.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.beside.html
new file mode 100644
index 0000000000..ab183f9030
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.beside.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.beside</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.beside</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(0, 100, 40, 100, 100, 50);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.bottom.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.bottom.html
new file mode 100644
index 0000000000..872420b302
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.bottom.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.bottom</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.bottom</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 101);
+g.addColorStop(0, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.cylinder.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.cylinder.html
new file mode 100644
index 0000000000..fae7ef86ba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.cylinder.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.cylinder</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.cylinder</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(210, 25, 100, 230, 25, 100);
+g.addColorStop(0, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.front.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.front.html
new file mode 100644
index 0000000000..ff74382496
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.front.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.front</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.front</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(311, 25, 10, 210, 25, 100);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape1.html
new file mode 100644
index 0000000000..7e95eb25b2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape1.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.shape1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.shape1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var tol = 1; // tolerance to avoid antialiasing artifacts
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.fillStyle = '#f00';
+ctx.beginPath();
+ctx.moveTo(30+tol, 40);
+ctx.lineTo(110, -20+tol);
+ctx.lineTo(110, 100-tol);
+ctx.fill();
+
+var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
+g.addColorStop(0, '#0f0');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape2.html
new file mode 100644
index 0000000000..7ebe7d26c5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape2.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.shape2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.shape2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var tol = 1; // tolerance to avoid antialiasing artifacts
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(30+10*5/2, 40, 10*3/2, 30+10*15/4, 40, 10*9/4);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.fillStyle = '#0f0';
+ctx.beginPath();
+ctx.moveTo(30-tol, 40);
+ctx.lineTo(110, -20-tol);
+ctx.lineTo(110, 100+tol);
+ctx.fill();
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.top.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.top.html
new file mode 100644
index 0000000000..5db91b7ff6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.top.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.cone.top</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.cone.top</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(230, 25, 100, 100, 25, 101);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.equal.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.equal.html
new file mode 100644
index 0000000000..aeb4990eec
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.equal.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.equal</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.equal</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(50, 25, 20, 50, 25, 20);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside1.html
new file mode 100644
index 0000000000..102a31bf21
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside1.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.inside1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.inside1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(50, 25, 100, 50, 25, 200);
+g.addColorStop(0, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside2.html
new file mode 100644
index 0000000000..5b26ec5ebd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside2.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.inside2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.inside2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside3.html
new file mode 100644
index 0000000000..30612d458c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.inside3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.inside3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(50, 25, 200, 50, 25, 100);
+g.addColorStop(0, '#f00');
+g.addColorStop(0.993, '#f00');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.negative.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.negative.html
new file mode 100644
index 0000000000..ab2ecf2d2d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.negative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.negative</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.negative</h1>
+<p class="desc">createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("createRadialGradient() throws INDEX_SIZE_ERR if either radius is negative");
+_addTest(function(canvas, ctx) {
+
+assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createRadialGradient(0, 0, -0.1, 0, 0, 1); });
+assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createRadialGradient(0, 0, 1, 0, 0, -0.1); });
+assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createRadialGradient(0, 0, -0.1, 0, 0, -0.1); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.nonfinite.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.nonfinite.html
new file mode 100644
index 0000000000..b60266181a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.nonfinite.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.nonfinite</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.nonfinite</h1>
+<p class="desc">createRadialGradient() throws TypeError if arguments are not finite</p>
+
+<p class="notes">Defined in "Web IDL" (draft)
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("createRadialGradient() throws TypeError if arguments are not finite");
+_addTest(function(canvas, ctx) {
+
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(-Infinity, 0, 1, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(NaN, 0, 1, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, -Infinity, 1, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, NaN, 1, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, -Infinity, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, NaN, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, -Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, NaN, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, -Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, NaN, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, 0, -Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, 0, NaN); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, Infinity, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, Infinity, 1, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, Infinity, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(Infinity, 0, 1, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, Infinity, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, Infinity, 1, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, 0, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, Infinity, 0, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, Infinity, Infinity, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, Infinity, 0, Infinity); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, Infinity, Infinity); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside1.html
new file mode 100644
index 0000000000..cb1614455e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside1.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.outside1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.outside1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(200, 25, 10, 200, 25, 20);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#0f0');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside2.html
new file mode 100644
index 0000000000..6853849682
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside2.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.outside2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.outside2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
+g.addColorStop(0, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside3.html
new file mode 100644
index 0000000000..9330fcdefa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside3.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.outside3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.outside3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(200, 25, 20, 200, 25, 10);
+g.addColorStop(0, '#0f0');
+g.addColorStop(0.001, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch1.html
new file mode 100644
index 0000000000..3a13947d3c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch1.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.touch1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.touch1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(150, 25, 50, 200, 25, 100);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch2.html
new file mode 100644
index 0000000000..ca6c1b7e1f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch2.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.touch2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.touch2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(-80, 25, 70, 0, 25, 150);
+g.addColorStop(0, '#f00');
+g.addColorStop(0.01, '#0f0');
+g.addColorStop(0.99, '#0f0');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch3.html
new file mode 100644
index 0000000000..bd032a94de
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch3.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.touch3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.touch3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var g = ctx.createRadialGradient(120, -15, 25, 140, -30, 50);
+g.addColorStop(0, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.1.html
new file mode 100644
index 0000000000..505dd69829
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.transform.1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.transform.1</h1>
+<p class="desc">Radial gradient coordinates are relative to the coordinate space at the time of filling</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Radial gradient coordinates are relative to the coordinate space at the time of filling");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+g.addColorStop(0, '#0f0');
+g.addColorStop(0.5, '#0f0');
+g.addColorStop(0.51, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.translate(50, 25);
+ctx.scale(10, 10);
+ctx.fillRect(-5, -2.5, 10, 5);
+_assertPixel(canvas, 25,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 75,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.2.html
new file mode 100644
index 0000000000..d8d475fc5a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.2.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.transform.2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.transform.2</h1>
+<p class="desc">Radial gradient coordinates are relative to the coordinate space at the time of filling</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Radial gradient coordinates are relative to the coordinate space at the time of filling");
+_addTest(function(canvas, ctx) {
+
+ctx.translate(100, 0);
+var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+g.addColorStop(0, '#0f0');
+g.addColorStop(0.5, '#0f0');
+g.addColorStop(0.51, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.translate(-50, 25);
+ctx.scale(10, 10);
+ctx.fillRect(-5, -2.5, 10, 5);
+_assertPixel(canvas, 25,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 75,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.3.html
new file mode 100644
index 0000000000..ff27cb0cc8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.gradient.radial.transform.3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.gradient.radial.transform.3</h1>
+<p class="desc">Radial gradient transforms do not experience broken caching effects</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Radial gradient transforms do not experience broken caching effects");
+_addTest(function(canvas, ctx) {
+
+var g = ctx.createRadialGradient(0, 0, 0, 0, 0, 11.2);
+g.addColorStop(0, '#0f0');
+g.addColorStop(0.5, '#0f0');
+g.addColorStop(0.51, '#f00');
+g.addColorStop(1, '#f00');
+ctx.fillStyle = g;
+ctx.fillRect(0, 0, 100, 50);
+ctx.translate(50, 25);
+ctx.scale(10, 10);
+ctx.fillRect(-5, -2.5, 10, 5);
+_assertPixel(canvas, 25,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 75,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.animated.gif.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.animated.gif.html
new file mode 100644
index 0000000000..9b975228ea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.animated.gif.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.animated.gif</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.animated.gif</h1>
+<p class="desc">createPattern() of an animated GIF draws the first frame</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("createPattern() of an animated GIF draws the first frame");
+_addTest(function(canvas, ctx) {
+
+deferTest();
+step_timeout(function () {
+ var pattern = ctx.createPattern(document.getElementById('anim-gr.gif'), 'repeat');
+ ctx.fillStyle = pattern;
+ ctx.fillRect(0, 0, 50, 50);
+ step_timeout(t.step_func_done(function () {
+ ctx.fillRect(50, 0, 50, 50);
+ _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+ _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+ }), 250);
+}, 250);
+
+
+});
+</script>
+<img src="/images/anim-gr.gif" id="anim-gr.gif" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.canvas.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.canvas.html
new file mode 100644
index 0000000000..f0e50d0df5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.canvas.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.basic.canvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.basic.canvas</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var ctx2 = canvas2.getContext('2d');
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 0, 100, 50);
+
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.image.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.image.html
new file mode 100644
index 0000000000..31999965d1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.image.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.basic.image</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.basic.image</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+var img = document.getElementById('green.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.nocontext.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.nocontext.html
new file mode 100644
index 0000000000..09e0a0474a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.nocontext.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.basic.nocontext</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.basic.nocontext</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.type.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.type.html
new file mode 100644
index 0000000000..c07005e201
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.type.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.basic.type</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.basic.type</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+_assertDifferent(window.CanvasPattern, undefined, "window.CanvasPattern", "undefined");
+
+window.CanvasPattern.prototype.thisImplementsCanvasPattern = true;
+
+var img = document.getElementById('green.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+_assert(pattern.thisImplementsCanvasPattern, "pattern.thisImplementsCanvasPattern");
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.zerocanvas.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.zerocanvas.html
new file mode 100644
index 0000000000..eba1ad50fe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.zerocanvas.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.basic.zerocanvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.basic.zerocanvas</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+canvas.width = 0;
+canvas.height = 10;
+_assertSame(canvas.width, 0, "canvas.width", "0");
+_assertSame(canvas.height, 10, "canvas.height", "10");
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(canvas, 'repeat'); });
+
+canvas.width = 10;
+canvas.height = 0;
+_assertSame(canvas.width, 10, "canvas.width", "10");
+_assertSame(canvas.height, 0, "canvas.height", "0");
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(canvas, 'repeat'); });
+
+canvas.width = 0;
+canvas.height = 0;
+_assertSame(canvas.width, 0, "canvas.width", "0");
+_assertSame(canvas.height, 0, "canvas.height", "0");
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(canvas, 'repeat'); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.crosscanvas.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.crosscanvas.html
new file mode 100644
index 0000000000..cbda7d0a2d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.crosscanvas.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.crosscanvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.crosscanvas</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('green.png');
+
+var pattern = document.createElement('canvas').getContext('2d').createPattern(img, 'no-repeat');
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html
new file mode 100644
index 0000000000..9f1bb2d036
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.broken</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.broken</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('broken.png');
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(img, 'repeat'); });
+
+
+});
+</script>
+<img src="/images/broken.png" id="broken.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.emptysrc.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.emptysrc.html
new file mode 100644
index 0000000000..82b86241ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.emptysrc.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.incomplete.emptysrc</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.incomplete.emptysrc</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('red.png');
+img.src = "";
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.immediate.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.immediate.html
new file mode 100644
index 0000000000..91d92feab7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.immediate.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.incomplete.immediate</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.incomplete.immediate</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = new Image();
+img.src = '../images/red.png';
+// This triggers the "update the image data" algorithm.
+// The image will not go to the "completely available" state
+// until a fetch task in the networking task source is processed,
+// so the image must not be fully decodable yet:
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.nosrc.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.nosrc.html
new file mode 100644
index 0000000000..69d039994f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.nosrc.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.incomplete.nosrc</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.incomplete.nosrc</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = new Image();
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.reload.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.reload.html
new file mode 100644
index 0000000000..0acd089f8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.reload.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.incomplete.reload</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.incomplete.reload</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('yellow.png');
+img.src = '../images/red.png';
+// This triggers the "update the image data" algorithm,
+// and resets the image to the "unavailable" state.
+// The image will not go to the "completely available" state
+// until a fetch task in the networking task source is processed,
+// so the image must not be fully decodable yet:
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.removedsrc.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.removedsrc.html
new file mode 100644
index 0000000000..6df23c0c39
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.removedsrc.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.incomplete.removedsrc</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.incomplete.removedsrc</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('red.png');
+img.removeAttribute('src');
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent-but-loading.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent-but-loading.html
new file mode 100644
index 0000000000..fe2722fd88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent-but-loading.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.nonexistent-but-loading</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.nonexistent-but-loading</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.createElement("img");
+img.src = "/images/no-such-image-really.png";
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+img.src = "/images/no-such-image-really.png";
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent.html
new file mode 100644
index 0000000000..71a31e3626
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.nonexistent</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.nonexistent</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('no-such-image-really.png');
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(img, 'repeat'); });
+
+
+});
+</script>
+<img src="/images/no-such-image-really.png" id="no-such-image-really.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nosrc.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nosrc.html
new file mode 100644
index 0000000000..b1bcad566d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nosrc.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.nosrc</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.nosrc</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.createElement("img");
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.null.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.null.html
new file mode 100644
index 0000000000..0a9407ba55
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.null.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.null</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.null</h1>
+<p class="desc"></p>
+
+<p class="notes">Defined in "Web IDL" (draft)
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_js(TypeError, function() { ctx.createPattern(null, 'repeat'); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.string.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.string.html
new file mode 100644
index 0000000000..c612982e9c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.string.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.string</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.string</h1>
+<p class="desc"></p>
+
+<p class="notes">Defined in "Web IDL" (draft)
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_js(TypeError, function() { ctx.createPattern('../images/red.png', 'repeat'); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.undefined.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.undefined.html
new file mode 100644
index 0000000000..27fea1849a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.undefined.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.undefined</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.undefined</h1>
+<p class="desc"></p>
+
+<p class="notes">Defined in "Web IDL" (draft)
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_js(TypeError, function() { ctx.createPattern(undefined, 'repeat'); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zeroheight.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zeroheight.html
new file mode 100644
index 0000000000..aebf34e957
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zeroheight.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.zeroheight</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.zeroheight</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('red-zeroheight.svg');
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<img src="/images/red-zeroheight.svg" id="red-zeroheight.svg" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zerowidth.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zerowidth.html
new file mode 100644
index 0000000000..0e74363a15
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zerowidth.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.image.zerowidth</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.image.zerowidth</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('red-zerowidth.svg');
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<img src="/images/red-zerowidth.svg" id="red-zerowidth.svg" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas1.html
new file mode 100644
index 0000000000..066b30a9b8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.modify.canvas1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.modify.canvas1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var ctx2 = canvas2.getContext('2d');
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 0, 100, 50);
+
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+
+ctx2.fillStyle = '#f00';
+ctx2.fillRect(0, 0, 100, 50);
+
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas2.html
new file mode 100644
index 0000000000..10f9c0ab18
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas2.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.modify.canvas2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.modify.canvas2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var ctx2 = canvas2.getContext('2d');
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 0, 100, 50);
+
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx2.fillStyle = '#f00';
+ctx2.fillRect(0, 0, 100, 50);
+
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image1.html
new file mode 100644
index 0000000000..5ac850a446
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image1.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.modify.image1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.modify.image1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('green.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+deferTest();
+img.onload = t.step_func_done(function ()
+{
+ ctx.fillStyle = pattern;
+ ctx.fillRect(0, 0, 100, 50);
+
+ _assertPixel(canvas, 1,1, 0,255,0,255);
+ _assertPixel(canvas, 98,1, 0,255,0,255);
+ _assertPixel(canvas, 1,48, 0,255,0,255);
+ _assertPixel(canvas, 98,48, 0,255,0,255);
+});
+img.src = '/images/red.png';
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image2.html
new file mode 100644
index 0000000000..1c95aa0909
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image2.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.modify.image2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.modify.image2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('green.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#00f';
+ctx.fillRect(0, 0, 100, 50);
+deferTest();
+img.onload = t.step_func_done(function ()
+{
+ ctx.fillStyle = pattern;
+ ctx.fillRect(0, 0, 100, 50);
+
+ _assertPixel(canvas, 1,1, 0,255,0,255);
+ _assertPixel(canvas, 98,1, 0,255,0,255);
+ _assertPixel(canvas, 1,48, 0,255,0,255);
+ _assertPixel(canvas, 98,48, 0,255,0,255);
+});
+img.src = '/images/red.png';
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.basic.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.basic.html
new file mode 100644
index 0000000000..6b0fb8c309
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.basic.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.norepeat.basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.norepeat.basic</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('green.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord1.html
new file mode 100644
index 0000000000..1b1b9bb1b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord1.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.norepeat.coord1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.norepeat.coord1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 50, 50);
+ctx.fillStyle = '#f00';
+ctx.fillRect(50, 0, 50, 50);
+
+var img = document.getElementById('green.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.translate(50, 0);
+ctx.fillRect(-50, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord2.html
new file mode 100644
index 0000000000..c483e4f64e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord2.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.norepeat.coord2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.norepeat.coord2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('green.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 50, 50);
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(50, 0, 50, 50);
+
+ctx.fillStyle = pattern;
+ctx.translate(50, 0);
+ctx.fillRect(-50, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green.png" id="green.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord3.html
new file mode 100644
index 0000000000..733f728ad6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord3.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.norepeat.coord3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.norepeat.coord3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('red.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.translate(50, 25);
+ctx.fillRect(-50, -25, 100, 50);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 50, 25);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.outside.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.outside.html
new file mode 100644
index 0000000000..a7279943d4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.outside.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.norepeat.outside</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.norepeat.outside</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('red.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.fillStyle = pattern;
+ctx.fillRect(0, -50, 100, 50);
+ctx.fillRect(-100, 0, 100, 50);
+ctx.fillRect(0, 50, 100, 50);
+ctx.fillRect(100, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.canvas.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.canvas.html
new file mode 100644
index 0000000000..b45c95be1f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.canvas.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.orientation.canvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.orientation.canvas</h1>
+<p class="desc">Canvas patterns do not get flipped when painted</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Canvas patterns do not get flipped when painted");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var ctx2 = canvas2.getContext('2d');
+ctx2.fillStyle = '#f00';
+ctx2.fillRect(0, 0, 100, 25);
+ctx2.fillStyle = '#0f0';
+ctx2.fillRect(0, 25, 100, 25);
+
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 25);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.image.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.image.html
new file mode 100644
index 0000000000..a618223b06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.image.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.orientation.image</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.orientation.image</h1>
+<p class="desc">Image patterns do not get flipped when painted</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Image patterns do not get flipped when painted");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('rrgg-256x256.png');
+var pattern = ctx.createPattern(img, 'no-repeat');
+ctx.fillStyle = pattern;
+ctx.save();
+ctx.translate(0, -103);
+ctx.fillRect(0, 103, 100, 50);
+ctx.restore();
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 25);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/rrgg-256x256.png" id="rrgg-256x256.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.basic.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.basic.html
new file mode 100644
index 0000000000..238f155b2a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.basic.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeat.basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeat.basic</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('green-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green-16x16.png" id="green-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord1.html
new file mode 100644
index 0000000000..cfc270d379
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord1.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeat.coord1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeat.coord1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('rgrg-256x256.png');
+var pattern = ctx.createPattern(img, 'repeat');
+ctx.fillStyle = pattern;
+ctx.translate(-128, -78);
+ctx.fillRect(128, 78, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/rgrg-256x256.png" id="rgrg-256x256.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord2.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord2.html
new file mode 100644
index 0000000000..b05feec937
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord2.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeat.coord2</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeat.coord2</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('ggrr-256x256.png');
+var pattern = ctx.createPattern(img, 'repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/ggrr-256x256.png" id="ggrr-256x256.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord3.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord3.html
new file mode 100644
index 0000000000..223d8c0215
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord3.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeat.coord3</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeat.coord3</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('rgrg-256x256.png');
+var pattern = ctx.createPattern(img, 'repeat');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.translate(-128, -78);
+ctx.fillRect(128, 78, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/rgrg-256x256.png" id="rgrg-256x256.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.outside.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.outside.html
new file mode 100644
index 0000000000..ca140400d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.outside.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeat.outside</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeat.outside</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('green-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat');
+ctx.fillStyle = pattern;
+ctx.translate(50, 25);
+ctx.fillRect(-50, -25, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green-16x16.png" id="green-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.basic.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.basic.html
new file mode 100644
index 0000000000..9f2f871c0b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.basic.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeatx.basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeatx.basic</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 16);
+
+var img = document.getElementById('green-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat-x');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green-16x16.png" id="green-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.coord1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.coord1.html
new file mode 100644
index 0000000000..38ad51b237
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.coord1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeatx.coord1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeatx.coord1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('red-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat-x');
+ctx.fillStyle = pattern;
+ctx.translate(0, 16);
+ctx.fillRect(0, -16, 100, 50);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 16);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,25, 0,255,0,255);
+_assertPixel(canvas, 98,25, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/red-16x16.png" id="red-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.outside.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.outside.html
new file mode 100644
index 0000000000..ba01bf3092
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.outside.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeatx.outside</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeatx.outside</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('red-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat-x');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 16);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/red-16x16.png" id="red-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.basic.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.basic.html
new file mode 100644
index 0000000000..bb07aca80e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.basic.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeaty.basic</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeaty.basic</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 16, 50);
+
+var img = document.getElementById('green-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat-y');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green-16x16.png" id="green-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.coord1.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.coord1.html
new file mode 100644
index 0000000000..c7ec99e720
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.coord1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeaty.coord1</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeaty.coord1</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('red-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat-y');
+ctx.fillStyle = pattern;
+ctx.translate(48, 0);
+ctx.fillRect(-48, 0, 100, 50);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 16, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 50,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 50,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/red-16x16.png" id="red-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.outside.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.outside.html
new file mode 100644
index 0000000000..a3267d9701
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.outside.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.paint.repeaty.outside</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.paint.repeaty.outside</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+
+var img = document.getElementById('red-16x16.png');
+var pattern = ctx.createPattern(img, 'repeat-y');
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 16, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/red-16x16.png" id="red-16x16.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.case.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.case.html
new file mode 100644
index 0000000000..ccbef07f65
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.case.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.repeat.case</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.repeat.case</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_dom("SYNTAX_ERR", function() { ctx.createPattern(canvas, "Repeat"); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.empty.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.empty.html
new file mode 100644
index 0000000000..48db7da219
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.empty.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.repeat.empty</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.repeat.empty</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+var img = document.getElementById('green-1x1.png');
+var pattern = ctx.createPattern(img, "");
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 200, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+<img src="/images/green-1x1.png" id="green-1x1.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.null.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.null.html
new file mode 100644
index 0000000000..7a4b264d2a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.null.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.repeat.null</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.repeat.null</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+_assert(ctx.createPattern(canvas, null) != null, "ctx.createPattern(canvas, null) != null");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.nullsuffix.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.nullsuffix.html
new file mode 100644
index 0000000000..b28bf57036
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.nullsuffix.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.repeat.nullsuffix</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.repeat.nullsuffix</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_dom("SYNTAX_ERR", function() { ctx.createPattern(canvas, "repeat\0"); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.undefined.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.undefined.html
new file mode 100644
index 0000000000..ba40af07b8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.undefined.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.repeat.undefined</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.repeat.undefined</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_dom("SYNTAX_ERR", function() { ctx.createPattern(canvas, undefined); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognised.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognised.html
new file mode 100644
index 0000000000..5c26a41845
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognised.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.repeat.unrecognised</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.repeat.unrecognised</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_dom("SYNTAX_ERR", function() { ctx.createPattern(canvas, "invalid"); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognisednull.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognisednull.html
new file mode 100644
index 0000000000..f9b47f5be6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognisednull.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.repeat.unrecognisednull</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.repeat.unrecognisednull</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+assert_throws_dom("SYNTAX_ERR", function() { ctx.createPattern(canvas, "null"); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.nonexistent.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.nonexistent.html
new file mode 100644
index 0000000000..1f25bbc82a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.nonexistent.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.svgimage.nonexistent</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.svgimage.nonexistent</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('no-such-image-really.png');
+assert_throws_dom("INVALID_STATE_ERR", function() { ctx.createPattern(img, 'repeat'); });
+
+
+});
+</script>
+<svg><image xlink:href="/images/no-such-image-really.png" id="no-such-image-really.png" class="resource"></svg>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zeroheight.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zeroheight.html
new file mode 100644
index 0000000000..b18611353e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zeroheight.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.svgimage.zeroheight</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.svgimage.zeroheight</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('red-zeroheight.svg');
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<svg><image xlink:href="/images/red-zeroheight.svg" id="red-zeroheight.svg" class="resource"></svg>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zerowidth.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zerowidth.html
new file mode 100644
index 0000000000..2f93d7c342
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zerowidth.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.svgimage.zerowidth</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.svgimage.zerowidth</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var img = document.getElementById('red-zerowidth.svg');
+_assertSame(ctx.createPattern(img, 'repeat'), null, "ctx.createPattern(img, 'repeat')", "null");
+
+
+});
+</script>
+<svg><image xlink:href="/images/red-zerowidth.svg" id="red-zerowidth.svg" class="resource"></svg>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.identity.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.identity.html
new file mode 100644
index 0000000000..775d360e1c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.identity.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.transform.identity</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.transform.identity</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+pattern.setTransform(new DOMMatrix());
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.infinity.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.infinity.html
new file mode 100644
index 0000000000..8650ed9a1d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.infinity.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.transform.infinity</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.transform.infinity</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+pattern.setTransform({a: Infinity});
+
+ctx.fillStyle = '#0f0';
+ctx.fillRect(0, 0, 100, 50);
+ctx.fillStyle = '#f00';
+ctx.fillStyle = pattern;
+ctx.fillRect(0, 0, 100, 50);
+
+_assertPixel(canvas, 1,1, 0,255,0,255);
+_assertPixel(canvas, 98,1, 0,255,0,255);
+_assertPixel(canvas, 1,48, 0,255,0,255);
+_assertPixel(canvas, 98,48, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.invalid.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.invalid.html
new file mode 100644
index 0000000000..ebd2801241
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.invalid.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.pattern.transform.invalid</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.pattern.transform.invalid</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+var canvas2 = document.createElement('canvas');
+canvas2.width = 100;
+canvas2.height = 50;
+var pattern = ctx.createPattern(canvas2, 'no-repeat');
+assert_throws_js(TypeError, function() { pattern.setTransform({a: 1, m11: 2}); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.html
new file mode 100644
index 0000000000..a56a020abd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.strokeStyle.colorObject</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.strokeStyle.colorObject</h1>
+<p class="desc">ctx.strokeStyle works with color objects</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("ctx.strokeStyle works with color objects");
+_addTest(function(canvas, ctx) {
+
+ctx.lineWidth = 50;
+ctx.strokeStyle = {r: 1, g: 0, b: 0};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 255,0,0,255);
+ctx.strokeStyle = {r: 0, g: 0, b: 1};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,0,255,255);
+ctx.strokeStyle = {r: 0.2, g: 0.4, b: 0.6};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 51,102,153,255);
+ctx.strokeStyle = {r: 0, g: 1, b: 0};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+ctx.strokeStyle = {r: -1, g: 0, b: 0};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,0,0,255);
+ctx.strokeStyle = {r: 0, g: 2, b: 0};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.transparency.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.transparency.html
new file mode 100644
index 0000000000..1b19cab317
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.transparency.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.strokeStyle.colorObject.transparency</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.strokeStyle.colorObject.transparency</h1>
+<p class="desc">ctx.strokeStyle with color objects has transparency</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("ctx.strokeStyle with color objects has transparency");
+_addTest(function(canvas, ctx) {
+
+ctx.lineWidth = 50;
+ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 0};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+ctx.strokeStyle = {r: 0, g: 1, b: 0, a: -1};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,0,0,0);
+ctx.clearRect(0, 0, 100, 50);
+ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 0.5};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,255,0,128);
+ctx.clearRect(0, 0, 100, 50);
+ctx.strokeStyle = {r: 0, g: 1, b: 0, a: 1};
+ctx.strokeRect(25, 24, 50, 2);
+_assertPixel(canvas, 50,25, 0,255,0,255);
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.default.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.default.html
new file mode 100644
index 0000000000..91542e2892
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.default.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.strokeStyle.default</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body class="show_output">
+
+<h1>2d.strokeStyle.default</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+_assertSame(ctx.strokeStyle, '#000000', "ctx.strokeStyle", "'#000000'");
+
+
+});
+</script>
+