From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Fri, 19 Apr 2024 02:47:55 +0200
Subject: Adding upstream version 124.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../2d.conformance.requirements.basics.html        |  62 ++++
 .../2d.conformance.requirements.delete.html        |  29 ++
 .../2d.conformance.requirements.drawings.html      |  28 ++
 .../2d.conformance.requirements.missingargs.html   | 141 +++++++++
 .../2d.text-outside-of-the-flat-tree-ref.html      |   9 +
 .../element/2d.text-outside-of-the-flat-tree.html  |  19 ++
 .../canvas-context/2d.canvas.context.exists.html   |  26 ++
 .../2d.canvas.context.extraargs.cache.html         |  31 ++
 .../2d.canvas.context.extraargs.create.html        |  31 ++
 .../2d.canvas.context.invalid.args.html            |  34 +++
 .../2d.canvas.context.prototype.html               |  28 ++
 .../canvas-context/2d.canvas.context.shared.html   |  30 ++
 .../2d.canvas.context.type.exists.html             |  26 ++
 .../2d.canvas.context.type.extend.html             |  33 ++
 .../2d.canvas.context.type.prototype.html          |  35 +++
 .../2d.canvas.context.type.replace.html            |  34 +++
 .../canvas-context/2d.canvas.context.unique.html   |  26 ++
 .../2d.canvas.host.initial.reset.2dstate.html      | 102 +++++++
 .../canvas-host/2d.canvas.host.readonly.html       |  30 ++
 .../canvas-host/2d.canvas.host.reference.html      |  26 ++
 .../canvas-host/2d.canvas.host.scaled-manual.html  |  29 ++
 .../element/canvas-host/2d.canvas.host.scaled.png  | Bin 0 -> 219 bytes
 ....canvas.host.size.attributes.parse.decimal.html |  30 ++
 ...d.canvas.host.size.attributes.parse.decimal.png | Bin 0 -> 137 bytes
 .../2d.canvas.host.size.attributes.parse.em.html   |  30 ++
 .../2d.canvas.host.size.attributes.parse.em.png    | Bin 0 -> 137 bytes
 ...2d.canvas.host.size.attributes.parse.empty.html |  29 ++
 .../2d.canvas.host.size.attributes.parse.empty.png | Bin 0 -> 272 bytes
 .../2d.canvas.host.size.attributes.parse.exp.html  |  30 ++
 .../2d.canvas.host.size.attributes.parse.exp.png   | Bin 0 -> 137 bytes
 .../2d.canvas.host.size.attributes.parse.hex.html  |  30 ++
 .../2d.canvas.host.size.attributes.parse.junk.html |  29 ++
 .../2d.canvas.host.size.attributes.parse.junk.png  | Bin 0 -> 272 bytes
 ...2d.canvas.host.size.attributes.parse.minus.html |  29 ++
 .../2d.canvas.host.size.attributes.parse.minus.png | Bin 0 -> 272 bytes
 ...2d.canvas.host.size.attributes.parse.octal.html |  30 ++
 .../2d.canvas.host.size.attributes.parse.octal.png | Bin 0 -> 137 bytes
 ...anvas.host.size.attributes.parse.onlyspace.html |  29 ++
 ...canvas.host.size.attributes.parse.onlyspace.png | Bin 0 -> 272 bytes
 ....canvas.host.size.attributes.parse.percent.html |  30 ++
 ...d.canvas.host.size.attributes.parse.percent.png | Bin 0 -> 137 bytes
 .../2d.canvas.host.size.attributes.parse.plus.html |  30 ++
 .../2d.canvas.host.size.attributes.parse.plus.png  | Bin 0 -> 137 bytes
 ...2d.canvas.host.size.attributes.parse.space.html |  30 ++
 .../2d.canvas.host.size.attributes.parse.space.png | Bin 0 -> 137 bytes
 ...as.host.size.attributes.parse.trailingjunk.html |  30 ++
 ...vas.host.size.attributes.parse.trailingjunk.png | Bin 0 -> 137 bytes
 ...nvas.host.size.attributes.parse.whitespace.html |  32 ++
 ...anvas.host.size.attributes.parse.whitespace.png | Bin 0 -> 137 bytes
 .../2d.canvas.host.size.attributes.parse.zero.html |  30 ++
 ....host.size.attributes.setAttribute.decimal.html |  32 ++
 ...s.host.size.attributes.setAttribute.decimal.png | Bin 0 -> 137 bytes
 ...anvas.host.size.attributes.setAttribute.em.html |  32 ++
 ...canvas.host.size.attributes.setAttribute.em.png | Bin 0 -> 137 bytes
 ...as.host.size.attributes.setAttribute.empty.html |  31 ++
 ...vas.host.size.attributes.setAttribute.empty.png | Bin 0 -> 272 bytes
 ...nvas.host.size.attributes.setAttribute.exp.html |  32 ++
 ...anvas.host.size.attributes.setAttribute.exp.png | Bin 0 -> 137 bytes
 ...nvas.host.size.attributes.setAttribute.hex.html |  32 ++
 ...vas.host.size.attributes.setAttribute.junk.html |  31 ++
 ...nvas.host.size.attributes.setAttribute.junk.png | Bin 0 -> 272 bytes
 ...as.host.size.attributes.setAttribute.minus.html |  31 ++
 ...vas.host.size.attributes.setAttribute.minus.png | Bin 0 -> 272 bytes
 ...as.host.size.attributes.setAttribute.octal.html |  32 ++
 ...vas.host.size.attributes.setAttribute.octal.png | Bin 0 -> 137 bytes
 ...ost.size.attributes.setAttribute.onlyspace.html |  31 ++
 ...host.size.attributes.setAttribute.onlyspace.png | Bin 0 -> 272 bytes
 ....host.size.attributes.setAttribute.percent.html |  32 ++
 ...s.host.size.attributes.setAttribute.percent.png | Bin 0 -> 137 bytes
 ...vas.host.size.attributes.setAttribute.plus.html |  32 ++
 ...nvas.host.size.attributes.setAttribute.plus.png | Bin 0 -> 137 bytes
 ...as.host.size.attributes.setAttribute.space.html |  32 ++
 ...vas.host.size.attributes.setAttribute.space.png | Bin 0 -> 137 bytes
 ....size.attributes.setAttribute.trailingjunk.html |  32 ++
 ...t.size.attributes.setAttribute.trailingjunk.png | Bin 0 -> 137 bytes
 ...st.size.attributes.setAttribute.whitespace.html |  32 ++
 ...ost.size.attributes.setAttribute.whitespace.png | Bin 0 -> 137 bytes
 ...vas.host.size.attributes.setAttribute.zero.html |  32 ++
 .../compositing/2d.composite.canvas.clear.html     |  36 +++
 .../compositing/2d.composite.canvas.clear.png      | Bin 0 -> 117 bytes
 .../compositing/2d.composite.canvas.copy.html      |  36 +++
 .../compositing/2d.composite.canvas.copy.png       | Bin 0 -> 220 bytes
 .../2d.composite.canvas.destination-atop.html      |  36 +++
 .../2d.composite.canvas.destination-atop.png       | Bin 0 -> 221 bytes
 .../2d.composite.canvas.destination-in.html        |  36 +++
 .../2d.composite.canvas.destination-in.png         | Bin 0 -> 220 bytes
 .../2d.composite.canvas.destination-out.html       |  36 +++
 .../2d.composite.canvas.destination-out.png        | Bin 0 -> 220 bytes
 .../2d.composite.canvas.destination-over.html      |  36 +++
 .../2d.composite.canvas.destination-over.png       | Bin 0 -> 223 bytes
 .../compositing/2d.composite.canvas.lighter.html   |  36 +++
 .../compositing/2d.composite.canvas.lighter.png    | Bin 0 -> 209 bytes
 .../2d.composite.canvas.source-atop.html           |  36 +++
 .../2d.composite.canvas.source-atop.png            | Bin 0 -> 223 bytes
 .../compositing/2d.composite.canvas.source-in.html |  36 +++
 .../compositing/2d.composite.canvas.source-in.png  | Bin 0 -> 220 bytes
 .../2d.composite.canvas.source-out.html            |  36 +++
 .../compositing/2d.composite.canvas.source-out.png | Bin 0 -> 220 bytes
 .../2d.composite.canvas.source-over.html           |  36 +++
 .../2d.composite.canvas.source-over.png            | Bin 0 -> 223 bytes
 .../compositing/2d.composite.canvas.xor.html       |  36 +++
 .../compositing/2d.composite.canvas.xor.png        | Bin 0 -> 223 bytes
 .../compositing/2d.composite.clip.clear.html       |  34 +++
 .../compositing/2d.composite.clip.copy.html        |  34 +++
 .../2d.composite.clip.destination-atop.html        |  34 +++
 .../2d.composite.clip.destination-in.html          |  34 +++
 .../2d.composite.clip.destination-out.html         |  34 +++
 .../2d.composite.clip.destination-over.html        |  34 +++
 .../compositing/2d.composite.clip.lighter.html     |  34 +++
 .../compositing/2d.composite.clip.source-atop.html |  34 +++
 .../compositing/2d.composite.clip.source-in.html   |  34 +++
 .../compositing/2d.composite.clip.source-out.html  |  34 +++
 .../compositing/2d.composite.clip.source-over.html |  34 +++
 .../element/compositing/2d.composite.clip.xor.html |  34 +++
 .../2d.composite.globalAlpha.canvas.html           |  38 +++
 .../2d.composite.globalAlpha.canvascopy.html       |  39 +++
 .../2d.composite.globalAlpha.canvaspattern.html    |  39 +++
 .../2d.composite.globalAlpha.default.html          |  26 ++
 .../compositing/2d.composite.globalAlpha.fill.html |  32 ++
 .../2d.composite.globalAlpha.image.html            |  37 +++
 .../2d.composite.globalAlpha.imagepattern.html     |  38 +++
 .../2d.composite.globalAlpha.invalid.html          |  35 +++
 .../2d.composite.globalAlpha.range.html            |  38 +++
 .../compositing/2d.composite.image.clear.html      |  31 ++
 .../compositing/2d.composite.image.clear.png       | Bin 0 -> 117 bytes
 .../compositing/2d.composite.image.copy.html       |  31 ++
 .../compositing/2d.composite.image.copy.png        | Bin 0 -> 220 bytes
 .../2d.composite.image.destination-atop.html       |  31 ++
 .../2d.composite.image.destination-atop.png        | Bin 0 -> 221 bytes
 .../2d.composite.image.destination-in.html         |  31 ++
 .../2d.composite.image.destination-in.png          | Bin 0 -> 220 bytes
 .../2d.composite.image.destination-out.html        |  31 ++
 .../2d.composite.image.destination-out.png         | Bin 0 -> 220 bytes
 .../2d.composite.image.destination-over.html       |  31 ++
 .../2d.composite.image.destination-over.png        | Bin 0 -> 223 bytes
 .../compositing/2d.composite.image.lighter.html    |  31 ++
 .../compositing/2d.composite.image.lighter.png     | Bin 0 -> 209 bytes
 .../2d.composite.image.source-atop.html            |  31 ++
 .../compositing/2d.composite.image.source-atop.png | Bin 0 -> 223 bytes
 .../compositing/2d.composite.image.source-in.html  |  31 ++
 .../compositing/2d.composite.image.source-in.png   | Bin 0 -> 220 bytes
 .../compositing/2d.composite.image.source-out.html |  31 ++
 .../compositing/2d.composite.image.source-out.png  | Bin 0 -> 220 bytes
 .../2d.composite.image.source-over.html            |  31 ++
 .../compositing/2d.composite.image.source-over.png | Bin 0 -> 223 bytes
 .../compositing/2d.composite.image.xor.html        |  31 ++
 .../element/compositing/2d.composite.image.xor.png | Bin 0 -> 223 bytes
 .../2d.composite.operation.casesensitive.html      |  28 ++
 .../compositing/2d.composite.operation.clear.html  |  28 ++
 .../compositing/2d.composite.operation.darker.html |  28 ++
 .../2d.composite.operation.default.html            |  26 ++
 .../compositing/2d.composite.operation.get.html    |  33 ++
 .../2d.composite.operation.highlight.html          |  28 ++
 .../2d.composite.operation.nullsuffix.html         |  28 ++
 .../compositing/2d.composite.operation.over.html   |  28 ++
 .../2d.composite.operation.unrecognised.html       |  28 ++
 .../compositing/2d.composite.solid.clear.html      |  31 ++
 .../compositing/2d.composite.solid.clear.png       | Bin 0 -> 117 bytes
 .../compositing/2d.composite.solid.copy.html       |  31 ++
 .../compositing/2d.composite.solid.copy.png        | Bin 0 -> 205 bytes
 .../2d.composite.solid.destination-atop.html       |  31 ++
 .../2d.composite.solid.destination-atop.png        | Bin 0 -> 206 bytes
 .../2d.composite.solid.destination-in.html         |  31 ++
 .../2d.composite.solid.destination-in.png          | Bin 0 -> 206 bytes
 .../2d.composite.solid.destination-out.html        |  31 ++
 .../2d.composite.solid.destination-out.png         | Bin 0 -> 117 bytes
 .../2d.composite.solid.destination-over.html       |  31 ++
 .../2d.composite.solid.destination-over.png        | Bin 0 -> 206 bytes
 .../compositing/2d.composite.solid.lighter.html    |  31 ++
 .../compositing/2d.composite.solid.lighter.png     | Bin 0 -> 207 bytes
 .../2d.composite.solid.source-atop.html            |  31 ++
 .../compositing/2d.composite.solid.source-atop.png | Bin 0 -> 205 bytes
 .../compositing/2d.composite.solid.source-in.html  |  31 ++
 .../compositing/2d.composite.solid.source-in.png   | Bin 0 -> 205 bytes
 .../compositing/2d.composite.solid.source-out.html |  31 ++
 .../compositing/2d.composite.solid.source-out.png  | Bin 0 -> 117 bytes
 .../2d.composite.solid.source-over.html            |  31 ++
 .../compositing/2d.composite.solid.source-over.png | Bin 0 -> 205 bytes
 .../compositing/2d.composite.solid.xor.html        |  31 ++
 .../element/compositing/2d.composite.solid.xor.png | Bin 0 -> 117 bytes
 .../2d.composite.transparent.clear.html            |  31 ++
 .../compositing/2d.composite.transparent.clear.png | Bin 0 -> 117 bytes
 .../compositing/2d.composite.transparent.copy.html |  31 ++
 .../compositing/2d.composite.transparent.copy.png  | Bin 0 -> 221 bytes
 .../2d.composite.transparent.destination-atop.html |  31 ++
 .../2d.composite.transparent.destination-atop.png  | Bin 0 -> 220 bytes
 .../2d.composite.transparent.destination-in.html   |  31 ++
 .../2d.composite.transparent.destination-in.png    | Bin 0 -> 221 bytes
 .../2d.composite.transparent.destination-out.html  |  31 ++
 .../2d.composite.transparent.destination-out.png   | Bin 0 -> 221 bytes
 .../2d.composite.transparent.destination-over.html |  31 ++
 .../2d.composite.transparent.destination-over.png  | Bin 0 -> 222 bytes
 .../2d.composite.transparent.lighter.html          |  31 ++
 .../2d.composite.transparent.lighter.png           | Bin 0 -> 208 bytes
 .../2d.composite.transparent.source-atop.html      |  31 ++
 .../2d.composite.transparent.source-atop.png       | Bin 0 -> 222 bytes
 .../2d.composite.transparent.source-in.html        |  31 ++
 .../2d.composite.transparent.source-in.png         | Bin 0 -> 221 bytes
 .../2d.composite.transparent.source-out.html       |  31 ++
 .../2d.composite.transparent.source-out.png        | Bin 0 -> 221 bytes
 .../2d.composite.transparent.source-over.html      |  31 ++
 .../2d.composite.transparent.source-over.png       | Bin 0 -> 223 bytes
 .../compositing/2d.composite.transparent.xor.html  |  31 ++
 .../compositing/2d.composite.transparent.xor.png   | Bin 0 -> 222 bytes
 .../2d.composite.uncovered.fill.copy.html          |  32 ++
 .../2d.composite.uncovered.fill.copy.png           | Bin 0 -> 117 bytes
 ....composite.uncovered.fill.destination-atop.html |  32 ++
 ...d.composite.uncovered.fill.destination-atop.png | Bin 0 -> 117 bytes
 ...2d.composite.uncovered.fill.destination-in.html |  32 ++
 .../2d.composite.uncovered.fill.destination-in.png | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.fill.source-in.html     |  32 ++
 .../2d.composite.uncovered.fill.source-in.png      | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.fill.source-out.html    |  32 ++
 .../2d.composite.uncovered.fill.source-out.png     | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.image.copy.html         |  32 ++
 .../2d.composite.uncovered.image.copy.png          | Bin 0 -> 117 bytes
 ...composite.uncovered.image.destination-atop.html |  32 ++
 ....composite.uncovered.image.destination-atop.png | Bin 0 -> 117 bytes
 ...d.composite.uncovered.image.destination-in.html |  32 ++
 ...2d.composite.uncovered.image.destination-in.png | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.image.source-in.html    |  32 ++
 .../2d.composite.uncovered.image.source-in.png     | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.image.source-out.html   |  32 ++
 .../2d.composite.uncovered.image.source-out.png    | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.nocontext.copy.html     |  31 ++
 .../2d.composite.uncovered.nocontext.copy.png      | Bin 0 -> 117 bytes
 ...osite.uncovered.nocontext.destination-atop.html |  31 ++
 ...posite.uncovered.nocontext.destination-atop.png | Bin 0 -> 117 bytes
 ...mposite.uncovered.nocontext.destination-in.html |  31 ++
 ...omposite.uncovered.nocontext.destination-in.png | Bin 0 -> 117 bytes
 ...2d.composite.uncovered.nocontext.source-in.html |  31 ++
 .../2d.composite.uncovered.nocontext.source-in.png | Bin 0 -> 117 bytes
 ...d.composite.uncovered.nocontext.source-out.html |  31 ++
 ...2d.composite.uncovered.nocontext.source-out.png | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.pattern.copy.html       |  32 ++
 .../2d.composite.uncovered.pattern.copy.png        | Bin 0 -> 117 bytes
 ...mposite.uncovered.pattern.destination-atop.html |  32 ++
 ...omposite.uncovered.pattern.destination-atop.png | Bin 0 -> 117 bytes
 ...composite.uncovered.pattern.destination-in.html |  32 ++
 ....composite.uncovered.pattern.destination-in.png | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.pattern.source-in.html  |  32 ++
 .../2d.composite.uncovered.pattern.source-in.png   | Bin 0 -> 117 bytes
 .../2d.composite.uncovered.pattern.source-out.html |  32 ++
 .../2d.composite.uncovered.pattern.source-out.png  | Bin 0 -> 117 bytes
 .../2d.conformance.requirements.basics.html        |  61 ++++
 .../2d.conformance.requirements.delete.html        |  28 ++
 .../2d.conformance.requirements.drawings.html      |  27 ++
 .../2d.conformance.requirements.missingargs.html   | 140 +++++++++
 .../2d.drawImage.3arg.html                         |  44 +++
 .../2d.drawImage.5arg.html                         |  45 +++
 .../2d.drawImage.9arg.basic.html                   |  38 +++
 .../2d.drawImage.9arg.destpos.html                 |  44 +++
 .../2d.drawImage.9arg.destsize.html                |  46 +++
 .../2d.drawImage.9arg.sourcepos.html               |  37 +++
 .../2d.drawImage.9arg.sourcesize.html              |  44 +++
 .../2d.drawImage.alpha.html                        |  36 +++
 .../2d.drawImage.animated.gif.html                 |  31 ++
 .../2d.drawImage.broken.html                       |  31 ++
 .../2d.drawImage.canvas.html                       |  46 +++
 .../2d.drawImage.clip.html                         |  41 +++
 .../2d.drawImage.composite.html                    |  36 +++
 .../2d.drawImage.floatsource.html                  |  32 ++
 .../2d.drawImage.incomplete.emptysrc.html          |  32 ++
 .../2d.drawImage.incomplete.immediate.html         |  36 +++
 .../2d.drawImage.incomplete.nosrc.html             |  30 ++
 .../2d.drawImage.incomplete.reload.html            |  38 +++
 .../2d.drawImage.incomplete.removedsrc.html        |  32 ++
 .../2d.drawImage.negativedest.html                 |  44 +++
 .../2d.drawImage.negativedir.html                  |  44 +++
 .../2d.drawImage.negativesource.html               |  44 +++
 .../2d.drawImage.nonexistent.html                  |  28 ++
 .../2d.drawImage.nonfinite.html                    | 335 +++++++++++++++++++++
 .../2d.drawImage.nowrap.html                       |  37 +++
 .../2d.drawImage.null.html                         |  26 ++
 .../2d.drawImage.path.html                         |  36 +++
 .../2d.drawImage.self.1.html                       |  35 +++
 .../2d.drawImage.self.2.html                       |  37 +++
 .../2d.drawImage.svg.html                          |  37 +++
 .../2d.drawImage.transform.html                    |  36 +++
 .../2d.drawImage.wrongtype.html                    |  28 ++
 .../2d.drawImage.wrongtype.paragraph.html          |  26 ++
 .../2d.drawImage.zerocanvas.html                   |  37 +++
 .../2d.drawImage.zerosource.html                   |  36 +++
 .../2d.drawImage.zerosource.image.html             |  46 +++
 .../2d.clearRect.basic.html                        |  29 ++
 .../2d.clearRect.clip.html                         |  34 +++
 .../2d.clearRect.globalalpha.html                  |  30 ++
 .../2d.clearRect.globalcomposite.html              |  30 ++
 .../2d.clearRect.negative.html                     |  35 +++
 .../2d.clearRect.nonfinite.html                    |  51 ++++
 .../2d.clearRect.path.html                         |  31 ++
 .../2d.clearRect.shadow.html                       |  33 ++
 .../2d.clearRect.transform.html                    |  31 ++
 .../2d.clearRect.zero.html                         |  31 ++
 .../2d.fillRect.basic.html                         |  28 ++
 .../2d.fillRect.clip.html                          |  35 +++
 .../2d.fillRect.negative.html                      |  36 +++
 .../2d.fillRect.nonfinite.html                     |  52 ++++
 .../2d.fillRect.path.html                          |  32 ++
 .../2d.fillRect.shadow.html                        |  33 ++
 .../2d.fillRect.transform.html                     |  30 ++
 .../2d.fillRect.zero.html                          |  32 ++
 .../2d.strokeRect.basic.html                       |  29 ++
 .../2d.strokeRect.clip.html                        |  36 +++
 .../2d.strokeRect.globalalpha.html                 |  30 ++
 .../2d.strokeRect.globalcomposite.html             |  30 ++
 .../2d.strokeRect.negative.html                    |  37 +++
 .../2d.strokeRect.nonfinite.html                   |  53 ++++
 .../2d.strokeRect.path.html                        |  33 ++
 .../2d.strokeRect.shadow.html                      |  36 +++
 .../2d.strokeRect.transform.html                   |  31 ++
 .../2d.strokeRect.zero.1.html                      |  29 ++
 .../2d.strokeRect.zero.2.html                      |  31 ++
 .../2d.strokeRect.zero.3.html                      |  29 ++
 .../2d.strokeRect.zero.4.html                      |  30 ++
 .../2d.strokeRect.zero.5.html                      |  30 ++
 .../2d.fillStyle.CSSHSL.html                       |  50 +++
 .../2d.fillStyle.CSSRGB.html                       |  59 ++++
 .../2d.fillStyle.colorObject.html                  |  43 +++
 .../2d.fillStyle.colorObject.transparency.html     |  40 +++
 .../2d.fillStyle.colormix.currentcolor.html        |  30 ++
 .../2d.fillStyle.colormix.html                     |  29 ++
 .../2d.fillStyle.default.html                      |  26 ++
 .../2d.fillStyle.get.halftransparent.html          |  27 ++
 .../2d.fillStyle.get.semitransparent.html          |  27 ++
 .../2d.fillStyle.get.solid.html                    |  27 ++
 .../2d.fillStyle.get.transparent.html              |  27 ++
 .../2d.fillStyle.invalidstring.html                |  31 ++
 .../2d.fillStyle.invalidtype.html                  |  31 ++
 .../2d.fillStyle.parse.css-color-4-hsl-1.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-1.png       | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-2.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-2.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-3.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-3.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-4.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-4.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-5.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-5.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-6.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-6.png       | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-7.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-7.png       | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-8.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-8.png       | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsl-9.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsl-9.png       | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-1.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-1.png      | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-2.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-2.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-3.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-3.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-4.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-4.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-5.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-5.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-6.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-6.png      | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-7.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-7.png      | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-8.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-8.png      | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-hsla-9.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-hsla-9.png      | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-rgb-1.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgb-1.png       | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-rgb-2.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgb-2.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-rgb-3.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgb-3.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-rgb-4.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgb-4.png       | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-rgb-5.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgb-5.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-rgb-6.html      |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgb-6.png       | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-rgba-1.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgba-1.png      | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-rgba-2.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgba-2.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-rgba-3.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgba-3.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-rgba-4.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgba-4.png      | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.css-color-4-rgba-5.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgba-5.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.css-color-4-rgba-6.html     |  29 ++
 .../2d.fillStyle.parse.css-color-4-rgba-6.png      | Bin 0 -> 221 bytes
 .../2d.fillStyle.parse.current.basic.html          |  30 ++
 .../2d.fillStyle.parse.current.changed.html        |  31 ++
 .../2d.fillStyle.parse.current.removed.html        |  42 +++
 .../2d.fillStyle.parse.current.removed.png         | Bin 0 -> 112 bytes
 .../2d.fillStyle.parse.hex3.html                   |  29 ++
 .../2d.fillStyle.parse.hex3.png                    | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hex4.html                   |  29 ++
 .../2d.fillStyle.parse.hex4.png                    | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hex6.html                   |  29 ++
 .../2d.fillStyle.parse.hex6.png                    | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hex8.html                   |  29 ++
 .../2d.fillStyle.parse.hex8.png                    | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-1.html                  |  29 ++
 .../2d.fillStyle.parse.hsl-1.png                   | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-2.html                  |  29 ++
 .../2d.fillStyle.parse.hsl-2.png                   | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-3.html                  |  29 ++
 .../2d.fillStyle.parse.hsl-3.png                   | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-4.html                  |  29 ++
 .../2d.fillStyle.parse.hsl-4.png                   | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-5.html                  |  29 ++
 .../2d.fillStyle.parse.hsl-5.png                   | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-6.html                  |  29 ++
 .../2d.fillStyle.parse.hsl-6.png                   | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-clamp-1.html            |  29 ++
 .../2d.fillStyle.parse.hsl-clamp-1.png             | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsl-clamp-2.html            |  29 ++
 .../2d.fillStyle.parse.hsl-clamp-2.png             | Bin 0 -> 207 bytes
 .../2d.fillStyle.parse.hsl-clamp-3.html            |  29 ++
 .../2d.fillStyle.parse.hsl-clamp-3.png             | Bin 0 -> 207 bytes
 .../2d.fillStyle.parse.hsl-clamp-4.html            |  29 ++
 .../2d.fillStyle.parse.hsl-clamp-4.png             | Bin 0 -> 112 bytes
 .../2d.fillStyle.parse.hsla-1.html                 |  29 ++
 .../2d.fillStyle.parse.hsla-1.png                  | Bin 0 -> 220 bytes
 .../2d.fillStyle.parse.hsla-2.html                 |  29 ++
 .../2d.fillStyle.parse.hsla-2.png                  | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsla-clamp-1.html           |  29 ++
 .../2d.fillStyle.parse.hsla-clamp-1.png            | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsla-clamp-2.html           |  29 ++
 .../2d.fillStyle.parse.hsla-clamp-2.png            | Bin 0 -> 207 bytes
 .../2d.fillStyle.parse.hsla-clamp-3.html           |  29 ++
 .../2d.fillStyle.parse.hsla-clamp-3.png            | Bin 0 -> 207 bytes
 .../2d.fillStyle.parse.hsla-clamp-4.html           |  29 ++
 .../2d.fillStyle.parse.hsla-clamp-4.png            | Bin 0 -> 112 bytes
 .../2d.fillStyle.parse.hsla-clamp-5.html           |  29 ++
 .../2d.fillStyle.parse.hsla-clamp-5.png            | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.hsla-clamp-6.html           |  29 ++
 .../2d.fillStyle.parse.hsla-clamp-6.png            | Bin 0 -> 117 bytes
 .../2d.fillStyle.parse.html4.html                  |  29 ++
 .../2d.fillStyle.parse.html4.png                   | Bin 0 -> 205 bytes
 ....fillStyle.parse.invalid.css-color-4-hsl-1.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-hsl-2.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-hsl-3.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-hsl-4.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-hsl-5.html |  29 ++
 ...fillStyle.parse.invalid.css-color-4-hsla-1.html |  29 ++
 ...fillStyle.parse.invalid.css-color-4-hsla-2.html |  29 ++
 ...fillStyle.parse.invalid.css-color-4-hsla-3.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-rgb-1.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-rgb-2.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-rgb-3.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-rgb-4.html |  29 ++
 ....fillStyle.parse.invalid.css-color-4-rgb-5.html |  29 ++
 ...fillStyle.parse.invalid.css-color-4-rgba-1.html |  29 ++
 ...fillStyle.parse.invalid.css-color-4-rgba-2.html |  29 ++
 ...fillStyle.parse.invalid.css-color-4-rgba-3.html |  29 ++
 .../2d.fillStyle.parse.invalid.hex1.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hex2.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hex3.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hex4.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hex5.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hex6.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hex7.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hex8.html           |  29 ++
 .../2d.fillStyle.parse.invalid.hsl-1.html          |  29 ++
 .../2d.fillStyle.parse.invalid.hsl-2.html          |  29 ++
 .../2d.fillStyle.parse.invalid.hsl-3.html          |  29 ++
 .../2d.fillStyle.parse.invalid.hsl-4.html          |  29 ++
 .../2d.fillStyle.parse.invalid.hsl-5.html          |  29 ++
 .../2d.fillStyle.parse.invalid.hsl-6.html          |  29 ++
 .../2d.fillStyle.parse.invalid.hsla-1.html         |  29 ++
 .../2d.fillStyle.parse.invalid.hsla-2.html         |  29 ++
 .../2d.fillStyle.parse.invalid.hsla-3.html         |  29 ++
 .../2d.fillStyle.parse.invalid.name-1.html         |  29 ++
 .../2d.fillStyle.parse.invalid.name-2.html         |  29 ++
 .../2d.fillStyle.parse.invalid.name-3.html         |  29 ++
 .../2d.fillStyle.parse.invalid.name-4.html         |  29 ++
 .../2d.fillStyle.parse.invalid.name-5.html         |  29 ++
 .../2d.fillStyle.parse.invalid.rgb-1.html          |  29 ++
 .../2d.fillStyle.parse.invalid.rgb-2.html          |  29 ++
 .../2d.fillStyle.parse.invalid.rgb-3.html          |  29 ++
 .../2d.fillStyle.parse.invalid.rgba-1.html         |  29 ++
 .../2d.fillStyle.parse.invalid.rgba-2.html         |  29 ++
 .../2d.fillStyle.parse.invalid.rgba-3.html         |  29 ++
 .../2d.fillStyle.parse.invalid.rgba-4.html         |  29 ++
 .../2d.fillStyle.parse.invalid.rgba-5.html         |  29 ++
 .../2d.fillStyle.parse.rgb-clamp-1.html            |  29 ++
 .../2d.fillStyle.parse.rgb-clamp-1.png             | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgb-clamp-2.html            |  29 ++
 .../2d.fillStyle.parse.rgb-clamp-2.png             | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgb-clamp-3.html            |  29 ++
 .../2d.fillStyle.parse.rgb-clamp-3.png             | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgb-clamp-4.html            |  29 ++
 .../2d.fillStyle.parse.rgb-clamp-4.png             | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgb-clamp-5.html            |  29 ++
 .../2d.fillStyle.parse.rgb-clamp-5.png             | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgb-eof.html                |  29 ++
 .../2d.fillStyle.parse.rgb-eof.png                 | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgb-num.html                |  29 ++
 .../2d.fillStyle.parse.rgb-num.png                 | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgb-percent.html            |  29 ++
 .../2d.fillStyle.parse.rgb-percent.png             | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgba-clamp-1.html           |  29 ++
 .../2d.fillStyle.parse.rgba-clamp-1.png            | Bin 0 -> 117 bytes
 .../2d.fillStyle.parse.rgba-clamp-2.html           |  29 ++
 .../2d.fillStyle.parse.rgba-clamp-2.png            | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgba-eof.html               |  29 ++
 .../2d.fillStyle.parse.rgba-eof.png                | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgba-num-1.html             |  29 ++
 .../2d.fillStyle.parse.rgba-num-1.png              | Bin 0 -> 220 bytes
 .../2d.fillStyle.parse.rgba-num-2.html             |  29 ++
 .../2d.fillStyle.parse.rgba-num-2.png              | Bin 0 -> 220 bytes
 .../2d.fillStyle.parse.rgba-percent.html           |  29 ++
 .../2d.fillStyle.parse.rgba-percent.png            | Bin 0 -> 220 bytes
 .../2d.fillStyle.parse.rgba-solid-1.html           |  29 ++
 .../2d.fillStyle.parse.rgba-solid-1.png            | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgba-solid-2.html           |  29 ++
 .../2d.fillStyle.parse.rgba-solid-2.png            | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgba-solid-3.html           |  29 ++
 .../2d.fillStyle.parse.rgba-solid-3.png            | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.rgba-solid-4.html           |  29 ++
 .../2d.fillStyle.parse.rgba-solid-4.png            | Bin 0 -> 205 bytes
 .../2d.fillStyle.parse.svg-1.html                  |  29 ++
 .../2d.fillStyle.parse.svg-1.png                   | Bin 0 -> 207 bytes
 .../2d.fillStyle.parse.svg-2.html                  |  29 ++
 .../2d.fillStyle.parse.svg-2.png                   | Bin 0 -> 207 bytes
 .../2d.fillStyle.parse.system.html                 |  28 ++
 .../2d.fillStyle.parse.transparent-1.html          |  29 ++
 .../2d.fillStyle.parse.transparent-1.png           | Bin 0 -> 117 bytes
 .../2d.fillStyle.parse.transparent-2.html          |  29 ++
 .../2d.fillStyle.parse.transparent-2.png           | Bin 0 -> 117 bytes
 .../2d.fillStyle.toStringFunctionCallback.html     |  39 +++
 .../2d.gradient.conic.invalid.inputs.html          |  44 +++
 .../2d.gradient.conic.negative.rotation.html       |  35 +++
 .../2d.gradient.conic.positive.rotation.html       |  35 +++
 .../fill-and-stroke-styles/2d.gradient.empty.html  |  31 ++
 .../2d.gradient.interpolate.alpha.html             |  35 +++
 .../2d.gradient.interpolate.alpha.png              | Bin 0 -> 219 bytes
 .../2d.gradient.interpolate.color.html             |  33 ++
 .../2d.gradient.interpolate.color.png              | Bin 0 -> 219 bytes
 .../2d.gradient.interpolate.coloralpha.html        |  33 ++
 .../2d.gradient.interpolate.coloralpha.png         | Bin 0 -> 396 bytes
 .../2d.gradient.interpolate.multiple.html          |  35 +++
 .../2d.gradient.interpolate.multiple.png           | Bin 0 -> 256 bytes
 .../2d.gradient.interpolate.outside.html           |  37 +++
 .../2d.gradient.interpolate.overlap.html           |  51 ++++
 .../2d.gradient.interpolate.overlap.png            | Bin 0 -> 248 bytes
 .../2d.gradient.interpolate.overlap2.html          |  41 +++
 .../2d.gradient.interpolate.solid.html             |  31 ++
 .../2d.gradient.interpolate.vertical.html          |  33 ++
 .../2d.gradient.interpolate.vertical.png           | Bin 0 -> 229 bytes
 .../2d.gradient.interpolate.zerosize.fill.html     |  35 +++
 .../2d.gradient.interpolate.zerosize.fillRect.html |  34 +++
 .../2d.gradient.interpolate.zerosize.fillText.html |  35 +++
 .../2d.gradient.interpolate.zerosize.stroke.html   |  43 +++
 ...d.gradient.interpolate.zerosize.strokeRect.html |  42 +++
 ...d.gradient.interpolate.zerosize.strokeText.html |  35 +++
 .../2d.gradient.linear.nonfinite.html              |  48 +++
 .../2d.gradient.linear.transform.1.html            |  36 +++
 .../2d.gradient.linear.transform.2.html            |  37 +++
 .../2d.gradient.linear.transform.3.html            |  37 +++
 .../2d.gradient.object.compare.html                |  30 ++
 .../2d.gradient.object.crosscanvas.html            |  33 ++
 .../2d.gradient.object.current.html                |  36 +++
 .../2d.gradient.object.current.png                 | Bin 0 -> 112 bytes
 .../2d.gradient.object.invalidcolor.html           |  40 +++
 .../2d.gradient.object.invalidoffset.html          |  31 ++
 .../2d.gradient.object.return.html                 |  34 +++
 .../2d.gradient.object.type.html                   |  27 ++
 .../2d.gradient.object.update.html                 |  34 +++
 .../2d.gradient.radial.cone.behind.html            |  43 +++
 .../2d.gradient.radial.cone.beside.html            |  43 +++
 .../2d.gradient.radial.cone.bottom.html            |  43 +++
 .../2d.gradient.radial.cone.cylinder.html          |  43 +++
 .../2d.gradient.radial.cone.front.html             |  43 +++
 .../2d.gradient.radial.cone.shape1.html            |  52 ++++
 .../2d.gradient.radial.cone.shape2.html            |  52 ++++
 .../2d.gradient.radial.cone.top.html               |  43 +++
 .../2d.gradient.radial.equal.html                  |  43 +++
 .../2d.gradient.radial.inside1.html                |  43 +++
 .../2d.gradient.radial.inside2.html                |  43 +++
 .../2d.gradient.radial.inside3.html                |  44 +++
 .../2d.gradient.radial.negative.html               |  28 ++
 .../2d.gradient.radial.nonfinite.html              | 100 ++++++
 .../2d.gradient.radial.outside1.html               |  43 +++
 .../2d.gradient.radial.outside2.html               |  43 +++
 .../2d.gradient.radial.outside3.html               |  44 +++
 .../2d.gradient.radial.touch1.html                 |  43 +++
 .../2d.gradient.radial.touch2.html                 |  45 +++
 .../2d.gradient.radial.touch3.html                 |  43 +++
 .../2d.gradient.radial.transform.1.html            |  37 +++
 .../2d.gradient.radial.transform.2.html            |  38 +++
 .../2d.gradient.radial.transform.3.html            |  38 +++
 .../2d.pattern.animated.gif.html                   |  37 +++
 .../2d.pattern.basic.canvas.html                   |  48 +++
 .../2d.pattern.basic.image.html                    |  37 +++
 .../2d.pattern.basic.nocontext.html                |  40 +++
 .../2d.pattern.basic.type.html                     |  33 ++
 .../2d.pattern.basic.zerocanvas.html               |  42 +++
 .../2d.pattern.crosscanvas.html                    |  35 +++
 .../2d.pattern.image.broken.html                   |  28 ++
 .../2d.pattern.image.incomplete.emptysrc.html      |  29 ++
 .../2d.pattern.image.incomplete.immediate.html     |  33 ++
 .../2d.pattern.image.incomplete.nosrc.html         |  27 ++
 .../2d.pattern.image.incomplete.reload.html        |  35 +++
 .../2d.pattern.image.incomplete.removedsrc.html    |  29 ++
 .../2d.pattern.image.nonexistent-but-loading.html  |  31 ++
 .../2d.pattern.image.nonexistent.html              |  28 ++
 .../2d.pattern.image.nosrc.html                    |  29 ++
 .../2d.pattern.image.null.html                     |  26 ++
 .../2d.pattern.image.string.html                   |  26 ++
 .../2d.pattern.image.undefined.html                |  26 ++
 .../2d.pattern.image.zeroheight.html               |  28 ++
 .../2d.pattern.image.zerowidth.html                |  28 ++
 .../2d.pattern.modify.canvas1.html                 |  44 +++
 .../2d.pattern.modify.canvas2.html                 |  48 +++
 .../2d.pattern.modify.image1.html                  |  40 +++
 .../2d.pattern.modify.image2.html                  |  44 +++
 .../2d.pattern.paint.norepeat.basic.html           |  38 +++
 .../2d.pattern.paint.norepeat.coord1.html          |  41 +++
 .../2d.pattern.paint.norepeat.coord2.html          |  42 +++
 .../2d.pattern.paint.norepeat.coord3.html          |  42 +++
 .../2d.pattern.paint.norepeat.outside.html         |  44 +++
 .../2d.pattern.paint.orientation.canvas.html       |  47 +++
 .../2d.pattern.paint.orientation.image.html        |  44 +++
 .../2d.pattern.paint.repeat.basic.html             |  38 +++
 .../2d.pattern.paint.repeat.coord1.html            |  39 +++
 .../2d.pattern.paint.repeat.coord2.html            |  35 +++
 .../2d.pattern.paint.repeat.coord3.html            |  38 +++
 .../2d.pattern.paint.repeat.outside.html           |  39 +++
 .../2d.pattern.paint.repeatx.basic.html            |  40 +++
 .../2d.pattern.paint.repeatx.coord1.html           |  44 +++
 .../2d.pattern.paint.repeatx.outside.html          |  41 +++
 .../2d.pattern.paint.repeaty.basic.html            |  40 +++
 .../2d.pattern.paint.repeaty.coord1.html           |  44 +++
 .../2d.pattern.paint.repeaty.outside.html          |  41 +++
 .../2d.pattern.repeat.case.html                    |  26 ++
 .../2d.pattern.repeat.empty.html                   |  37 +++
 .../2d.pattern.repeat.null.html                    |  26 ++
 .../2d.pattern.repeat.nullsuffix.html              |  26 ++
 .../2d.pattern.repeat.undefined.html               |  26 ++
 .../2d.pattern.repeat.unrecognised.html            |  26 ++
 .../2d.pattern.repeat.unrecognisednull.html        |  26 ++
 .../2d.pattern.svgimage.nonexistent.html           |  28 ++
 .../2d.pattern.svgimage.zeroheight.html            |  28 ++
 .../2d.pattern.svgimage.zerowidth.html             |  28 ++
 .../2d.pattern.transform.identity.html             |  41 +++
 .../2d.pattern.transform.infinity.html             |  41 +++
 .../2d.pattern.transform.invalid.html              |  30 ++
 .../2d.strokeStyle.colorObject.html                |  44 +++
 .../2d.strokeStyle.colorObject.transparency.html   |  40 +++
 .../2d.strokeStyle.colormix.html                   |  29 ++
 .../2d.strokeStyle.default.html                    |  26 ++
 ...nvasFilterObject.blur.exceptions.tentative.html |  31 ++
 ...r.canvasFilterObject.colorMatrix.tentative.html |  68 +++++
 ...bject.componentTransfer.discrete.tentative.html |  66 ++++
 ...erObject.componentTransfer.gamma.tentative.html |  57 ++++
 ...bject.componentTransfer.identity.tentative.html |  44 +++
 ...rObject.componentTransfer.linear.tentative.html |  56 ++++
 ...erObject.componentTransfer.table.tentative.html |  66 ++++
 ...Object.convolveMatrix.exceptions.tentative.html |  42 +++
 ...lterObject.dropShadow.exceptions.tentative.html | 123 ++++++++
 ...FilterObject.dropShadow.tentative-expected.html |  57 ++++
 ...er.canvasFilterObject.dropShadow.tentative.html | 107 +++++++
 ....gaussianBlur.tentative.isotropic-expected.html |  15 +
 ...terObject.gaussianBlur.tentative.isotropic.html |  20 ++
 ...t.gaussianBlur.tentative.mostly-x-expected.html |  15 +
 ...lterObject.gaussianBlur.tentative.mostly-x.html |  20 ++
 ...t.gaussianBlur.tentative.mostly-y-expected.html |  15 +
 ...lterObject.gaussianBlur.tentative.mostly-y.html |  20 ++
 ...ect.gaussianBlur.tentative.x-only-expected.html |  15 +
 ...FilterObject.gaussianBlur.tentative.x-only.html |  20 ++
 ...ect.gaussianBlur.tentative.y-only-expected.html |  15 +
 ...FilterObject.gaussianBlur.tentative.y-only.html |  20 ++
 .../2d.filter.canvasFilterObject.tentative.html    |  48 +++
 ...lterObject.turbulence.inputTypes.tentative.html | 129 ++++++++
 .../canvas/element/filters/2d.filter.value.html    |  55 ++++
 ....layer.anisotropic-blur.isotropic-expected.html |  16 +
 .../2d.layer.anisotropic-blur.isotropic.html       |  20 ++
 ...d.layer.anisotropic-blur.mostly-x-expected.html |  16 +
 .../layers/2d.layer.anisotropic-blur.mostly-x.html |  20 ++
 ...d.layer.anisotropic-blur.mostly-y-expected.html |  16 +
 .../layers/2d.layer.anisotropic-blur.mostly-y.html |  20 ++
 .../2d.layer.anisotropic-blur.x-only-expected.html |  16 +
 .../layers/2d.layer.anisotropic-blur.x-only.html   |  20 ++
 .../2d.layer.anisotropic-blur.y-only-expected.html |  16 +
 .../layers/2d.layer.anisotropic-blur.y-only.html   |  20 ++
 .../layers/2d.layer.beginLayer-options.html        |  50 +++
 ...r-from-outside-canvas.no-clipping-expected.html |  36 +++
 ...layer.blur-from-outside-canvas.no-clipping.html |  28 ++
 ...from-outside-canvas.with-clipping-expected.html |  38 +++
 ...yer.blur-from-outside-canvas.with-clipping.html |  30 ++
 .../layers/2d.layer.clearRect.full-expected.html   |  15 +
 .../element/layers/2d.layer.clearRect.full.html    |  23 ++
 .../2d.layer.clearRect.partial-expected.html       |  21 ++
 .../element/layers/2d.layer.clearRect.partial.html |  22 ++
 .../2d.layer.clip-inside-and-outside-expected.html |  34 +++
 .../layers/2d.layer.clip-inside-and-outside.html   |  27 ++
 .../layers/2d.layer.clip-inside-expected.html      |  26 ++
 .../element/layers/2d.layer.clip-inside.html       |  23 ++
 .../layers/2d.layer.clip-outside-expected.html     |  26 ++
 .../element/layers/2d.layer.clip-outside.html      |  22 ++
 .../2d.layer.cross-layer-paths-expected.html       |  14 +
 .../element/layers/2d.layer.cross-layer-paths.html |  20 ++
 ...layer.css-filters.blur-and-shadow-expected.html |  17 ++
 .../2d.layer.css-filters.blur-and-shadow.html      |  20 ++
 .../layers/2d.layer.css-filters.blur-expected.html |  16 +
 .../element/layers/2d.layer.css-filters.blur.html  |  20 ++
 .../2d.layer.css-filters.shadow-expected.html      |  16 +
 .../layers/2d.layer.css-filters.shadow.html        |  20 ++
 .../layers/2d.layer.exceptions-are-no-op.html      |  31 ++
 ...layer.flush-on-frame-presentation-expected.html |  33 ++
 .../2d.layer.flush-on-frame-presentation.html      |  35 +++
 .../layers/2d.layer.global-filter-expected.html    |  17 ++
 .../element/layers/2d.layer.global-filter.html     |  26 ++
 .../2d.layer.global-states.alpha-expected.html     |  31 ++
 ...ayer.global-states.alpha.blending-expected.html |  32 ++
 .../2d.layer.global-states.alpha.blending.html     |  35 +++
 ...obal-states.alpha.blending.shadow-expected.html |  36 +++
 ....layer.global-states.alpha.blending.shadow.html |  39 +++
 ...yer.global-states.alpha.composite-expected.html |  32 ++
 .../2d.layer.global-states.alpha.composite.html    |  35 +++
 ...bal-states.alpha.composite.shadow-expected.html |  36 +++
 ...layer.global-states.alpha.composite.shadow.html |  39 +++
 .../layers/2d.layer.global-states.alpha.html       |  34 +++
 ....layer.global-states.alpha.shadow-expected.html |  35 +++
 .../2d.layer.global-states.alpha.shadow.html       |  38 +++
 .../2d.layer.global-states.blending-expected.html  |  31 ++
 .../layers/2d.layer.global-states.blending.html    |  34 +++
 ...yer.global-states.blending.shadow-expected.html |  35 +++
 .../2d.layer.global-states.blending.shadow.html    |  38 +++
 .../2d.layer.global-states.composite-expected.html |  31 ++
 .../layers/2d.layer.global-states.composite.html   |  34 +++
 ...er.global-states.composite.shadow-expected.html |  35 +++
 .../2d.layer.global-states.composite.shadow.html   |  38 +++
 ....layer.global-states.filter.alpha-expected.html |  50 +++
 ...obal-states.filter.alpha.blending-expected.html |  51 ++++
 ....layer.global-states.filter.alpha.blending.html |  38 +++
 ...ates.filter.alpha.blending.shadow-expected.html |  55 ++++
 ...global-states.filter.alpha.blending.shadow.html |  42 +++
 ...bal-states.filter.alpha.composite-expected.html |  51 ++++
 ...layer.global-states.filter.alpha.composite.html |  38 +++
 ...tes.filter.alpha.composite.shadow-expected.html |  55 ++++
 ...lobal-states.filter.alpha.composite.shadow.html |  42 +++
 .../2d.layer.global-states.filter.alpha.html       |  37 +++
 ...global-states.filter.alpha.shadow-expected.html |  54 ++++
 ...2d.layer.global-states.filter.alpha.shadow.html |  41 +++
 ...yer.global-states.filter.blending-expected.html |  50 +++
 .../2d.layer.global-states.filter.blending.html    |  37 +++
 ...bal-states.filter.blending.shadow-expected.html |  54 ++++
 ...layer.global-states.filter.blending.shadow.html |  41 +++
 ...er.global-states.filter.composite-expected.html |  50 +++
 .../2d.layer.global-states.filter.composite.html   |  37 +++
 ...al-states.filter.composite.shadow-expected.html |  54 ++++
 ...ayer.global-states.filter.composite.shadow.html |  41 +++
 ...al-states.filter.no-global-states-expected.html |  50 +++
 ...ayer.global-states.filter.no-global-states.html |  37 +++
 ...layer.global-states.filter.shadow-expected.html |  53 ++++
 .../2d.layer.global-states.filter.shadow.html      |  40 +++
 ...er.global-states.no-global-states-expected.html |  31 ++
 .../2d.layer.global-states.no-global-states.html   |  34 +++
 .../2d.layer.global-states.shadow-expected.html    |  34 +++
 .../layers/2d.layer.global-states.shadow.html      |  37 +++
 ...er.invalid-calls.beginLayer-reset-endLayer.html |  30 ++
 .../2d.layer.invalid-calls.beginLayer-restore.html |  29 ++
 ...yer.invalid-calls.beginLayer-save-endLayer.html |  30 ++
 .../layers/2d.layer.invalid-calls.endLayer.html    |  28 ++
 ...ayer.invalid-calls.save-beginLayer-restore.html |  30 ++
 .../2d.layer.invalid-calls.save-endLayer.html      |  29 ++
 ...layer.layer-rendering-state-reset-in-layer.html |  56 ++++
 ...operations-with-promises.createImageBitmap.html |  34 +++
 ....malformed-operations-with-promises.toBlob.html |  34 +++
 ...d.layer.malformed-operations.createPattern.html |  33 ++
 .../2d.layer.malformed-operations.drawImage.html   |  35 +++
 ...2d.layer.malformed-operations.getImageData.html |  33 ++
 ...2d.layer.malformed-operations.putImageData.html |  36 +++
 .../2d.layer.malformed-operations.toDataURL.html   |  33 ++
 .../element/layers/2d.layer.nested-expected.html   |  37 +++
 .../layers/2d.layer.nested-filters-expected.html   |  28 ++
 .../element/layers/2d.layer.nested-filters.html    |  33 ++
 .../canvas/element/layers/2d.layer.nested.html     |  36 +++
 .../layers/2d.layer.opaque-canvas-expected.html    |  34 +++
 .../element/layers/2d.layer.opaque-canvas.html     |  35 +++
 .../element/layers/2d.layer.reset-expected.html    |  14 +
 .../html/canvas/element/layers/2d.layer.reset.html |  35 +++
 .../layers/2d.layer.restore-style-expected.html    |  24 ++
 .../element/layers/2d.layer.restore-style.html     |  25 ++
 .../layers/2d.layer.several-complex-expected.html  |  35 +++
 .../element/layers/2d.layer.several-complex.html   |  34 +++
 ...from-outside-canvas.long-distance-expected.html |  19 ++
 ...anvas.long-distance-with-clipping-expected.html |  21 ++
 ...outside-canvas.long-distance-with-clipping.html |  30 ++
 ...r.shadow-from-outside-canvas.long-distance.html |  28 ++
 ...rom-outside-canvas.short-distance-expected.html |  19 ++
 ...nvas.short-distance-with-clipping-expected.html |  21 ++
 ...utside-canvas.short-distance-with-clipping.html |  30 ++
 ....shadow-from-outside-canvas.short-distance.html |  28 ++
 .../2d.layer.valid-calls.beginLayer-endLayer.html  |  27 ++
 .../2d.layer.valid-calls.beginLayer-save.html      |  27 ++
 .../layers/2d.layer.valid-calls.beginLayer.html    |  26 ++
 .../layers/2d.layer.valid-calls.restore.html       |  26 ++
 .../2d.layer.valid-calls.save-beginLayer.html      |  27 ++
 .../element/layers/2d.layer.valid-calls.save.html  |  26 ++
 .../2d.layer.valid-calls.save_reset_restore.html   |  28 ++
 .../layers/2d.layer.valid-calls.save_restore.html  |  27 ++
 .../element/line-styles/2d.line.cap.butt.html      |  60 ++++
 .../element/line-styles/2d.line.cap.closed.html    |  45 +++
 .../element/line-styles/2d.line.cap.invalid.html   |  51 ++++
 .../element/line-styles/2d.line.cap.open.html      |  45 +++
 .../element/line-styles/2d.line.cap.round.html     |  76 +++++
 .../element/line-styles/2d.line.cap.square.html    |  60 ++++
 .../element/line-styles/2d.line.cap.valid.html     |  33 ++
 .../canvas/element/line-styles/2d.line.cross.html  |  42 +++
 .../element/line-styles/2d.line.defaults.html      |  29 ++
 .../element/line-styles/2d.line.fill.noop.html     |  36 +++
 .../line-styles/2d.line.invalid.strokestyle.html   |  36 +++
 .../element/line-styles/2d.line.join.bevel.html    |  79 +++++
 .../element/line-styles/2d.line.join.closed.html   |  44 +++
 .../element/line-styles/2d.line.join.invalid.html  |  51 ++++
 .../element/line-styles/2d.line.join.miter.html    |  70 +++++
 .../element/line-styles/2d.line.join.open.html     |  44 +++
 .../element/line-styles/2d.line.join.parallel.html |  41 +++
 .../element/line-styles/2d.line.join.round.html    |  77 +++++
 .../element/line-styles/2d.line.join.valid.html    |  33 ++
 .../element/line-styles/2d.line.miter.acute.html   |  51 ++++
 .../line-styles/2d.line.miter.exceeded.html        |  43 +++
 .../element/line-styles/2d.line.miter.invalid.html |  59 ++++
 .../line-styles/2d.line.miter.lineedge.html        |  40 +++
 .../element/line-styles/2d.line.miter.obtuse.html  |  51 ++++
 .../line-styles/2d.line.miter.rightangle.html      |  43 +++
 .../element/line-styles/2d.line.miter.valid.html   |  36 +++
 .../element/line-styles/2d.line.miter.within.html  |  43 +++
 .../canvas/element/line-styles/2d.line.union.html  |  45 +++
 .../element/line-styles/2d.line.width.basic.html   |  62 ++++
 .../element/line-styles/2d.line.width.invalid.html |  59 ++++
 .../line-styles/2d.line.width.scaledefault.html    |  39 +++
 .../line-styles/2d.line.width.transformed.html     |  68 +++++
 .../element/line-styles/2d.line.width.valid.html   |  36 +++
 .../tests/html/canvas/element/manual/README.md     |   1 +
 .../canvas_complexshapes_arcto_001-ref.htm         |  22 ++
 .../canvas_complexshapes_arcto_001.htm             |  26 ++
 .../canvas_complexshapes_beziercurveto_001-ref.htm |  32 ++
 .../canvas_complexshapes_beziercurveto_001.htm     |  35 +++
 .../compositing/alpha_filter_shadow-ref.html       |  15 +
 .../manual/compositing/alpha_filter_shadow.html    |  16 +
 ...ompositing_globalcompositeoperation_001-ref.htm |  11 +
 ...as_compositing_globalcompositeoperation_001.htm |  32 ++
 .../context-attributes/canvas-with-padding.html    |  10 +
 .../clearRect_alpha_false-ref.html                 |  10 +
 .../context-attributes/clearRect_alpha_false.html  |  15 +
 .../drawImage_alpha_false-ref.html                 |  10 +
 .../context-attributes/drawImage_alpha_false.html  |  20 ++
 .../fillRect_alpha_false-ref.html                  |  10 +
 .../context-attributes/fillRect_alpha_false.html   |  14 +
 .../context-attributes/fill_alpha_false-ref.html   |  10 +
 .../context-attributes/fill_alpha_false.html       |  18 ++
 .../context-attributes/getContextAttributes.html   |  46 +++
 .../initial_color_alpha_false-ref.html             |  10 +
 .../initial_color_alpha_false.html                 |  13 +
 .../reset_color_alpha_false-ref.html               |  10 +
 .../reset_color_alpha_false.html                   |  17 ++
 .../drawimage_canvas.html                          | 203 +++++++++++++
 .../drawimage_canvas_self.html                     |  17 ++
 .../drawimage_canvas_self_ref.html                 |  11 +
 .../drawimage_crossorigin.sub.html                 |  61 ++++
 .../drawimage_html_image.html                      | 268 +++++++++++++++++
 .../drawimage_svg_image_1.html                     |  31 ++
 ...g_image_with_foreign_object_does_not_taint.html |  32 ++
 ...drawImage-from-bitmap-orientation-none-ref.html |  12 +
 ...age-from-bitmap-orientation-none.tentative.html |  31 ++
 .../drawImage-from-bitmap-ref.html                 |  12 +
 ...map-swap-width-height-orientation-none-ref.html |  12 +
 ...ap-width-height-orientation-none.tentative.html |  32 ++
 ...rawImage-from-bitmap-swap-width-height-ref.html |  12 +
 ...ge-from-bitmap-swap-width-height.tentative.html |  32 ++
 .../drawImage-from-bitmap.tentative.html           |  31 ++
 .../image-orientation/drawImage-from-blob-ref.html |  10 +
 .../drawImage-from-blob.tentative.html             |  37 +++
 ...rawImage-from-element-orientation-none-ref.html |  12 +
 ...ge-from-element-orientation-none.tentative.html |  24 ++
 .../drawImage-from-element-ref.html                |  12 +
 ...ent-swap-width-height-orientation-none-ref.html |  12 +
 ...ap-width-height-orientation-none.tentative.html |  24 ++
 ...awImage-from-element-swap-width-height-ref.html |  12 +
 ...e-from-element-swap-width-height.tentative.html |  24 ++
 .../drawImage-from-element.tentative.html          |  24 ++
 .../drawImage-with-src-rect-ref.html               |  22 ++
 .../drawImage-with-src-rect.tentative.html         |  25 ++
 .../canvas_complexshapes_ispointInpath_001.htm     |  31 ++
 ...as_focus_drawFocusIfNeeded_AAPI_001-manual.html |  50 +++
 .../drawFocusIfNeeded_001.html                     |  66 ++++
 .../drawFocusIfNeeded_002.html                     |  68 +++++
 .../drawFocusIfNeeded_003.html                     |  69 +++++
 .../drawFocusIfNeeded_004.html                     |  88 ++++++
 .../drawFocusIfNeeded_005.html                     |  88 ++++++
 .../canvas.2d.disconnected-font-size-math-ref.html |  19 ++
 .../canvas.2d.disconnected-font-size-math.html     |  20 ++
 .../2d.fillStyle.parse.current.notrendered.html    |  31 ++
 ...as_colorsandstyles_createlineargradient_001.htm |  59 ++++
 .../conic-gradient-expected.html                   |  22 ++
 .../conic-gradient-rotation-expected.html          |  22 ++
 .../conic-gradient-rotation.html                   |  30 ++
 .../fill-and-stroke-styles/conic-gradient.html     |  30 ++
 .../manual/filters/canvas-fillStyle-opacity.html   |  27 ++
 ...ilter-opacity-alpha-and-fillStyle-expected.html |  41 +++
 .../canvas-filter-opacity-alpha-and-fillStyle.html |  35 +++
 .../manual/filters/canvas-filter-opacity.html      |  35 +++
 ...filter-shadow-and-properties-blur-expected.html |  33 ++
 .../canvas-filter-shadow-and-properties-blur.html  |  29 ++
 ...nvas-filter-shadow-and-properties-expected.html |  21 ++
 .../canvas-filter-shadow-and-properties.html       |  20 ++
 .../filters/canvas-filter-shadow-expected.html     |  16 +
 .../manual/filters/canvas-filter-shadow.html       |  15 +
 .../element/manual/filters/canvas-globalAlpha.html |  35 +++
 .../canvas-opacity-blend-modes-expected.html       |  48 +++
 .../manual/filters/canvas-opacity-blend-modes.html |  50 +++
 .../manual/filters/canvas-opacity-expected.html    |  66 ++++
 .../element/manual/filters/svg-filter-crash.html   |  14 +
 .../canvas-filter-object-blur-expected.html        |  19 ++
 .../tentative/canvas-filter-object-blur.html       |  24 ++
 ...-filter-object-component-transfer-expected.html |  65 ++++
 .../canvas-filter-object-component-transfer.html   |  62 ++++
 ...vas-filter-object-convolve-matrix-expected.html |  77 +++++
 .../canvas-filter-object-convolve-matrix.html      |  60 ++++
 .../canvas-filter-object-turbulence-expected.html  |  37 +++
 .../tentative/canvas-filter-object-turbulence.html |  26 ++
 .../canvas-filter-boolean-conversion-expected.html |  30 ++
 .../canvas-filter-boolean-conversion.html          |  58 ++++
 .../canvas-filter-long-conversion-expected.html    |  26 ++
 .../canvas-filter-long-conversion.html             |  35 +++
 .../canvas-filter-sequence-conversion.html         |  55 ++++
 .../manual/image-smoothing/imagesmoothing.html     | 119 ++++++++
 .../imagebitmap/canvas-ImageBitmap-close.html      |  89 ++++++
 .../canvas-createImageBitmap-resize.html           | 170 +++++++++++
 .../canvas-createImageBitmap-video-resize.html     |  62 ++++
 .../element/manual/imagebitmap/common.sub.js       | 168 +++++++++++
 .../createImageBitmap-blob-invalidtype.html        |  27 ++
 .../imagebitmap/createImageBitmap-bounds.html      |  67 +++++
 .../createImageBitmap-colorSpaceConversion.html    |  50 +++
 .../createImageBitmap-drawImage-closed.html        |  27 ++
 .../imagebitmap/createImageBitmap-drawImage.html   |  87 ++++++
 .../createImageBitmap-exif-orientation.html        | 121 ++++++++
 .../createImageBitmap-exif-orientation_none.html   |  61 ++++
 .../imagebitmap/createImageBitmap-flipY.html       |  73 +++++
 .../createImageBitmap-in-worker-transfer.html      |  20 ++
 .../createImageBitmap-invalid-args.html            | 239 +++++++++++++++
 .../imagebitmap/createImageBitmap-origin.sub.html  |  47 +++
 .../createImageBitmap-serializable.html            |  52 ++++
 .../createImageBitmap-sizeOverflow.html            |  52 ++++
 .../imagebitmap/createImageBitmap-transfer.html    |  53 ++++
 .../manual/imagebitmap/createImageBitmap-worker.js |  17 ++
 ...-from-imageData-no-image-rotation-expected.html |  18 ++
 ...ageBitmap-from-imageData-no-image-rotation.html |  26 ++
 ...Rendering-transferFromImageBitmap-expected.html |  27 ++
 ...g-transferFromImageBitmap-flipped-expected.html |  27 ++
 ...pRendering-transferFromImageBitmap-flipped.html |  34 +++
 ...ing-transferFromImageBitmap-webgl-expected.html |  35 +++
 ...mapRendering-transferFromImageBitmap-webgl.html |  38 +++
 ...ageBitmapRendering-transferFromImageBitmap.html |  34 +++
 .../imagebitmap-replication-exif-orientation.html  | 146 +++++++++
 .../manual/imagebitmap/resources/squares_1.jpg     | Bin 0 -> 1227 bytes
 .../manual/imagebitmap/resources/squares_2.jpg     | Bin 0 -> 1227 bytes
 .../manual/imagebitmap/resources/squares_3.jpg     | Bin 0 -> 1227 bytes
 .../manual/imagebitmap/resources/squares_4.jpg     | Bin 0 -> 1227 bytes
 .../manual/imagebitmap/resources/squares_5.jpg     | Bin 0 -> 1227 bytes
 .../manual/imagebitmap/resources/squares_6.jpg     | Bin 0 -> 1227 bytes
 .../manual/imagebitmap/resources/squares_7.jpg     | Bin 0 -> 1227 bytes
 .../manual/imagebitmap/resources/squares_8.jpg     | Bin 0 -> 1227 bytes
 .../element/manual/imagebitmap/serialize-worker.js |   3 +
 .../element/manual/imagebitmap/transfer-worker.js  |   3 +
 .../manual/imagebitmap/worker-onmessage-noop.js    |   3 +
 .../manual/layers/unclosed-layers-expected.html    |  14 +
 .../element/manual/layers/unclosed-layers.html     |  20 ++
 .../layers/unclosed-nested-layers-expected.html    |  14 +
 .../manual/layers/unclosed-nested-layers.html      |  26 ++
 .../canvas_linestyles_linecap_001-ref.htm          |  11 +
 .../line-styles/canvas_linestyles_linecap_001.htm  |  37 +++
 .../element/manual/line-styles/lineto_a.html       |  26 ++
 .../element/manual/line-styles/lineto_ref.html     |  15 +
 .../element/manual/line-styles/setLineDash.html    | 104 +++++++
 .../element/manual/shadows/canvas_shadows_001.htm  |  60 ++++
 .../manual/shadows/canvas_shadows_002-ref.htm      |  27 ++
 .../element/manual/shadows/canvas_shadows_002.htm  |  34 +++
 .../canvas_shadows_system_colors-expected.html     |  11 +
 .../shadows/canvas_shadows_system_colors.html      |  19 ++
 .../shadows/shadowBlur_gaussian_tolerance.1.html   | 191 ++++++++++++
 .../manual/text/canvas.2d.disconnected-ref.html    |  16 +
 .../manual/text/canvas.2d.disconnected.html        |  24 ++
 .../manual/text/canvas.2d.fontStretch-ref.html     |  19 ++
 .../text/canvas.2d.fontStretch.condensed.html      |  27 ++
 .../text/canvas.2d.fontStretch.expanded.html       |  27 ++
 .../canvas.2d.fontStretch.extra-condensed.html     |  27 ++
 .../text/canvas.2d.fontStretch.extra-expanded.html |  27 ++
 .../manual/text/canvas.2d.fontStretch.normal.html  |  30 ++
 .../text/canvas.2d.fontStretch.semi-condensed.html |  27 ++
 .../text/canvas.2d.fontStretch.semi-expanded.html  |  27 ++
 .../canvas.2d.fontStretch.ultra-condensed.html     |  27 ++
 .../text/canvas.2d.fontStretch.ultra-expanded.html |  27 ++
 .../manual/text/canvas_text_font_001-ref.htm       |  22 ++
 .../element/manual/text/canvas_text_font_001.htm   |  33 ++
 ...2d.state.saverestore.imageSmoothingEnabled.html |  47 +++
 .../the-canvas-state/2d.zero.size.canvas.html      |  16 +
 .../canvas_state_restore_001-ref.htm               |  11 +
 .../the-canvas-state/canvas_state_restore_001.htm  |  42 +++
 .../2d.transformation.getTransform.html            |  39 +++
 .../canvas_transformations_reset_001-ref.html      |  21 ++
 .../canvas_transformations_reset_001.html          |  22 ++
 .../canvas_transformations_scale_001-ref.htm       |  11 +
 .../canvas_transformations_scale_001.htm           |  31 ++
 .../manual/transformations/transform_a.html        |  22 ++
 .../manual/transformations/transform_ref.html      |  16 +
 .../element/manual/unclosed-canvas-1-expected.htm  |  10 +
 .../canvas/element/manual/unclosed-canvas-1.htm    |  14 +
 .../element/manual/unclosed-canvas-2-expected.htm  |  14 +
 .../canvas/element/manual/unclosed-canvas-2.htm    |  15 +
 .../element/manual/unclosed-canvas-3-expected.htm  |  13 +
 .../canvas/element/manual/unclosed-canvas-3.htm    |  16 +
 .../element/manual/unclosed-canvas-4-expected.htm  |  14 +
 .../canvas/element/manual/unclosed-canvas-4.htm    |  17 ++
 .../wide-gamut-canvas/ImageData-fidelity.html      | 126 ++++++++
 ...nvas-display-p3-drawImage-ImageBitmap-Blob.html |  35 +++
 ...splay-p3-drawImage-ImageBitmap-ImageBitmap.html |  47 +++
 ...display-p3-drawImage-ImageBitmap-ImageData.html |  46 +++
 ...as-display-p3-drawImage-ImageBitmap-canvas.html |  53 ++++
 ...as-display-p3-drawImage-ImageBitmap-cloned.html |  70 +++++
 ...vas-display-p3-drawImage-ImageBitmap-image.html |  44 +++
 ...vas-display-p3-drawImage-ImageBitmap-video.html |  57 ++++
 .../canvas-display-p3-drawImage-video.html         |  52 ++++
 .../canvas-display-p3-drawImage.https.html         |  41 +++
 .../canvas-display-p3-pattern-canvas.html          |  44 +++
 .../canvas-display-p3-pattern-image.html           |  37 +++
 .../canvas-display-p3-settings.html                |  36 +++
 .../manual/wide-gamut-canvas/canvas-display-p3.js  | 283 +++++++++++++++++
 .../imagedata-no-color-settings-crash.html         |  26 ++
 .../resources/Adobe-RGB-BB0000CC.png               | Bin 0 -> 575 bytes
 .../resources/Adobe-RGB-BB0000FF.png               | Bin 0 -> 562 bytes
 .../resources/Adobe-RGB-BBBC00000000CCCC.png       | Bin 0 -> 560 bytes
 .../resources/Adobe-RGB-BBBC00000000FFFF.png       | Bin 0 -> 554 bytes
 .../resources/Adobe-RGB-FF0000CC.png               | Bin 0 -> 575 bytes
 .../resources/Adobe-RGB-FF0000FF.png               | Bin 0 -> 562 bytes
 .../resources/Adobe-RGB-FFFF00000000CCCC.png       | Bin 0 -> 575 bytes
 .../resources/Adobe-RGB-FFFF00000000FFFF.png       | Bin 0 -> 562 bytes
 .../resources/Display-P3-0.7333-0-0.svg            |   3 +
 .../resources/Display-P3-1-0-0.svg                 |   3 +
 .../resources/Display-P3-BB0000CC.png              | Bin 0 -> 620 bytes
 .../resources/Display-P3-BB0000FF.png              | Bin 0 -> 607 bytes
 .../resources/Display-P3-BBBC00000000CCCC.png      | Bin 0 -> 605 bytes
 .../resources/Display-P3-BBBC00000000FFFF.png      | Bin 0 -> 599 bytes
 .../resources/Display-P3-FF0000CC.png              | Bin 0 -> 620 bytes
 .../resources/Display-P3-FF0000FF.png              | Bin 0 -> 607 bytes
 .../resources/Display-P3-FFFF00000000CCCC.png      | Bin 0 -> 620 bytes
 .../resources/Display-P3-FFFF00000000FFFF.png      | Bin 0 -> 607 bytes
 .../resources/Generic-CMYK-BE000000.jpg            | Bin 0 -> 55590 bytes
 .../resources/Generic-CMYK-FF000000.jpg            | Bin 0 -> 55590 bytes
 .../resources/Rec2020-222000000.mp4                | Bin 0 -> 3275 bytes
 .../resources/Rec2020-222000000.webm               | Bin 0 -> 604 bytes
 .../resources/Rec2020-3FF000000.mp4                | Bin 0 -> 3275 bytes
 .../resources/Rec2020-3FF000000.webm               | Bin 0 -> 605 bytes
 .../resources/pattern-semitransparent-p3d65.png    | Bin 0 -> 5912 bytes
 .../resources/pattern-semitransparent-rec2020.png  | Bin 0 -> 6136 bytes
 .../resources/pattern-semitransparent-srgb.png     | Bin 0 -> 5319 bytes
 .../resources/pattern-srgb-transparent.avif        | Bin 0 -> 529 bytes
 .../resources/pattern-srgb-transparent.bmp         | Bin 0 -> 1738 bytes
 .../resources/pattern-srgb-transparent.ico         | Bin 0 -> 1742 bytes
 .../resources/pattern-srgb-transparent.png         | Bin 0 -> 5319 bytes
 .../resources/pattern-srgb-transparent.webp        | Bin 0 -> 252 bytes
 .../wide-gamut-canvas/resources/pattern-srgb.avif  | Bin 0 -> 330 bytes
 .../wide-gamut-canvas/resources/pattern-srgb.bmp   | Bin 0 -> 1738 bytes
 .../wide-gamut-canvas/resources/pattern-srgb.gif   | Bin 0 -> 117 bytes
 .../wide-gamut-canvas/resources/pattern-srgb.ico   | Bin 0 -> 1742 bytes
 .../wide-gamut-canvas/resources/pattern-srgb.jpg   | Bin 0 -> 898 bytes
 .../wide-gamut-canvas/resources/pattern-srgb.png   | Bin 0 -> 163 bytes
 .../wide-gamut-canvas/resources/pattern-srgb.svg   |   6 +
 .../wide-gamut-canvas/resources/pattern-srgb.webp  | Bin 0 -> 208 bytes
 .../png-16bit/2x2_16bit_AdobeRGB_opaque.png        | Bin 0 -> 3164 bytes
 .../png-16bit/2x2_16bit_AdobeRGB_transparent.png   | Bin 0 -> 3175 bytes
 .../png-16bit/2x2_16bit_DisplayP3_opaque.png       | Bin 0 -> 3262 bytes
 .../png-16bit/2x2_16bit_DisplayP3_transparent.png  | Bin 0 -> 3271 bytes
 .../png-16bit/2x2_16bit_ProPhoto_opaque.png        | Bin 0 -> 3338 bytes
 .../png-16bit/2x2_16bit_ProPhoto_transparent.png   | Bin 0 -> 3347 bytes
 .../png-16bit/2x2_16bit_Rec2020_opaque.png         | Bin 0 -> 3144 bytes
 .../png-16bit/2x2_16bit_Rec2020_transparent.png    | Bin 0 -> 3153 bytes
 .../2x2_16bit_interlaced_AdobeRGB_opaque.png       | Bin 0 -> 3165 bytes
 .../2x2_16bit_interlaced_AdobeRGB_transparent.png  | Bin 0 -> 3174 bytes
 .../2x2_16bit_interlaced_DisplayP3_opaque.png      | Bin 0 -> 3265 bytes
 .../2x2_16bit_interlaced_DisplayP3_transparent.png | Bin 0 -> 3272 bytes
 .../2x2_16bit_interlaced_ProPhoto_opaque.png       | Bin 0 -> 3339 bytes
 .../2x2_16bit_interlaced_ProPhoto_transparent.png  | Bin 0 -> 3348 bytes
 .../2x2_16bit_interlaced_Rec2020_opaque.png        | Bin 0 -> 3147 bytes
 .../2x2_16bit_interlaced_Rec2020_transparent.png   | Bin 0 -> 3153 bytes
 .../png-16bit/2x2_16bit_interlaced_sRGB_opaque.png | Bin 0 -> 2868 bytes
 .../2x2_16bit_interlaced_sRGB_transparent.png      | Bin 0 -> 2876 bytes
 .../resources/png-16bit/2x2_16bit_sRGB_opaque.png  | Bin 0 -> 2867 bytes
 .../png-16bit/2x2_16bit_sRGB_transparent.png       | Bin 0 -> 2672 bytes
 .../png-16bit/2x2_8bit_AdobeRGB_opaque.png         | Bin 0 -> 3173 bytes
 .../png-16bit/2x2_8bit_AdobeRGB_transparent.png    | Bin 0 -> 3177 bytes
 .../png-16bit/2x2_8bit_DisplayP3_opaque.png        | Bin 0 -> 3250 bytes
 .../png-16bit/2x2_8bit_DisplayP3_transparent.png   | Bin 0 -> 3255 bytes
 .../png-16bit/2x2_8bit_ProPhoto_opaque.png         | Bin 0 -> 3325 bytes
 .../png-16bit/2x2_8bit_ProPhoto_transparent.png    | Bin 0 -> 3331 bytes
 .../png-16bit/2x2_8bit_Rec2020_opaque.png          | Bin 0 -> 3132 bytes
 .../png-16bit/2x2_8bit_Rec2020_transparent.png     | Bin 0 -> 3136 bytes
 .../resources/png-16bit/2x2_8bit_sRGB_opaque.png   | Bin 0 -> 2853 bytes
 .../png-16bit/2x2_8bit_sRGB_transparent.png        | Bin 0 -> 2857 bytes
 .../wide-gamut-canvas/resources/sRGB-BB0000.mp4    | Bin 0 -> 1600 bytes
 .../wide-gamut-canvas/resources/sRGB-BB0000.svg    |   3 +
 .../wide-gamut-canvas/resources/sRGB-BB0000.webm   | Bin 0 -> 604 bytes
 .../wide-gamut-canvas/resources/sRGB-BB0000CC.png  | Bin 0 -> 243 bytes
 .../wide-gamut-canvas/resources/sRGB-BB0000FF.png  | Bin 0 -> 230 bytes
 .../resources/sRGB-BBBC00000000CCCC.png            | Bin 0 -> 228 bytes
 .../resources/sRGB-BBBC00000000FFFF.png            | Bin 0 -> 222 bytes
 .../wide-gamut-canvas/resources/sRGB-FF0000.svg    |   3 +
 .../wide-gamut-canvas/resources/sRGB-FF0000CC.png  | Bin 0 -> 243 bytes
 .../wide-gamut-canvas/resources/sRGB-FF0000FF.png  | Bin 0 -> 230 bytes
 .../wide-gamut-canvas/resources/sRGB-FF0100.mp4    | Bin 0 -> 1600 bytes
 .../wide-gamut-canvas/resources/sRGB-FF0100.webm   | Bin 0 -> 605 bytes
 .../resources/sRGB-FFFF00000000CCCC.png            | Bin 0 -> 243 bytes
 .../resources/sRGB-FFFF00000000FFFF.png            | Bin 0 -> 230 bytes
 .../element/path-objects/2d.path.arc.angle.1.html  |  33 ++
 .../element/path-objects/2d.path.arc.angle.2.html  |  33 ++
 .../element/path-objects/2d.path.arc.angle.3.html  |  33 ++
 .../element/path-objects/2d.path.arc.angle.4.html  |  36 +++
 .../element/path-objects/2d.path.arc.angle.5.html  |  33 ++
 .../element/path-objects/2d.path.arc.angle.6.html  |  36 +++
 .../element/path-objects/2d.path.arc.default.html  |  33 ++
 .../element/path-objects/2d.path.arc.empty.html    |  33 ++
 .../element/path-objects/2d.path.arc.end.html      |  35 +++
 .../element/path-objects/2d.path.arc.negative.html |  28 ++
 .../element/path-objects/2d.path.arc.nonempty.html |  34 +++
 .../path-objects/2d.path.arc.nonfinite.html        |  76 +++++
 .../element/path-objects/2d.path.arc.scale.1.html  |  53 ++++
 .../element/path-objects/2d.path.arc.scale.2.html  |  43 +++
 .../path-objects/2d.path.arc.selfintersect.1.html  |  37 +++
 .../path-objects/2d.path.arc.selfintersect.2.html  |  41 +++
 .../element/path-objects/2d.path.arc.shape.1.html  |  38 +++
 .../element/path-objects/2d.path.arc.shape.2.html  |  38 +++
 .../element/path-objects/2d.path.arc.shape.3.html  |  37 +++
 .../element/path-objects/2d.path.arc.shape.4.html  |  37 +++
 .../element/path-objects/2d.path.arc.shape.5.html  |  37 +++
 .../element/path-objects/2d.path.arc.twopie.1.html |  33 ++
 .../element/path-objects/2d.path.arc.twopie.2.html |  33 ++
 .../element/path-objects/2d.path.arc.twopie.3.html |  33 ++
 .../element/path-objects/2d.path.arc.twopie.4.html |  33 ++
 .../element/path-objects/2d.path.arc.twopie.5.html |  34 +++
 .../element/path-objects/2d.path.arc.twopie.6.html |  34 +++
 .../element/path-objects/2d.path.arc.zero.1.html   |  33 ++
 .../element/path-objects/2d.path.arc.zero.2.html   |  33 ++
 .../path-objects/2d.path.arc.zeroradius.html       |  34 +++
 .../path-objects/2d.path.arcTo.coincide.1.html     |  45 +++
 .../path-objects/2d.path.arcTo.coincide.2.html     |  35 +++
 .../path-objects/2d.path.arcTo.collinear.1.html    |  42 +++
 .../path-objects/2d.path.arcTo.collinear.2.html    |  42 +++
 .../path-objects/2d.path.arcTo.collinear.3.html    |  47 +++
 .../2d.path.arcTo.ensuresubpath.1.html             |  33 ++
 .../2d.path.arcTo.ensuresubpath.2.html             |  34 +++
 .../path-objects/2d.path.arcTo.negative.html       |  28 ++
 .../path-objects/2d.path.arcTo.nonfinite.html      |  74 +++++
 .../element/path-objects/2d.path.arcTo.scale.html  |  46 +++
 .../path-objects/2d.path.arcTo.shape.curve1.html   |  59 ++++
 .../path-objects/2d.path.arcTo.shape.curve2.html   |  58 ++++
 .../path-objects/2d.path.arcTo.shape.end.html      |  39 +++
 .../path-objects/2d.path.arcTo.shape.start.html    |  39 +++
 .../path-objects/2d.path.arcTo.transformation.html |  45 +++
 .../element/path-objects/2d.path.arcTo.zero.1.html |  42 +++
 .../element/path-objects/2d.path.arcTo.zero.2.html |  42 +++
 .../element/path-objects/2d.path.beginPath.html    |  32 ++
 .../path-objects/2d.path.bezierCurveTo.basic.html  |  34 +++
 .../2d.path.bezierCurveTo.ensuresubpath.1.html     |  34 +++
 .../2d.path.bezierCurveTo.ensuresubpath.2.html     |  34 +++
 .../2d.path.bezierCurveTo.nonfinite.html           | 108 +++++++
 .../path-objects/2d.path.bezierCurveTo.scaled.html |  39 +++
 .../path-objects/2d.path.bezierCurveTo.shape.html  |  38 +++
 .../element/path-objects/2d.path.clip.basic.1.html |  36 +++
 .../element/path-objects/2d.path.clip.basic.2.html |  36 +++
 .../element/path-objects/2d.path.clip.empty.html   |  35 +++
 .../path-objects/2d.path.clip.intersect.html       |  39 +++
 .../path-objects/2d.path.clip.unaffected.html      |  41 +++
 .../path-objects/2d.path.clip.winding.1.html       |  44 +++
 .../path-objects/2d.path.clip.winding.2.html       |  48 +++
 .../path-objects/2d.path.closePath.empty.html      |  31 ++
 .../path-objects/2d.path.closePath.newline.html    |  36 +++
 .../path-objects/2d.path.closePath.nextpoint.html  |  35 +++
 .../path-objects/2d.path.ellipse.basics.html       |  32 ++
 .../path-objects/2d.path.fill.closed.basic.html    |  36 +++
 .../2d.path.fill.closed.unaffected.html            |  39 +++
 .../element/path-objects/2d.path.fill.overlap.html |  35 +++
 .../element/path-objects/2d.path.fill.overlap.png  | Bin 0 -> 205 bytes
 .../path-objects/2d.path.fill.winding.add.html     |  41 +++
 .../2d.path.fill.winding.subtract.1.html           |  41 +++
 .../2d.path.fill.winding.subtract.2.html           |  40 +++
 .../2d.path.fill.winding.subtract.3.html           |  46 +++
 .../element/path-objects/2d.path.initial.html      |  31 ++
 .../path-objects/2d.path.isPointInPath.arc.html    |  34 +++
 .../2d.path.isPointInPath.basic.1.html             |  28 ++
 .../2d.path.isPointInPath.basic.2.html             |  28 ++
 .../path-objects/2d.path.isPointInPath.basic.html  |  65 ++++
 .../path-objects/2d.path.isPointInPath.bezier.html |  47 +++
 .../path-objects/2d.path.isPointInPath.bigarc.html |  34 +++
 .../path-objects/2d.path.isPointInPath.edge.html   |  38 +++
 .../path-objects/2d.path.isPointInPath.empty.html  |  26 ++
 .../2d.path.isPointInPath.nonfinite.html           |  33 ++
 .../2d.path.isPointInPath.outside.html             |  33 ++
 .../2d.path.isPointInPath.subpath.html             |  33 ++
 .../2d.path.isPointInPath.transform.1.html         |  33 ++
 .../2d.path.isPointInPath.transform.2.html         |  33 ++
 .../2d.path.isPointInPath.transform.3.html         |  33 ++
 .../2d.path.isPointInPath.transform.4.html         |  31 ++
 .../2d.path.isPointInPath.unclosed.html            |  31 ++
 .../2d.path.isPointInPath.winding.html             |  46 +++
 .../2d.path.isPointInStroke.scaleddashes.html      |  39 +++
 .../2d.path.isPointInpath.invalid.html             |  50 +++
 .../2d.path.isPointInpath.multi.path.html          |  48 +++
 .../element/path-objects/2d.path.lineTo.basic.html |  34 +++
 .../2d.path.lineTo.ensuresubpath.1.html            |  33 ++
 .../2d.path.lineTo.ensuresubpath.2.html            |  34 +++
 .../path-objects/2d.path.lineTo.nextpoint.html     |  35 +++
 .../2d.path.lineTo.nonfinite.details.html          |  30 ++
 .../path-objects/2d.path.lineTo.nonfinite.html     |  40 +++
 .../element/path-objects/2d.path.moveTo.basic.html |  35 +++
 .../path-objects/2d.path.moveTo.multiple.html      |  35 +++
 .../path-objects/2d.path.moveTo.newsubpath.html    |  35 +++
 .../path-objects/2d.path.moveTo.nonfinite.html     |  39 +++
 .../2d.path.quadraticCurveTo.basic.html            |  34 +++
 .../2d.path.quadraticCurveTo.ensuresubpath.1.html  |  34 +++
 .../2d.path.quadraticCurveTo.ensuresubpath.2.html  |  34 +++
 .../2d.path.quadraticCurveTo.nonfinite.html        |  56 ++++
 .../2d.path.quadraticCurveTo.scaled.html           |  39 +++
 .../2d.path.quadraticCurveTo.shape.html            |  38 +++
 .../element/path-objects/2d.path.rect.basic.html   |  31 ++
 .../element/path-objects/2d.path.rect.closed.html  |  33 ++
 .../element/path-objects/2d.path.rect.end.1.html   |  33 ++
 .../element/path-objects/2d.path.rect.end.2.html   |  38 +++
 .../path-objects/2d.path.rect.negative.html        |  38 +++
 .../path-objects/2d.path.rect.newsubpath.html      |  35 +++
 .../path-objects/2d.path.rect.nonfinite.html       |  56 ++++
 .../path-objects/2d.path.rect.selfintersect.html   |  33 ++
 .../element/path-objects/2d.path.rect.winding.html |  38 +++
 .../element/path-objects/2d.path.rect.zero.1.html  |  33 ++
 .../element/path-objects/2d.path.rect.zero.2.html  |  33 ++
 .../element/path-objects/2d.path.rect.zero.3.html  |  33 ++
 .../element/path-objects/2d.path.rect.zero.4.html  |  33 ++
 .../element/path-objects/2d.path.rect.zero.5.html  |  33 ++
 .../element/path-objects/2d.path.rect.zero.6.html  |  35 +++
 .../2d.path.roundrect.1.radius.dompoint.html       |  54 ++++
 ...oundrect.1.radius.dompoint.single argument.html |  54 ++++
 .../2d.path.roundrect.1.radius.dompointinit.html   |  54 ++++
 ...rect.1.radius.dompointinit.single.argument.html |  54 ++++
 .../2d.path.roundrect.1.radius.double.html         |  34 +++
 ....roundrect.1.radius.double.single.argument.html |  34 +++
 .../2d.path.roundrect.2.radii.1.dompoint.html      |  46 +++
 .../2d.path.roundrect.2.radii.1.dompointinit.html  |  46 +++
 .../2d.path.roundrect.2.radii.1.double.html        |  34 +++
 .../2d.path.roundrect.2.radii.2.dompoint.html      |  46 +++
 .../2d.path.roundrect.2.radii.2.dompointinit.html  |  46 +++
 .../2d.path.roundrect.2.radii.2.double.html        |  34 +++
 .../2d.path.roundrect.3.radii.1.dompoint.html      |  41 +++
 .../2d.path.roundrect.3.radii.1.dompointinit.html  |  41 +++
 .../2d.path.roundrect.3.radii.1.double.html        |  34 +++
 .../2d.path.roundrect.3.radii.2.dompoint.html      |  46 +++
 .../2d.path.roundrect.3.radii.2.dompointinit.html  |  46 +++
 .../2d.path.roundrect.3.radii.2.double.html        |  34 +++
 .../2d.path.roundrect.3.radii.3.dompoint.html      |  41 +++
 .../2d.path.roundrect.3.radii.3.dompointinit.html  |  41 +++
 .../2d.path.roundrect.3.radii.3.double.html        |  34 +++
 .../2d.path.roundrect.4.radii.1.dompoint.html      |  41 +++
 .../2d.path.roundrect.4.radii.1.dompointinit.html  |  41 +++
 .../2d.path.roundrect.4.radii.1.double.html        |  34 +++
 .../2d.path.roundrect.4.radii.2.dompoint.html      |  41 +++
 .../2d.path.roundrect.4.radii.2.dompointinit.html  |  41 +++
 .../2d.path.roundrect.4.radii.2.double.html        |  34 +++
 .../2d.path.roundrect.4.radii.3.dompoint.html      |  41 +++
 .../2d.path.roundrect.4.radii.3.dompointinit.html  |  41 +++
 .../2d.path.roundrect.4.radii.3.double.html        |  34 +++
 .../2d.path.roundrect.4.radii.4.dompoint.html      |  41 +++
 .../2d.path.roundrect.4.radii.4.dompointinit.html  |  41 +++
 .../2d.path.roundrect.4.radii.4.double.html        |  34 +++
 .../path-objects/2d.path.roundrect.badinput.html   |  33 ++
 .../path-objects/2d.path.roundrect.closed.html     |  33 ++
 .../path-objects/2d.path.roundrect.end.1.html      |  33 ++
 .../path-objects/2d.path.roundrect.end.2.html      |  38 +++
 .../path-objects/2d.path.roundrect.end.3.html      |  36 +++
 .../path-objects/2d.path.roundrect.end.4.html      |  36 +++
 .../path-objects/2d.path.roundrect.negative.html   |  44 +++
 .../path-objects/2d.path.roundrect.newsubpath.html |  35 +++
 .../path-objects/2d.path.roundrect.nonfinite.html  | 115 +++++++
 .../2d.path.roundrect.radius.intersecting.1.html   |  39 +++
 .../2d.path.roundrect.radius.intersecting.2.html   |  39 +++
 .../2d.path.roundrect.radius.negative.html         |  31 ++
 .../2d.path.roundrect.radius.noargument.html       |  49 +++
 .../2d.path.roundrect.radius.noarugment.html       |  49 +++
 .../2d.path.roundrect.radius.none.html             |  26 ++
 .../2d.path.roundrect.radius.toomany.html          |  26 ++
 .../2d.path.roundrect.selfintersect.html           |  33 ++
 .../path-objects/2d.path.roundrect.winding.html    |  38 +++
 .../path-objects/2d.path.roundrect.zero.1.html     |  33 ++
 .../path-objects/2d.path.roundrect.zero.2.html     |  33 ++
 .../path-objects/2d.path.roundrect.zero.3.html     |  33 ++
 .../path-objects/2d.path.roundrect.zero.4.html     |  33 ++
 .../path-objects/2d.path.roundrect.zero.5.html     |  33 ++
 .../path-objects/2d.path.roundrect.zero.6.html     |  35 +++
 .../element/path-objects/2d.path.stroke.empty.html |  39 +++
 .../path-objects/2d.path.stroke.overlap.html       |  37 +++
 .../path-objects/2d.path.stroke.overlap.png        | Bin 0 -> 205 bytes
 .../path-objects/2d.path.stroke.prune.arc.html     |  44 +++
 .../path-objects/2d.path.stroke.prune.closed.html  |  40 +++
 .../path-objects/2d.path.stroke.prune.corner.html  |  42 +++
 .../path-objects/2d.path.stroke.prune.curve.html   |  44 +++
 .../path-objects/2d.path.stroke.prune.line.html    |  39 +++
 .../path-objects/2d.path.stroke.prune.rect.html    |  40 +++
 .../path-objects/2d.path.stroke.scale1.html        |  53 ++++
 .../path-objects/2d.path.stroke.scale2.html        |  55 ++++
 .../element/path-objects/2d.path.stroke.skew.html  |  69 +++++
 .../path-objects/2d.path.stroke.unaffected.html    |  41 +++
 .../element/path-objects/2d.path.stroke.union.html |  37 +++
 .../path-objects/2d.path.transformation.basic.html |  35 +++
 .../2d.path.transformation.changing.html           |  41 +++
 .../2d.path.transformation.multiple.html           |  46 +++
 .../2d.imageData.create.and.resize.html            |  34 +++
 .../2d.imageData.create1.basic.html                |  26 ++
 .../2d.imageData.create1.initial.html              |  37 +++
 .../2d.imageData.create1.this.html                 |  29 ++
 .../2d.imageData.create1.type.html                 |  32 ++
 .../2d.imageData.create1.zero.html                 |  26 ++
 .../2d.imageData.create2.basic.html                |  26 ++
 .../2d.imageData.create2.double.html               |  31 ++
 .../2d.imageData.create2.initial.html              |  34 +++
 .../2d.imageData.create2.large.html                |  34 +++
 .../2d.imageData.create2.negative.html             |  32 ++
 .../2d.imageData.create2.nonfinite.html            |  42 +++
 .../2d.imageData.create2.round.html                |  29 ++
 .../2d.imageData.create2.this.html                 |  28 ++
 .../2d.imageData.create2.type.html                 |  32 ++
 .../2d.imageData.create2.zero.html                 |  30 ++
 .../pixel-manipulation/2d.imageData.get.basic.html |  26 ++
 .../pixel-manipulation/2d.imageData.get.clamp.html |  37 +++
 .../2d.imageData.get.double.html                   |  31 ++
 .../2d.imageData.get.invalid.html                  |  44 +++
 .../2d.imageData.get.large.crash.html              |  26 ++
 .../2d.imageData.get.length.html                   |  27 ++
 .../2d.imageData.get.nonfinite.html                |  74 +++++
 .../2d.imageData.get.nonpremul.html                |  33 ++
 .../2d.imageData.get.order.alpha.html              |  30 ++
 .../2d.imageData.get.order.cols.html               |  33 ++
 .../2d.imageData.get.order.rgb.html                |  36 +++
 .../2d.imageData.get.order.rows.html               |  33 ++
 .../pixel-manipulation/2d.imageData.get.range.html |  33 ++
 .../2d.imageData.get.rounding.html                 |  44 +++
 .../2d.imageData.get.source.negative.html          |  45 +++
 .../2d.imageData.get.source.outside.html           |  85 ++++++
 .../2d.imageData.get.source.size.html              |  29 ++
 .../pixel-manipulation/2d.imageData.get.type.html  |  32 ++
 .../2d.imageData.get.unaffected.html               |  41 +++
 .../pixel-manipulation/2d.imageData.get.zero.html  |  32 ++
 .../2d.imageData.object.clamp.html                 |  54 ++++
 .../2d.imageData.object.ctor.array.bounds.html     |  33 ++
 .../2d.imageData.object.ctor.array.html            |  32 ++
 .../2d.imageData.object.ctor.basics.html           | 111 +++++++
 .../2d.imageData.object.ctor.size.bounds.html      |  30 ++
 .../2d.imageData.object.ctor.size.html             |  34 +++
 .../2d.imageData.object.nan.html                   |  32 ++
 .../2d.imageData.object.properties.html            |  29 ++
 .../2d.imageData.object.readonly.html              |  39 +++
 .../2d.imageData.object.round.html                 |  54 ++++
 .../2d.imageData.object.set.html                   |  30 ++
 .../2d.imageData.object.string.html                |  35 +++
 .../2d.imageData.object.undefined.html             |  29 ++
 .../pixel-manipulation/2d.imageData.put.alpha.html |  32 ++
 .../pixel-manipulation/2d.imageData.put.alpha.png  | Bin 0 -> 221 bytes
 .../pixel-manipulation/2d.imageData.put.basic.html |  32 ++
 .../pixel-manipulation/2d.imageData.put.clip.html  |  36 +++
 .../2d.imageData.put.created.html                  |  36 +++
 .../pixel-manipulation/2d.imageData.put.cross.html |  34 +++
 .../2d.imageData.put.dirty.negative.html           |  43 +++
 .../2d.imageData.put.dirty.outside.html            |  45 +++
 .../2d.imageData.put.dirty.rect1.html              |  43 +++
 .../2d.imageData.put.dirty.rect2.html              |  43 +++
 .../2d.imageData.put.dirty.zero.html               |  32 ++
 .../2d.imageData.put.modified.html                 |  37 +++
 .../2d.imageData.put.nonfinite.html                | 108 +++++++
 .../pixel-manipulation/2d.imageData.put.null.html  |  26 ++
 .../pixel-manipulation/2d.imageData.put.path.html  |  33 ++
 .../2d.imageData.put.unaffected.html               |  38 +++
 .../2d.imageData.put.unchanged.html                |  43 +++
 .../2d.imageData.put.wrongtype.html                |  29 ++
 .../html/canvas/element/reset/2d.reset.basic.html  |  35 +++
 .../2d.reset.render.drop_shadow-expected.html      |  14 +
 .../element/reset/2d.reset.render.drop_shadow.html |  22 ++
 ...render.global_composite_operation-expected.html |  15 +
 ...2d.reset.render.global_composite_operation.html |  20 ++
 .../reset/2d.reset.render.line-expected.html       |  19 ++
 .../canvas/element/reset/2d.reset.render.line.html |  28 ++
 .../reset/2d.reset.render.misc-expected.html       |  15 +
 .../canvas/element/reset/2d.reset.render.misc.html |  23 ++
 .../2d.reset.render.miter_limit-expected.html      |  22 ++
 .../element/reset/2d.reset.render.miter_limit.html |  27 ++
 .../reset/2d.reset.render.text-expected.html       |  14 +
 .../canvas/element/reset/2d.reset.render.text.html |  28 ++
 .../reset/2d.reset.state.clip-expected.html        |  14 +
 .../canvas/element/reset/2d.reset.state.clip.html  |  23 ++
 .../element/reset/2d.reset.state.direction.html    |  32 ++
 .../element/reset/2d.reset.state.fill_style.html   |  32 ++
 .../element/reset/2d.reset.state.filter.html       |  32 ++
 .../canvas/element/reset/2d.reset.state.font.html  |  32 ++
 .../element/reset/2d.reset.state.font_kerning.html |  32 ++
 .../element/reset/2d.reset.state.font_stretch.html |  32 ++
 .../reset/2d.reset.state.font_variant_caps.html    |  32 ++
 .../element/reset/2d.reset.state.global_alpha.html |  32 ++
 .../2d.reset.state.global_composite_operation.html |  32 ++
 .../2d.reset.state.image_smoothing_enabled.html    |  32 ++
 .../2d.reset.state.image_smoothing_quality.html    |  32 ++
 .../reset/2d.reset.state.letter_spacing.html       |  32 ++
 .../element/reset/2d.reset.state.line_cap.html     |  32 ++
 .../element/reset/2d.reset.state.line_dash.html    |  29 ++
 .../reset/2d.reset.state.line_dash_offset.html     |  32 ++
 .../element/reset/2d.reset.state.line_join.html    |  32 ++
 .../element/reset/2d.reset.state.line_width.html   |  32 ++
 .../element/reset/2d.reset.state.miter_limit.html  |  32 ++
 .../element/reset/2d.reset.state.shadow_blur.html  |  32 ++
 .../element/reset/2d.reset.state.shadow_color.html |  32 ++
 .../reset/2d.reset.state.shadow_offset_x.html      |  32 ++
 .../reset/2d.reset.state.shadow_offset_y.html      |  32 ++
 .../element/reset/2d.reset.state.stroke_style.html |  32 ++
 .../element/reset/2d.reset.state.text_align.html   |  32 ++
 .../reset/2d.reset.state.text_baseline.html        |  32 ++
 .../reset/2d.reset.state.text_rendering.html       |  32 ++
 .../2d.reset.state.transformation_matrix.html      |  29 ++
 .../element/reset/2d.reset.state.word_spacing.html |  32 ++
 .../scroll/2d.scrollPathIntoView.basic.html        |  37 +++
 .../element/scroll/2d.scrollPathIntoView.path.html |  37 +++
 .../scroll/2d.scrollPathIntoView.verticalLR.html   |  38 +++
 .../scroll/2d.scrollPathIntoView.verticalRL.html   |  40 +++
 .../canvas/element/shadows/2d.shadow.alpha.1.html  |  32 ++
 .../canvas/element/shadows/2d.shadow.alpha.2.html  |  32 ++
 .../canvas/element/shadows/2d.shadow.alpha.2.png   | Bin 0 -> 206 bytes
 .../canvas/element/shadows/2d.shadow.alpha.3.html  |  34 +++
 .../canvas/element/shadows/2d.shadow.alpha.3.png   | Bin 0 -> 206 bytes
 .../canvas/element/shadows/2d.shadow.alpha.4.html  |  34 +++
 .../canvas/element/shadows/2d.shadow.alpha.4.png   | Bin 0 -> 206 bytes
 .../canvas/element/shadows/2d.shadow.alpha.5.html  |  33 ++
 .../canvas/element/shadows/2d.shadow.alpha.5.png   | Bin 0 -> 206 bytes
 .../2d.shadow.attributes.shadowBlur.initial.html   |  26 ++
 .../2d.shadow.attributes.shadowBlur.invalid.html   |  52 ++++
 .../2d.shadow.attributes.shadowBlur.valid.html     |  36 +++
 ...hadow.attributes.shadowColor.current.basic.html |  28 ++
 ...dow.attributes.shadowColor.current.changed.html |  29 ++
 ...dow.attributes.shadowColor.current.removed.html |  34 +++
 .../2d.shadow.attributes.shadowColor.initial.html  |  26 ++
 .../2d.shadow.attributes.shadowColor.invalid.html  |  40 +++
 .../2d.shadow.attributes.shadowColor.valid.html    |  30 ++
 .../2d.shadow.attributes.shadowOffset.initial.html |  27 ++
 .../2d.shadow.attributes.shadowOffset.invalid.html |  66 ++++
 .../2d.shadow.attributes.shadowOffset.valid.html   |  49 +++
 .../shadows/2d.shadow.blur.high-manual.html        |  31 ++
 .../canvas/element/shadows/2d.shadow.blur.high.png | Bin 0 -> 246 bytes
 .../element/shadows/2d.shadow.blur.low-manual.html |  38 +++
 .../canvas/element/shadows/2d.shadow.blur.low.png  | Bin 0 -> 1586 bytes
 .../element/shadows/2d.shadow.canvas.alpha.html    |  39 +++
 .../element/shadows/2d.shadow.canvas.alpha.png     | Bin 0 -> 206 bytes
 .../element/shadows/2d.shadow.canvas.basic.html    |  39 +++
 .../shadows/2d.shadow.canvas.transparent.1.html    |  37 +++
 .../shadows/2d.shadow.canvas.transparent.2.html    |  45 +++
 .../canvas/element/shadows/2d.shadow.clip.1.html   |  41 +++
 .../canvas/element/shadows/2d.shadow.clip.2.html   |  41 +++
 .../canvas/element/shadows/2d.shadow.clip.3.html   |  42 +++
 .../element/shadows/2d.shadow.composite.1.html     |  34 +++
 .../element/shadows/2d.shadow.composite.2.html     |  34 +++
 .../element/shadows/2d.shadow.composite.3.html     |  35 +++
 .../element/shadows/2d.shadow.enable.blur.html     |  31 ++
 .../element/shadows/2d.shadow.enable.off.1.html    |  29 ++
 .../element/shadows/2d.shadow.enable.off.2.html    |  30 ++
 .../canvas/element/shadows/2d.shadow.enable.x.html |  31 ++
 .../canvas/element/shadows/2d.shadow.enable.y.html |  31 ++
 .../element/shadows/2d.shadow.gradient.alpha.html  |  36 +++
 .../element/shadows/2d.shadow.gradient.alpha.png   | Bin 0 -> 206 bytes
 .../element/shadows/2d.shadow.gradient.basic.html  |  36 +++
 .../shadows/2d.shadow.gradient.transparent.1.html  |  36 +++
 .../shadows/2d.shadow.gradient.transparent.2.html  |  42 +++
 .../element/shadows/2d.shadow.image.alpha.html     |  34 +++
 .../element/shadows/2d.shadow.image.alpha.png      | Bin 0 -> 206 bytes
 .../element/shadows/2d.shadow.image.basic.html     |  34 +++
 .../element/shadows/2d.shadow.image.scale.html     |  36 +++
 .../element/shadows/2d.shadow.image.section.html   |  36 +++
 .../shadows/2d.shadow.image.transparent.1.html     |  34 +++
 .../shadows/2d.shadow.image.transparent.2.html     |  40 +++
 .../shadows/2d.shadow.offset.negativeX.html        |  33 ++
 .../shadows/2d.shadow.offset.negativeY.html        |  33 ++
 .../shadows/2d.shadow.offset.positiveX.html        |  33 ++
 .../shadows/2d.shadow.offset.positiveY.html        |  33 ++
 .../canvas/element/shadows/2d.shadow.outside.html  |  41 +++
 .../element/shadows/2d.shadow.pattern.alpha.html   |  36 +++
 .../element/shadows/2d.shadow.pattern.alpha.png    | Bin 0 -> 206 bytes
 .../element/shadows/2d.shadow.pattern.basic.html   |  36 +++
 .../shadows/2d.shadow.pattern.transparent.1.html   |  36 +++
 .../shadows/2d.shadow.pattern.transparent.2.html   |  40 +++
 .../element/shadows/2d.shadow.stroke.basic.html    |  39 +++
 .../element/shadows/2d.shadow.stroke.cap.1.html    |  42 +++
 .../element/shadows/2d.shadow.stroke.cap.2.html    |  40 +++
 .../element/shadows/2d.shadow.stroke.join.1.html   |  42 +++
 .../element/shadows/2d.shadow.stroke.join.2.html   |  44 +++
 .../element/shadows/2d.shadow.stroke.join.3.html   |  43 +++
 .../element/shadows/2d.shadow.transform.1.html     |  33 ++
 .../element/shadows/2d.shadow.transform.2.html     |  33 ++
 .../canvas/element/text/2d.text.align.default.html |  26 ++
 .../canvas/element/text/2d.text.align.invalid.html |  40 +++
 .../canvas/element/text/2d.text.align.valid.html   |  39 +++
 .../element/text/2d.text.baseline.default.html     |  26 ++
 .../element/text/2d.text.baseline.invalid.html     |  40 +++
 .../element/text/2d.text.baseline.valid.html       |  42 +++
 .../element/text/2d.text.draw.align.center.html    |  47 +++
 .../element/text/2d.text.draw.align.end.ltr.html   |  47 +++
 .../element/text/2d.text.draw.align.end.rtl.html   |  47 +++
 .../element/text/2d.text.draw.align.left.html      |  47 +++
 .../element/text/2d.text.draw.align.right.html     |  47 +++
 .../element/text/2d.text.draw.align.start.ltr.html |  47 +++
 .../element/text/2d.text.draw.align.start.rtl.html |  47 +++
 .../text/2d.text.draw.baseline.alphabetic.html     |  47 +++
 .../element/text/2d.text.draw.baseline.bottom.html |  47 +++
 .../text/2d.text.draw.baseline.hanging.html        |  47 +++
 .../text/2d.text.draw.baseline.ideographic.html    |  47 +++
 .../element/text/2d.text.draw.baseline.middle.html |  47 +++
 .../element/text/2d.text.draw.baseline.top.html    |  47 +++
 .../text/2d.text.draw.fill.basic-manual.html       |  31 ++
 .../element/text/2d.text.draw.fill.basic.png       | Bin 0 -> 1137 bytes
 .../text/2d.text.draw.fill.maxWidth.NaN.html       |  31 ++
 .../text/2d.text.draw.fill.maxWidth.bound.html     |  44 +++
 .../text/2d.text.draw.fill.maxWidth.fontface.html  |  44 +++
 .../2d.text.draw.fill.maxWidth.large-manual.html   |  30 ++
 .../text/2d.text.draw.fill.maxWidth.large.png      | Bin 0 -> 1137 bytes
 .../text/2d.text.draw.fill.maxWidth.negative.html  |  31 ++
 .../text/2d.text.draw.fill.maxWidth.small.html     |  31 ++
 .../text/2d.text.draw.fill.maxWidth.zero.html      |  31 ++
 .../element/text/2d.text.draw.fill.rtl-manual.html |  31 ++
 .../canvas/element/text/2d.text.draw.fill.rtl.png  | Bin 0 -> 1137 bytes
 .../element/text/2d.text.draw.fill.unaffected.html |  41 +++
 .../canvas/element/text/2d.text.draw.fontface.html |  44 +++
 .../text/2d.text.draw.fontface.notinpage.html      |  43 +++
 .../element/text/2d.text.draw.fontface.repeat.html |  46 +++
 .../text/2d.text.draw.kern.consistent-manual.html  |  35 +++
 .../element/text/2d.text.draw.space.basic.html     |  42 +++
 .../text/2d.text.draw.space.collapse.end.html      |  43 +++
 .../text/2d.text.draw.space.collapse.nonspace.html |  42 +++
 .../text/2d.text.draw.space.collapse.other.html    |  42 +++
 .../text/2d.text.draw.space.collapse.space.html    |  42 +++
 .../text/2d.text.draw.space.collapse.start.html    |  42 +++
 .../text/2d.text.draw.stroke.basic-manual.html     |  32 ++
 .../element/text/2d.text.draw.stroke.basic.png     | Bin 0 -> 1634 bytes
 .../text/2d.text.draw.stroke.unaffected.html       |  42 +++
 .../2d.text.drawing.style.absolute.spacing.html    |  45 +++
 ...d.text.drawing.style.font-relative.spacing.html |  37 +++
 .../text/2d.text.drawing.style.fontKerning.html    |  33 ++
 ...t.drawing.style.fontKerning.with.uppercase.html |  57 ++++
 ...2d.text.drawing.style.fontStretch.settings.html |  81 +++++
 ...2d.text.drawing.style.fontVariant.settings.html |  78 +++++
 .../2d.text.drawing.style.invalid.spacing.html     |  42 +++
 ...xt.drawing.style.letterSpacing.change.font.html |  45 +++
 ...d.text.drawing.style.letterSpacing.measure.html |  54 ++++
 .../2d.text.drawing.style.measure.direction.html   |  32 ++
 .../2d.text.drawing.style.measure.rtl.text.html    |  30 ++
 .../2d.text.drawing.style.measure.textAlign.html   |  32 ++
 .../2d.text.drawing.style.nonfinite.spacing.html   |  37 +++
 ....text.drawing.style.textRendering.settings.html |  80 +++++
 ...text.drawing.style.wordSpacing.change.font.html |  45 +++
 .../2d.text.drawing.style.wordSpacing.measure.html |  54 ++++
 .../canvas/element/text/2d.text.font.default.html  |  26 ++
 .../element/text/2d.text.font.parse.basic.html     |  30 ++
 .../element/text/2d.text.font.parse.complex.html   |  27 ++
 .../element/text/2d.text.font.parse.complex2.html  |  27 ++
 .../element/text/2d.text.font.parse.family.html    |  27 ++
 .../element/text/2d.text.font.parse.invalid.html   |  71 +++++
 ...2d.text.font.parse.size.percentage.default.html |  29 ++
 .../text/2d.text.font.parse.size.percentage.html   |  29 ++
 .../element/text/2d.text.font.parse.system.html    |  27 ++
 .../element/text/2d.text.font.parse.tiny.html      |  27 ++
 .../element/text/2d.text.font.relative_size.html   |  29 ++
 .../canvas/element/text/2d.text.font.weight.html   |  30 ++
 .../text/2d.text.fontVariantCaps1-expected.html    |  15 +
 .../element/text/2d.text.fontVariantCaps1.html     |  18 ++
 .../element/text/2d.text.fontVariantCaps2.html     |  32 ++
 .../text/2d.text.fontVariantCaps3-expected.html    |  15 +
 .../element/text/2d.text.fontVariantCaps3.html     |  19 ++
 .../text/2d.text.fontVariantCaps4-expected.html    |  15 +
 .../element/text/2d.text.fontVariantCaps4.html     |  19 ++
 .../text/2d.text.fontVariantCaps5-expected.html    |  15 +
 .../element/text/2d.text.fontVariantCaps5.html     |  19 ++
 .../text/2d.text.fontVariantCaps6-expected.html    |  15 +
 .../element/text/2d.text.fontVariantCaps6.html     |  19 ++
 .../text/2d.text.measure.actualBoundingBox.html    |  61 ++++
 .../element/text/2d.text.measure.advances.html     |  52 ++++
 .../element/text/2d.text.measure.baselines.html    |  45 +++
 .../text/2d.text.measure.emHeights-low-ascent.html |  45 +++
 .../2d.text.measure.emHeights-zero-descent.html    |  45 +++
 .../element/text/2d.text.measure.emHeights.html    |  45 +++
 ...ext.measure.fontBoundingBox-reduced-ascent.html |  43 +++
 ....text.measure.fontBoundingBox-zero-descent.html |  43 +++
 .../text/2d.text.measure.fontBoundingBox.ahem.html |  42 +++
 .../text/2d.text.measure.fontBoundingBox.html      |  43 +++
 .../element/text/2d.text.measure.width.basic.html  |  42 +++
 .../element/text/2d.text.measure.width.empty.html  |  37 +++
 .../element/text/2d.text.measure.width.space.html  |  43 +++
 .../element/text/2d.text.setFont.mathFont.html     |  26 ++
 .../canvas/element/text/direction-inherit-rtl.html |  31 ++
 .../html/canvas/element/text/direction-ltr.html    |  31 ++
 .../html/canvas/element/text/direction-rtl.html    |  31 ++
 .../element/text/parent-style-relative-units.html  |  23 ++
 .../text/reference/direction-default-ref.html      |  27 ++
 .../element/text/reference/direction-rtl-ref.html  |  27 ++
 .../2d.state.saverestore.bitmap.html               |  32 ++
 .../2d.state.saverestore.clip.html                 |  34 +++
 .../2d.state.saverestore.fillStyle.html            |  40 +++
 .../2d.state.saverestore.font.html                 |  40 +++
 .../2d.state.saverestore.globalAlpha.html          |  40 +++
 ...state.saverestore.globalCompositeOperation.html |  40 +++
 .../2d.state.saverestore.lineCap.html              |  40 +++
 .../2d.state.saverestore.lineJoin.html             |  40 +++
 .../2d.state.saverestore.lineWidth.html            |  40 +++
 .../2d.state.saverestore.miterLimit.html           |  40 +++
 .../2d.state.saverestore.path.html                 |  33 ++
 .../2d.state.saverestore.shadowBlur.html           |  40 +++
 .../2d.state.saverestore.shadowColor.html          |  40 +++
 .../2d.state.saverestore.shadowOffsetX.html        |  40 +++
 .../2d.state.saverestore.shadowOffsetY.html        |  40 +++
 .../2d.state.saverestore.stack.html                |  35 +++
 .../2d.state.saverestore.stackdepth.html           |  36 +++
 .../2d.state.saverestore.strokeStyle.html          |  40 +++
 .../2d.state.saverestore.textAlign.html            |  40 +++
 .../2d.state.saverestore.textBaseline.html         |  40 +++
 .../2d.state.saverestore.transformation.html       |  33 ++
 .../2d.state.saverestore.underflow.html            |  30 ++
 .../transformations/2d.transformation.order.html   |  33 ++
 .../2d.transformation.rotate.direction.html        |  32 ++
 .../2d.transformation.rotate.nonfinite.html        |  37 +++
 .../2d.transformation.rotate.radians.html          |  32 ++
 .../2d.transformation.rotate.wrap.html             |  37 +++
 .../2d.transformation.rotate.wrapnegative.html     |  34 +++
 .../2d.transformation.rotate.zero.html             |  32 ++
 .../2d.transformation.scale.basic.html             |  32 ++
 .../2d.transformation.scale.large.html             |  32 ++
 .../2d.transformation.scale.multiple.html          |  33 ++
 .../2d.transformation.scale.negative.html          |  41 +++
 .../2d.transformation.scale.nonfinite.html         |  41 +++
 .../2d.transformation.scale.zero.html              |  43 +++
 .../2d.transformation.setTransform.multiple.html   |  34 +++
 .../2d.transformation.setTransform.nonfinite.html  | 109 +++++++
 .../2d.transformation.setTransform.skewed.html     |  54 ++++
 .../2d.transformation.transform.identity.html      |  32 ++
 .../2d.transformation.transform.multiply.html      |  33 ++
 .../2d.transformation.transform.nonfinite.html     | 109 +++++++
 .../2d.transformation.transform.skewed.html        |  54 ++++
 .../2d.transformation.translate.basic.html         |  32 ++
 .../2d.transformation.translate.nonfinite.html     |  41 +++
 .../canvas/element/video/2d.video.invalid.html     |  30 ++
 .../2d.color.space.p3.fillText.html                |  58 ++++
 .../2d.color.space.p3.fillText.shadow.html         |  62 ++++
 .../2d.color.space.p3.strokeText.html              |  59 ++++
 .../wide-gamut-canvas/2d.color.space.p3.to.p3.html |  38 +++
 .../2d.color.space.p3.to.srgb.html                 |  37 +++
 .../2d.color.space.p3.toBlob.p3.canvas.html        |  50 +++
 ...2d.color.space.p3.toBlob.with.putImageData.html |  56 ++++
 ...2d.color.space.p3.toDataURL.jpeg.p3.canvas.html |  46 +++
 .../2d.color.space.p3.toDataURL.p3.canvas.html     |  46 +++
 ...color.space.p3.toDataURL.with.putImageData.html |  53 ++++
 1660 files changed, 50611 insertions(+)
 create mode 100644 testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.basics.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.delete.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.drawings.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.missingargs.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.exists.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.cache.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.create.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.invalid.args.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.prototype.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.shared.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.exists.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.extend.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.prototype.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.replace.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.unique.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.initial.reset.2dstate.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.readonly.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.reference.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.hex.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.hex.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.basics.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.delete.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.drawings.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.missingargs.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.3arg.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.5arg.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.clip.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.composite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.floatsource.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.emptysrc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.immediate.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.nosrc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.reload.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.removedsrc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedest.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedir.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativesource.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonexistent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nowrap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.null.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.svg.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.transform.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.paragraph.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.image.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.clip.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalalpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalcomposite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.transform.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.clip.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.transform.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.clip.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalalpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalcomposite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.transform.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSHSL.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSRGB.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.transparency.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.currentcolor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.halftransparent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.semitransparent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.solid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.transparent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidstring.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidtype.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsl-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-hsla-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgb-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.css-color-4-rgba-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex7.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex8.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.system.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.toStringFunctionCallback.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.invalid.inputs.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.negative.rotation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.positive.rotation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.solid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fill.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillRect.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillText.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.stroke.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeRect.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeText.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.compare.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.crosscanvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidcolor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidoffset.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.return.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.type.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.update.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.behind.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.beside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.bottom.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.cylinder.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.front.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.top.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.equal.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.transform.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.animated.gif.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.image.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.nocontext.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.type.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.zerocanvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.crosscanvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.emptysrc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.immediate.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.nosrc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.reload.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.removedsrc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent-but-loading.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nosrc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.null.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.string.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.undefined.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zeroheight.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zerowidth.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.image.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.coord1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.coord1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.case.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.null.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.nullsuffix.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.undefined.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognised.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognisednull.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.nonexistent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zeroheight.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zerowidth.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.identity.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.infinity.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.transparency.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colormix.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.exceptions.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/filters/2d.filter.value.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.layer-rendering-state-reset-in-layer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-endLayer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-save.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.restore.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save-beginLayer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_reset_restore.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_restore.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.open.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cross.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.fill.noop.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.invalid.strokestyle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.miter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.acute.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.within.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/README.md
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/canvas-with-padding.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_crossorigin.sub.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_with_foreign_object_does_not_taint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect.tentative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_complexshapes_ispointInpath_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_001.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_002.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_003.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_004.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_005.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/2d.fillStyle.parse.current.notrendered.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/canvas_colorsandstyles_createlineargradient_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-fillStyle-opacity.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-globalAlpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-crash.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-sequence-conversion.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/image-smoothing/imagesmoothing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-ImageBitmap-close.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-resize.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-video-resize.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/common.sub.js
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-blob-invalidtype.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-bounds.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-colorSpaceConversion.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage-closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation_none.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-flipY.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-in-worker-transfer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-origin.sub.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-serializable.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-sizeOverflow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-transfer.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-worker.js
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imagebitmap-replication-exif-orientation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_1.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_2.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_3.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_4.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_5.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_6.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_7.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_8.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/serialize-worker.js
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/transfer-worker.js
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/imagebitmap/worker-onmessage-noop.js
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_a.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/line-styles/setLineDash.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/shadows/shadowBlur_gaussian_tolerance.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.condensed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.expanded.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-condensed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-expanded.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.normal.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-condensed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-expanded.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-condensed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-expanded.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.state.saverestore.imageSmoothingEnabled.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.zero.size.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/transformations/2d.transformation.getTransform.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001-ref.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/transformations/transform_a.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/transformations/transform_ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1-expected.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2-expected.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3-expected.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4-expected.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4.htm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avif
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.ico
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webp
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avif
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmp
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gif
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.ico
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webp
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webm
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.end.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonempty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zeroradius.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.scale.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.end.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.start.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.transformation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.beginPath.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.scaled.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.shape.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.intersect.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.unaffected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.newline.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.nextpoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.ellipse.basics.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.unaffected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.add.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.initial.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.arc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bezier.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bigarc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.edge.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.subpath.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.unclosed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.winding.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInStroke.scaleddashes.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.multi.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nextpoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.details.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.multiple.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.newsubpath.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.scaled.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.shape.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.newsubpath.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.selfintersect.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.winding.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.single argument.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.single.argument.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.single.argument.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompoint.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompointinit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.badinput.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.newsubpath.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noargument.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noarugment.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.none.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.toomany.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.selfintersect.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.winding.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.corner.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.rect.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.skew.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.unaffected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.union.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.changing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.multiple.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create.and.resize.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.initial.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.this.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.type.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.initial.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.large.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.round.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.this.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.type.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.clamp.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.double.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.large.crash.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.length.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonpremul.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.cols.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rgb.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rows.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.range.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.rounding.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.size.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.type.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.unaffected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.clamp.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.bounds.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.bounds.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.nan.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.properties.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.readonly.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.round.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.set.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.string.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.undefined.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.clip.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.created.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.cross.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.modified.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.null.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unaffected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unchanged.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.wrongtype.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.direction.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.fill_style.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.filter.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_kerning.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_stretch.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_variant_caps.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_composite_operation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_enabled.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_quality.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.letter_spacing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_cap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash_offset.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_join.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_width.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.miter_limit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_blur.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_color.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_x.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_y.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.stroke_style.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_align.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_baseline.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_rendering.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.transformation_matrix.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.word_spacing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalLR.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalRL.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.initial.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.changed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.removed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.initial.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.initial.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.blur.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.off.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.off.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.x.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.y.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.alpha.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.alpha.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.scale.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.section.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeX.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeY.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveX.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveY.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.outside.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.alpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.alpha.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.transparent.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.transparent.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.align.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.align.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.align.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.valid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.center.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.ltr.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.rtl.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.left.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.right.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.ltr.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.rtl.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.alphabetic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.bottom.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.hanging.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.ideographic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.middle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.top.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.NaN.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.small.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.unaffected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.notinpage.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.repeat.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.kern.consistent-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.end.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.nonspace.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.other.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.space.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.start.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic-manual.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic.png
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.unaffected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.absolute.spacing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.font-relative.spacing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.with.uppercase.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontStretch.settings.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontVariant.settings.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.invalid.spacing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.change.font.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.measure.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.direction.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.rtl.text.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.textAlign.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.nonfinite.spacing.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.textRendering.settings.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.change.font.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.measure.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.family.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.default.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.system.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.tiny.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.relative_size.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.font.weight.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps2.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6-expected.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.actualBoundingBox.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.advances.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.baselines.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-low-ascent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-zero-descent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-reduced-ascent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-zero-descent.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.ahem.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.empty.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.space.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/2d.text.setFont.mathFont.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/direction-inherit-rtl.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/direction-ltr.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/direction-rtl.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/parent-style-relative-units.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/reference/direction-default-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/text/reference/direction-rtl-ref.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.bitmap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.clip.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.fillStyle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.font.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalAlpha.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalCompositeOperation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineCap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineJoin.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineWidth.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.miterLimit.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.path.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowBlur.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowColor.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetX.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetY.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stack.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stackdepth.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.strokeStyle.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textAlign.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textBaseline.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.transformation.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.underflow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.order.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.direction.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.radians.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrap.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrapnegative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.large.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.multiple.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.negative.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.zero.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.multiple.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.skewed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.identity.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.multiply.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.skewed.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.basic.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.nonfinite.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/video/2d.video.invalid.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html
 create mode 100644 testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.html

(limited to 'testing/web-platform/tests/html/canvas/element')

diff --git a/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.basics.html b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.basics.html
new file mode 100644
index 0000000000..fed4aa61ba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.basics.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.conformance.requirements.basics</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.conformance.requirements.basics</h1>
+<p class="desc">void methods return undefined</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("void methods return undefined");
+_addTest(function(canvas, ctx) {
+
+_assertSame(ctx.save(), undefined, "ctx.save()", "undefined");
+_assertSame(ctx.restore(), undefined, "ctx.restore()", "undefined");
+_assertSame(ctx.scale(1, 1), undefined, "ctx.scale(1, 1)", "undefined");
+_assertSame(ctx.rotate(0), undefined, "ctx.rotate(0)", "undefined");
+_assertSame(ctx.translate(0, 0), undefined, "ctx.translate(0, 0)", "undefined");
+if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+    _assertSame(ctx.transform(1, 0, 0, 1, 0, 0), undefined, "ctx.transform(1, 0, 0, 1, 0, 0)", "undefined");
+}
+if (ctx.setTransform) {
+    _assertSame(ctx.setTransform(1, 0, 0, 1, 0, 0), undefined, "ctx.setTransform(1, 0, 0, 1, 0, 0)", "undefined");
+    _assertSame(ctx.setTransform(), undefined, "ctx.setTransform()", "undefined");
+}
+_assertSame(ctx.clearRect(0, 0, 0, 0), undefined, "ctx.clearRect(0, 0, 0, 0)", "undefined");
+_assertSame(ctx.fillRect(0, 0, 0, 0), undefined, "ctx.fillRect(0, 0, 0, 0)", "undefined");
+_assertSame(ctx.strokeRect(0, 0, 0, 0), undefined, "ctx.strokeRect(0, 0, 0, 0)", "undefined");
+_assertSame(ctx.beginPath(), undefined, "ctx.beginPath()", "undefined");
+_assertSame(ctx.closePath(), undefined, "ctx.closePath()", "undefined");
+_assertSame(ctx.moveTo(0, 0), undefined, "ctx.moveTo(0, 0)", "undefined");
+_assertSame(ctx.lineTo(0, 0), undefined, "ctx.lineTo(0, 0)", "undefined");
+_assertSame(ctx.quadraticCurveTo(0, 0, 0, 0), undefined, "ctx.quadraticCurveTo(0, 0, 0, 0)", "undefined");
+_assertSame(ctx.bezierCurveTo(0, 0, 0, 0, 0, 0), undefined, "ctx.bezierCurveTo(0, 0, 0, 0, 0, 0)", "undefined");
+_assertSame(ctx.arcTo(0, 0, 0, 0, 1), undefined, "ctx.arcTo(0, 0, 0, 0, 1)", "undefined");
+_assertSame(ctx.rect(0, 0, 0, 0), undefined, "ctx.rect(0, 0, 0, 0)", "undefined");
+_assertSame(ctx.arc(0, 0, 1, 0, 0, true), undefined, "ctx.arc(0, 0, 1, 0, 0, true)", "undefined");
+_assertSame(ctx.fill(), undefined, "ctx.fill()", "undefined");
+_assertSame(ctx.stroke(), undefined, "ctx.stroke()", "undefined");
+_assertSame(ctx.clip(), undefined, "ctx.clip()", "undefined");
+if (ctx.fillText) {
+    _assertSame(ctx.fillText('test', 0, 0), undefined, "ctx.fillText('test', 0, 0)", "undefined");
+    _assertSame(ctx.strokeText('test', 0, 0), undefined, "ctx.strokeText('test', 0, 0)", "undefined");
+}
+if (ctx.putImageData) {
+    _assertSame(ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0), undefined, "ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0)", "undefined");
+}
+_assertSame(ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0), undefined, "ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0)", "undefined");
+_assertSame(ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white'), undefined, "ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white')", "undefined");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.delete.html b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.delete.html
new file mode 100644
index 0000000000..bfdf94319b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.delete.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.conformance.requirements.delete</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.conformance.requirements.delete</h1>
+<p class="desc">window.CanvasRenderingContext2D is Configurable</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.CanvasRenderingContext2D is Configurable");
+_addTest(function(canvas, ctx) {
+
+_assertDifferent(window.CanvasRenderingContext2D, undefined, "window.CanvasRenderingContext2D", "undefined");
+_assertSame(delete window.CanvasRenderingContext2D, true, "delete window.CanvasRenderingContext2D", "true");
+_assertSame(window.CanvasRenderingContext2D, undefined, "window.CanvasRenderingContext2D", "undefined");
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.drawings.html b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.drawings.html
new file mode 100644
index 0000000000..40038b2191
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.drawings.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.conformance.requirements.drawings</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.conformance.requirements.drawings</h1>
+<p class="desc">void methods return undefined</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("void methods return undefined");
+_addTest(function(canvas, ctx) {
+
+_assertSame(ctx.drawImage(document.getElementById('yellow.png'), 0, 0, 1, 1, 0, 0, 0, 0), undefined, "ctx.drawImage(document.getElementById('yellow.png'), 0, 0, 1, 1, 0, 0, 0, 0)", "undefined");
+
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.missingargs.html b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.missingargs.html
new file mode 100644
index 0000000000..2ac3d58f4e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/2d.conformance.requirements.missingargs.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.conformance.requirements.missingargs</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.conformance.requirements.missingargs</h1>
+<p class="desc">Missing arguments cause TypeError</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("Missing arguments cause TypeError");
+_addTest(function(canvas, ctx) {
+
+assert_throws_js(TypeError, function() { ctx.scale(); });
+assert_throws_js(TypeError, function() { ctx.scale(1); });
+assert_throws_js(TypeError, function() { ctx.rotate(); });
+assert_throws_js(TypeError, function() { ctx.translate(); });
+assert_throws_js(TypeError, function() { ctx.translate(0); });
+if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+    assert_throws_js(TypeError, function() { ctx.transform(); });
+    assert_throws_js(TypeError, function() { ctx.transform(1); });
+    assert_throws_js(TypeError, function() { ctx.transform(1, 0); });
+    assert_throws_js(TypeError, function() { ctx.transform(1, 0, 0); });
+    assert_throws_js(TypeError, function() { ctx.transform(1, 0, 0, 1); });
+    assert_throws_js(TypeError, function() { ctx.transform(1, 0, 0, 1, 0); });
+}
+if (ctx.setTransform) {
+    assert_throws_js(TypeError, function() { ctx.setTransform(1); });
+    assert_throws_js(TypeError, function() { ctx.setTransform(1, 0); });
+    assert_throws_js(TypeError, function() { ctx.setTransform(1, 0, 0); });
+    assert_throws_js(TypeError, function() { ctx.setTransform(1, 0, 0, 1); });
+    assert_throws_js(TypeError, function() { ctx.setTransform(1, 0, 0, 1, 0); });
+}
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0); });
+assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0); });
+assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.createPattern(canvas); });
+assert_throws_js(TypeError, function() { ctx.clearRect(); });
+assert_throws_js(TypeError, function() { ctx.clearRect(0); });
+assert_throws_js(TypeError, function() { ctx.clearRect(0, 0); });
+assert_throws_js(TypeError, function() { ctx.clearRect(0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.fillRect(); });
+assert_throws_js(TypeError, function() { ctx.fillRect(0); });
+assert_throws_js(TypeError, function() { ctx.fillRect(0, 0); });
+assert_throws_js(TypeError, function() { ctx.fillRect(0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.strokeRect(); });
+assert_throws_js(TypeError, function() { ctx.strokeRect(0); });
+assert_throws_js(TypeError, function() { ctx.strokeRect(0, 0); });
+assert_throws_js(TypeError, function() { ctx.strokeRect(0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.moveTo(); });
+assert_throws_js(TypeError, function() { ctx.moveTo(0); });
+assert_throws_js(TypeError, function() { ctx.lineTo(); });
+assert_throws_js(TypeError, function() { ctx.lineTo(0); });
+assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(); });
+assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(0); });
+assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(0, 0); });
+assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.bezierCurveTo(); });
+assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0); });
+assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0); });
+assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0, 0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.arcTo(); });
+assert_throws_js(TypeError, function() { ctx.arcTo(0); });
+assert_throws_js(TypeError, function() { ctx.arcTo(0, 0); });
+assert_throws_js(TypeError, function() { ctx.arcTo(0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.arcTo(0, 0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.rect(); });
+assert_throws_js(TypeError, function() { ctx.rect(0); });
+assert_throws_js(TypeError, function() { ctx.rect(0, 0); });
+assert_throws_js(TypeError, function() { ctx.rect(0, 0, 0); });
+assert_throws_js(TypeError, function() { ctx.arc(); });
+assert_throws_js(TypeError, function() { ctx.arc(0); });
+assert_throws_js(TypeError, function() { ctx.arc(0, 0); });
+assert_throws_js(TypeError, function() { ctx.arc(0, 0, 1); });
+assert_throws_js(TypeError, function() { ctx.arc(0, 0, 1, 0); });
+// (6th argument to arc is optional)
+if (ctx.isPointInPath) {
+    assert_throws_js(TypeError, function() { ctx.isPointInPath(); });
+    assert_throws_js(TypeError, function() { ctx.isPointInPath(0); });
+}
+if (ctx.drawFocusRing) {
+    assert_throws_js(TypeError, function() { ctx.drawFocusRing(); });
+    assert_throws_js(TypeError, function() { ctx.drawFocusRing(canvas); });
+    assert_throws_js(TypeError, function() { ctx.drawFocusRing(canvas, 0); });
+}
+if (ctx.fillText) {
+    assert_throws_js(TypeError, function() { ctx.fillText(); });
+    assert_throws_js(TypeError, function() { ctx.fillText('test'); });
+    assert_throws_js(TypeError, function() { ctx.fillText('test', 0); });
+    assert_throws_js(TypeError, function() { ctx.strokeText(); });
+    assert_throws_js(TypeError, function() { ctx.strokeText('test'); });
+    assert_throws_js(TypeError, function() { ctx.strokeText('test', 0); });
+    assert_throws_js(TypeError, function() { ctx.measureText(); });
+}
+assert_throws_js(TypeError, function() { ctx.drawImage(); });
+assert_throws_js(TypeError, function() { ctx.drawImage(canvas); });
+assert_throws_js(TypeError, function() { ctx.drawImage(canvas, 0); });
+// TODO: n >= 3 args on drawImage could be either a valid overload,
+// or too few for another overload, or too many for another
+// overload - what should happen?
+if (ctx.createImageData) {
+    assert_throws_js(TypeError, function() { ctx.createImageData(); });
+    assert_throws_js(TypeError, function() { ctx.createImageData(1); });
+}
+if (ctx.getImageData) {
+    assert_throws_js(TypeError, function() { ctx.getImageData(); });
+    assert_throws_js(TypeError, function() { ctx.getImageData(0); });
+    assert_throws_js(TypeError, function() { ctx.getImageData(0, 0); });
+    assert_throws_js(TypeError, function() { ctx.getImageData(0, 0, 1); });
+}
+if (ctx.putImageData) {
+    var imgdata = ctx.getImageData(0, 0, 1, 1);
+    assert_throws_js(TypeError, function() { ctx.putImageData(); });
+    assert_throws_js(TypeError, function() { ctx.putImageData(imgdata); });
+    assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 0); });
+}
+var g = ctx.createLinearGradient(0, 0, 0, 0);
+assert_throws_js(TypeError, function() { g.addColorStop(); });
+assert_throws_js(TypeError, function() { g.addColorStop(0); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree-ref.html b/testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree-ref.html
new file mode 100644
index 0000000000..707bafd320
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree-ref.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<title>Test reference</title>
+<canvas id="canvas"></canvas>
+<script>
+  let canvas = document.getElementById("canvas");
+  let ctx = canvas.getContext("2d");
+  ctx.font = "10px sans-serif";
+  ctx.fillText('Hello, world', 10, 10);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree.html b/testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree.html
new file mode 100644
index 0000000000..cf76967a1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/2d.text-outside-of-the-flat-tree.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Canvas outside the flat tree</title>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1792860">
+<link rel="match" href="2d.text-outside-of-the-flat-tree-ref.html">
+<div id="host"><canvas id="canvas"></canvas></div>
+<script>
+  let host = document.getElementById("host");
+  // Leaves the canvas un-slotted.
+  let root = host.attachShadow({ mode: "open"});
+  let canvas = document.getElementById("canvas");
+  let ctx = canvas.getContext("2d");
+  ctx.font = "10px sans-serif";
+  ctx.fillText('Hello, world', 10, 10);
+  // Slots the content.
+  root.innerHTML = `<slot></slot>`;
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.exists.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.exists.html
new file mode 100644
index 0000000000..1c44acbd54
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.exists.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.canvas.context.exists</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.canvas.context.exists</h1>
+<p class="desc">The 2D context is implemented</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("The 2D context is implemented");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(canvas.getContext('2d'), null, "canvas.getContext('2d')", "null");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.cache.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.cache.html
new file mode 100644
index 0000000000..f4db40815d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.cache.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.canvas.context.extraargs.cache</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.canvas.context.extraargs.cache</h1>
+<p class="desc">The 2D context doesn't throw with extra getContext arguments (cached)</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("The 2D context doesn't throw with extra getContext arguments (cached)");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(canvas.getContext('2d', false, {}, [], 1, "2"), null, "canvas.getContext('2d', false, {}, [], 1, \"2\")", "null");
+  _assertDifferent(canvas.getContext('2d', 123), null, "canvas.getContext('2d', 123)", "null");
+  _assertDifferent(canvas.getContext('2d', "test"), null, "canvas.getContext('2d', \"test\")", "null");
+  _assertDifferent(canvas.getContext('2d', undefined), null, "canvas.getContext('2d', undefined)", "null");
+  _assertDifferent(canvas.getContext('2d', null), null, "canvas.getContext('2d', null)", "null");
+  _assertDifferent(canvas.getContext('2d', Symbol.hasInstance), null, "canvas.getContext('2d', Symbol.hasInstance)", "null");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.create.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.create.html
new file mode 100644
index 0000000000..6ae7f787c6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.extraargs.create.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.canvas.context.extraargs.create</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.canvas.context.extraargs.create</h1>
+<p class="desc">The 2D context doesn't throw with extra getContext arguments (new context)</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("The 2D context doesn't throw with extra getContext arguments (new context)");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(document.createElement("canvas").getContext('2d', false, {}, [], 1, "2"), null, "document.createElement(\"canvas\").getContext('2d', false, {}, [], 1, \"2\")", "null");
+  _assertDifferent(document.createElement("canvas").getContext('2d', 123), null, "document.createElement(\"canvas\").getContext('2d', 123)", "null");
+  _assertDifferent(document.createElement("canvas").getContext('2d', "test"), null, "document.createElement(\"canvas\").getContext('2d', \"test\")", "null");
+  _assertDifferent(document.createElement("canvas").getContext('2d', undefined), null, "document.createElement(\"canvas\").getContext('2d', undefined)", "null");
+  _assertDifferent(document.createElement("canvas").getContext('2d', null), null, "document.createElement(\"canvas\").getContext('2d', null)", "null");
+  _assertDifferent(document.createElement("canvas").getContext('2d', Symbol.hasInstance), null, "document.createElement(\"canvas\").getContext('2d', Symbol.hasInstance)", "null");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.invalid.args.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.invalid.args.html
new file mode 100644
index 0000000000..cfa58266ea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.invalid.args.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.canvas.context.invalid.args</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.canvas.context.invalid.args</h1>
+<p class="desc">Calling getContext with invalid arguments.</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("Calling getContext with invalid arguments.");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.getContext(''), null, "canvas.getContext('')", "null");
+  _assertSame(canvas.getContext('2d#'), null, "canvas.getContext('2d#')", "null");
+  _assertSame(canvas.getContext('This is clearly not a valid context name.'), null, "canvas.getContext('This is clearly not a valid context name.')", "null");
+  _assertSame(canvas.getContext('2d\0'), null, "canvas.getContext('2d\\0')", "null");
+  _assertSame(canvas.getContext('2\uFF44'), null, "canvas.getContext('2\\uFF44')", "null");
+  _assertSame(canvas.getContext('2D'), null, "canvas.getContext('2D')", "null");
+  assert_throws_js(TypeError, function() { canvas.getContext(); });
+  _assertSame(canvas.getContext('null'), null, "canvas.getContext('null')", "null");
+  _assertSame(canvas.getContext('undefined'), null, "canvas.getContext('undefined')", "null");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.prototype.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.prototype.html
new file mode 100644
index 0000000000..5d5edc6864
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.prototype.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.canvas.context.prototype</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.canvas.context.prototype</h1>
+<p class="desc">checks CanvasRenderingContext2D prototype</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("checks CanvasRenderingContext2D prototype");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(Object.getPrototypeOf(CanvasRenderingContext2D.prototype), Object.prototype, "Object.getPrototypeOf(CanvasRenderingContext2D.prototype)", "Object.prototype");
+  _assertSame(Object.getPrototypeOf(ctx), CanvasRenderingContext2D.prototype, "Object.getPrototypeOf(ctx)", "CanvasRenderingContext2D.prototype");
+  t.done();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.shared.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.shared.html
new file mode 100644
index 0000000000..fd8deddec0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.shared.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.canvas.context.shared</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.canvas.context.shared</h1>
+<p class="desc">getContext('2d') returns objects which share canvas state</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("getContext('2d') returns objects which share canvas state");
+_addTest(function(canvas, ctx) {
+
+  var ctx2 = canvas.getContext('2d');
+  ctx.fillStyle = '#f00';
+  ctx2.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/canvas-context/2d.canvas.context.type.exists.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.exists.html
new file mode 100644
index 0000000000..d25f009abb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.exists.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.canvas.context.type.exists</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.canvas.context.type.exists</h1>
+<p class="desc">The 2D context interface is a property of 'window'</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("The 2D context interface is a property of 'window'");
+_addTest(function(canvas, ctx) {
+
+  _assert(window.CanvasRenderingContext2D, "window.CanvasRenderingContext2D");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.extend.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.extend.html
new file mode 100644
index 0000000000..8d34d53101
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.extend.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.canvas.context.type.extend</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.canvas.context.type.extend</h1>
+<p class="desc">Interface methods can be added</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>
+<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("Interface methods can be added");
+_addTest(function(canvas, ctx) {
+
+  window.CanvasRenderingContext2D.prototype.fillRectGreen = function (x, y, w, h)
+  {
+      this.fillStyle = '#0f0';
+      this.fillRect(x, y, w, h);
+  };
+  ctx.fillStyle = '#f00';
+  ctx.fillRectGreen(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.prototype.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.prototype.html
new file mode 100644
index 0000000000..a537fe5106
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.prototype.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.canvas.context.type.prototype</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.canvas.context.type.prototype</h1>
+<p class="desc">window.CanvasRenderingContext2D.prototype are not [[Writable]] and not [[Configurable]], and its methods are [[Configurable]].</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.CanvasRenderingContext2D.prototype are not [[Writable]] and not [[Configurable]], and its methods are [[Configurable]].");
+_addTest(function(canvas, ctx) {
+
+  _assert(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
+  _assert(window.CanvasRenderingContext2D.prototype.fill, "window.CanvasRenderingContext2D.prototype.fill");
+  window.CanvasRenderingContext2D.prototype = null;
+  _assert(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
+  delete window.CanvasRenderingContext2D.prototype;
+  _assert(window.CanvasRenderingContext2D.prototype, "window.CanvasRenderingContext2D.prototype");
+  window.CanvasRenderingContext2D.prototype.fill = 1;
+  _assertSame(window.CanvasRenderingContext2D.prototype.fill, 1, "window.CanvasRenderingContext2D.prototype.fill", "1");
+  delete window.CanvasRenderingContext2D.prototype.fill;
+  _assertSame(window.CanvasRenderingContext2D.prototype.fill, undefined, "window.CanvasRenderingContext2D.prototype.fill", "undefined");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.replace.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.replace.html
new file mode 100644
index 0000000000..ac3c40587d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.type.replace.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.canvas.context.type.replace</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.canvas.context.type.replace</h1>
+<p class="desc">Interface methods can be overridden</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>
+<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("Interface methods can be overridden");
+_addTest(function(canvas, ctx) {
+
+  var fillRect = window.CanvasRenderingContext2D.prototype.fillRect;
+  window.CanvasRenderingContext2D.prototype.fillRect = function (x, y, w, h)
+  {
+      this.fillStyle = '#0f0';
+      fillRect.call(this, x, y, w, h);
+  };
+  ctx.fillStyle = '#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/canvas-context/2d.canvas.context.unique.html b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.unique.html
new file mode 100644
index 0000000000..c7b1803856
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-context/2d.canvas.context.unique.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.canvas.context.unique</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.canvas.context.unique</h1>
+<p class="desc">getContext('2d') returns the same object</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("getContext('2d') returns the same object");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.getContext('2d'), canvas.getContext('2d'), "canvas.getContext('2d')", "canvas.getContext('2d')");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.initial.reset.2dstate.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.initial.reset.2dstate.html
new file mode 100644
index 0000000000..e194001198
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.initial.reset.2dstate.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.canvas.host.initial.reset.2dstate</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.canvas.host.initial.reset.2dstate</h1>
+<p class="desc">Resetting the canvas state resets 2D state variables</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("Resetting the canvas state resets 2D state variables");
+_addTest(function(canvas, ctx) {
+
+  canvas.width = 100;
+  var default_val;
+
+  default_val = ctx.strokeStyle;
+  ctx.strokeStyle = "#ff0000";
+  canvas.width = 100;
+  _assertSame(ctx.strokeStyle, default_val, "ctx.strokeStyle", "default_val");
+
+  default_val = ctx.fillStyle;
+  ctx.fillStyle = "#ff0000";
+  canvas.width = 100;
+  _assertSame(ctx.fillStyle, default_val, "ctx.fillStyle", "default_val");
+
+  default_val = ctx.globalAlpha;
+  ctx.globalAlpha = 0.5;
+  canvas.width = 100;
+  _assertSame(ctx.globalAlpha, default_val, "ctx.globalAlpha", "default_val");
+
+  default_val = ctx.lineWidth;
+  ctx.lineWidth = 0.5;
+  canvas.width = 100;
+  _assertSame(ctx.lineWidth, default_val, "ctx.lineWidth", "default_val");
+
+  default_val = ctx.lineCap;
+  ctx.lineCap = "round";
+  canvas.width = 100;
+  _assertSame(ctx.lineCap, default_val, "ctx.lineCap", "default_val");
+
+  default_val = ctx.lineJoin;
+  ctx.lineJoin = "round";
+  canvas.width = 100;
+  _assertSame(ctx.lineJoin, default_val, "ctx.lineJoin", "default_val");
+
+  default_val = ctx.miterLimit;
+  ctx.miterLimit = 0.5;
+  canvas.width = 100;
+  _assertSame(ctx.miterLimit, default_val, "ctx.miterLimit", "default_val");
+
+  default_val = ctx.shadowOffsetX;
+  ctx.shadowOffsetX = 5;
+  canvas.width = 100;
+  _assertSame(ctx.shadowOffsetX, default_val, "ctx.shadowOffsetX", "default_val");
+
+  default_val = ctx.shadowOffsetY;
+  ctx.shadowOffsetY = 5;
+  canvas.width = 100;
+  _assertSame(ctx.shadowOffsetY, default_val, "ctx.shadowOffsetY", "default_val");
+
+  default_val = ctx.shadowBlur;
+  ctx.shadowBlur = 5;
+  canvas.width = 100;
+  _assertSame(ctx.shadowBlur, default_val, "ctx.shadowBlur", "default_val");
+
+  default_val = ctx.shadowColor;
+  ctx.shadowColor = "#ff0000";
+  canvas.width = 100;
+  _assertSame(ctx.shadowColor, default_val, "ctx.shadowColor", "default_val");
+
+  default_val = ctx.globalCompositeOperation;
+  ctx.globalCompositeOperation = "copy";
+  canvas.width = 100;
+  _assertSame(ctx.globalCompositeOperation, default_val, "ctx.globalCompositeOperation", "default_val");
+
+  default_val = ctx.font;
+  ctx.font = "25px serif";
+  canvas.width = 100;
+  _assertSame(ctx.font, default_val, "ctx.font", "default_val");
+
+  default_val = ctx.textAlign;
+  ctx.textAlign = "center";
+  canvas.width = 100;
+  _assertSame(ctx.textAlign, default_val, "ctx.textAlign", "default_val");
+
+  default_val = ctx.textBaseline;
+  ctx.textBaseline = "bottom";
+  canvas.width = 100;
+  _assertSame(ctx.textBaseline, default_val, "ctx.textBaseline", "default_val");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.readonly.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.readonly.html
new file mode 100644
index 0000000000..cbbf32f2e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.readonly.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.canvas.host.readonly</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.canvas.host.readonly</h1>
+<p class="desc">CanvasRenderingContext2D.canvas is readonly</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("CanvasRenderingContext2D.canvas is readonly");
+_addTest(function(canvas, ctx) {
+
+  var c = document.createElement('canvas');
+  var d = ctx.canvas;
+  _assertDifferent(c, d, "c", "d");
+  ctx.canvas = c;
+  _assertSame(ctx.canvas, d, "ctx.canvas", "d");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.reference.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.reference.html
new file mode 100644
index 0000000000..6a4bdb65b0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.reference.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.canvas.host.reference</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.canvas.host.reference</h1>
+<p class="desc">CanvasRenderingContext2D.canvas refers back to its canvas</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("CanvasRenderingContext2D.canvas refers back to its canvas");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.canvas, canvas, "ctx.canvas", "canvas");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled-manual.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled-manual.html
new file mode 100644
index 0000000000..acf3f9c7b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled-manual.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.canvas.host.scaled</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.canvas.host.scaled</h1>
+<p class="desc">CSS-scaled canvases get drawn correctly</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="25" style="width: 100px; height: 50px"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.scaled.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("CSS-scaled canvases get drawn correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#00f';
+  ctx.fillRect(0, 0, 50, 25);
+  ctx.fillStyle = '#0ff';
+  ctx.fillRect(0, 0, 25, 10);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled.png
new file mode 100644
index 0000000000..875407769f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.scaled.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.html
new file mode 100644
index 0000000000..0de11e235d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.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.canvas.host.size.attributes.parse.decimal</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.canvas.host.size.attributes.parse.decimal</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100.999" height="100.999"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.decimal.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100.999', "canvas.getAttribute('width')", "'100.999'");
+  _assertSame(canvas.getAttribute('height'), '100.999', "canvas.getAttribute('height')", "'100.999'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.decimal.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.html
new file mode 100644
index 0000000000..315c8323fa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.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.canvas.host.size.attributes.parse.em</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.canvas.host.size.attributes.parse.em</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100em" height="100em"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.em.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100em', "canvas.getAttribute('width')", "'100em'");
+  _assertSame(canvas.getAttribute('height'), '100em', "canvas.getAttribute('height')", "'100em'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.em.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.html
new file mode 100644
index 0000000000..b9568712e7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.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.canvas.host.size.attributes.parse.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.canvas.host.size.attributes.parse.empty</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="" height=""><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.empty.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '', "canvas.getAttribute('width')", "''");
+  _assertSame(canvas.getAttribute('height'), '', "canvas.getAttribute('height')", "''");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.empty.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.html
new file mode 100644
index 0000000000..208ddeceeb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.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.canvas.host.size.attributes.parse.exp</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.canvas.host.size.attributes.parse.exp</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100e1" height="100e1"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.exp.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100e1', "canvas.getAttribute('width')", "'100e1'");
+  _assertSame(canvas.getAttribute('height'), '100e1', "canvas.getAttribute('height')", "'100e1'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.exp.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.hex.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.hex.html
new file mode 100644
index 0000000000..05f7030d47
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.hex.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.canvas.host.size.attributes.parse.hex</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.canvas.host.size.attributes.parse.hex</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="0x100" height="0x100"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 0, "canvas.width", "0");
+  _assertSame(canvas.height, 0, "canvas.height", "0");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "0px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"0px\"");
+  _assertSame(canvas.getAttribute('width'), '0x100', "canvas.getAttribute('width')", "'0x100'");
+  _assertSame(canvas.getAttribute('height'), '0x100', "canvas.getAttribute('height')", "'0x100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.html
new file mode 100644
index 0000000000..3a55fd13dd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.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.canvas.host.size.attributes.parse.junk</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.canvas.host.size.attributes.parse.junk</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="#!?" height="#!?"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.junk.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '#!?', "canvas.getAttribute('width')", "'#!?'");
+  _assertSame(canvas.getAttribute('height'), '#!?', "canvas.getAttribute('height')", "'#!?'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.junk.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.html
new file mode 100644
index 0000000000..da5f21ad04
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.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.canvas.host.size.attributes.parse.minus</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.canvas.host.size.attributes.parse.minus</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="-100" height="-100"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.minus.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '-100', "canvas.getAttribute('width')", "'-100'");
+  _assertSame(canvas.getAttribute('height'), '-100', "canvas.getAttribute('height')", "'-100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.minus.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.html
new file mode 100644
index 0000000000..ccc7efaafa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.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.canvas.host.size.attributes.parse.octal</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.canvas.host.size.attributes.parse.octal</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="0100" height="0100"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.octal.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '0100', "canvas.getAttribute('width')", "'0100'");
+  _assertSame(canvas.getAttribute('height'), '0100', "canvas.getAttribute('height')", "'0100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.octal.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.html
new file mode 100644
index 0000000000..da14fa25c0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.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.canvas.host.size.attributes.parse.onlyspace</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.canvas.host.size.attributes.parse.onlyspace</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="  " height="  "><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.onlyspace.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '  ', "canvas.getAttribute('width')", "'  '");
+  _assertSame(canvas.getAttribute('height'), '  ', "canvas.getAttribute('height')", "'  '");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.onlyspace.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.html
new file mode 100644
index 0000000000..d699288f73
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.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.canvas.host.size.attributes.parse.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.canvas.host.size.attributes.parse.percent</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100%" height="100%"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.percent.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100%', "canvas.getAttribute('width')", "'100%'");
+  _assertSame(canvas.getAttribute('height'), '100%', "canvas.getAttribute('height')", "'100%'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.percent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.html
new file mode 100644
index 0000000000..58fb07f179
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.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.canvas.host.size.attributes.parse.plus</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.canvas.host.size.attributes.parse.plus</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="+100" height="+100"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.plus.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '+100', "canvas.getAttribute('width')", "'+100'");
+  _assertSame(canvas.getAttribute('height'), '+100', "canvas.getAttribute('height')", "'+100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.plus.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.html
new file mode 100644
index 0000000000..52fadaad43
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.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.canvas.host.size.attributes.parse.space</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.canvas.host.size.attributes.parse.space</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="  100" height="  100"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.space.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '  100', "canvas.getAttribute('width')", "'  100'");
+  _assertSame(canvas.getAttribute('height'), '  100', "canvas.getAttribute('height')", "'  100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.space.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.html
new file mode 100644
index 0000000000..b18167c599
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.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.canvas.host.size.attributes.parse.trailingjunk</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.canvas.host.size.attributes.parse.trailingjunk</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100#!?" height="100#!?"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.trailingjunk.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100#!?', "canvas.getAttribute('width')", "'100#!?'");
+  _assertSame(canvas.getAttribute('height'), '100#!?', "canvas.getAttribute('height')", "'100#!?'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.trailingjunk.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.html
new file mode 100644
index 0000000000..79e81c1020
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.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.canvas.host.size.attributes.parse.whitespace</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.canvas.host.size.attributes.parse.whitespace</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="&#xD;
+	100" height="&#xD;
+	100"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.parse.whitespace.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '\r\n\t\x0c100', "canvas.getAttribute('width')", "'\\r\\n\\t\\x0c100'");
+  _assertSame(canvas.getAttribute('height'), '\r\n\t\x0c100', "canvas.getAttribute('height')", "'\\r\\n\\t\\x0c100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.whitespace.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.zero.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.zero.html
new file mode 100644
index 0000000000..b7fd499d1f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.parse.zero.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.canvas.host.size.attributes.parse.zero</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.canvas.host.size.attributes.parse.zero</h1>
+<p class="desc">Parsing of non-negative integers</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="0" height="0"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(canvas.width, 0, "canvas.width", "0");
+  _assertSame(canvas.height, 0, "canvas.height", "0");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "0px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"0px\"");
+  _assertSame(canvas.getAttribute('width'), '0', "canvas.getAttribute('width')", "'0'");
+  _assertSame(canvas.getAttribute('height'), '0', "canvas.getAttribute('height')", "'0'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.html
new file mode 100644
index 0000000000..b6c2130bf0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.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.canvas.host.size.attributes.setAttribute.decimal</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.canvas.host.size.attributes.setAttribute.decimal</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.decimal.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '100.999');
+  canvas.setAttribute('height', '100.999');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100.999', "canvas.getAttribute('width')", "'100.999'");
+  _assertSame(canvas.getAttribute('height'), '100.999', "canvas.getAttribute('height')", "'100.999'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.html
new file mode 100644
index 0000000000..f70713fd8f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.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.canvas.host.size.attributes.setAttribute.em</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.canvas.host.size.attributes.setAttribute.em</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.em.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '100em');
+  canvas.setAttribute('height', '100em');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100em', "canvas.getAttribute('width')", "'100em'");
+  _assertSame(canvas.getAttribute('height'), '100em', "canvas.getAttribute('height')", "'100em'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.em.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.html
new file mode 100644
index 0000000000..fab2394fec
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.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.canvas.host.size.attributes.setAttribute.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.canvas.host.size.attributes.setAttribute.empty</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.empty.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '');
+  canvas.setAttribute('height', '');
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '', "canvas.getAttribute('width')", "''");
+  _assertSame(canvas.getAttribute('height'), '', "canvas.getAttribute('height')", "''");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.empty.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.html
new file mode 100644
index 0000000000..cfa11eb302
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.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.canvas.host.size.attributes.setAttribute.exp</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.canvas.host.size.attributes.setAttribute.exp</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.exp.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '100e1');
+  canvas.setAttribute('height', '100e1');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100e1', "canvas.getAttribute('width')", "'100e1'");
+  _assertSame(canvas.getAttribute('height'), '100e1', "canvas.getAttribute('height')", "'100e1'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.exp.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.hex.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.hex.html
new file mode 100644
index 0000000000..80a1fbda60
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.hex.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.canvas.host.size.attributes.setAttribute.hex</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.canvas.host.size.attributes.setAttribute.hex</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '0x100');
+  canvas.setAttribute('height', '0x100');
+  _assertSame(canvas.width, 0, "canvas.width", "0");
+  _assertSame(canvas.height, 0, "canvas.height", "0");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "0px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"0px\"");
+  _assertSame(canvas.getAttribute('width'), '0x100', "canvas.getAttribute('width')", "'0x100'");
+  _assertSame(canvas.getAttribute('height'), '0x100', "canvas.getAttribute('height')", "'0x100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.html
new file mode 100644
index 0000000000..b583871f38
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.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.canvas.host.size.attributes.setAttribute.junk</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.canvas.host.size.attributes.setAttribute.junk</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.junk.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '#!?');
+  canvas.setAttribute('height', '#!?');
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '#!?', "canvas.getAttribute('width')", "'#!?'");
+  _assertSame(canvas.getAttribute('height'), '#!?', "canvas.getAttribute('height')", "'#!?'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.junk.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.html
new file mode 100644
index 0000000000..90a31403e1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.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.canvas.host.size.attributes.setAttribute.minus</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.canvas.host.size.attributes.setAttribute.minus</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.minus.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '-100');
+  canvas.setAttribute('height', '-100');
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '-100', "canvas.getAttribute('width')", "'-100'");
+  _assertSame(canvas.getAttribute('height'), '-100', "canvas.getAttribute('height')", "'-100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.minus.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.html
new file mode 100644
index 0000000000..c5b263bd5f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.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.canvas.host.size.attributes.setAttribute.octal</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.canvas.host.size.attributes.setAttribute.octal</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.octal.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '0100');
+  canvas.setAttribute('height', '0100');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '0100', "canvas.getAttribute('width')", "'0100'");
+  _assertSame(canvas.getAttribute('height'), '0100', "canvas.getAttribute('height')", "'0100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.octal.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.html
new file mode 100644
index 0000000000..ac4cdb001b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.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.canvas.host.size.attributes.setAttribute.onlyspace</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.canvas.host.size.attributes.setAttribute.onlyspace</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.onlyspace.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '  ');
+  canvas.setAttribute('height', '  ');
+  _assertSame(canvas.width, 300, "canvas.width", "300");
+  _assertSame(canvas.height, 150, "canvas.height", "150");
+  _assertSame(canvas.getAttribute('width'), '  ', "canvas.getAttribute('width')", "'  '");
+  _assertSame(canvas.getAttribute('height'), '  ', "canvas.getAttribute('height')", "'  '");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.png
new file mode 100644
index 0000000000..a72d047556
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.onlyspace.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.html
new file mode 100644
index 0000000000..5aebf5a0b1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.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.canvas.host.size.attributes.setAttribute.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.canvas.host.size.attributes.setAttribute.percent</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.percent.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '100%');
+  canvas.setAttribute('height', '100%');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100%', "canvas.getAttribute('width')", "'100%'");
+  _assertSame(canvas.getAttribute('height'), '100%', "canvas.getAttribute('height')", "'100%'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.percent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.html
new file mode 100644
index 0000000000..60da44daf3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.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.canvas.host.size.attributes.setAttribute.plus</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.canvas.host.size.attributes.setAttribute.plus</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.plus.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '+100');
+  canvas.setAttribute('height', '+100');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '+100', "canvas.getAttribute('width')", "'+100'");
+  _assertSame(canvas.getAttribute('height'), '+100', "canvas.getAttribute('height')", "'+100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.plus.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.html
new file mode 100644
index 0000000000..fbfd4c33c0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.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.canvas.host.size.attributes.setAttribute.space</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.canvas.host.size.attributes.setAttribute.space</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.space.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '  100');
+  canvas.setAttribute('height', '  100');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '  100', "canvas.getAttribute('width')", "'  100'");
+  _assertSame(canvas.getAttribute('height'), '  100', "canvas.getAttribute('height')", "'  100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.space.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.html
new file mode 100644
index 0000000000..1d230bd654
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.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.canvas.host.size.attributes.setAttribute.trailingjunk</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.canvas.host.size.attributes.setAttribute.trailingjunk</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.trailingjunk.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '100#!?');
+  canvas.setAttribute('height', '100#!?');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '100#!?', "canvas.getAttribute('width')", "'100#!?'");
+  _assertSame(canvas.getAttribute('height'), '100#!?', "canvas.getAttribute('height')", "'100#!?'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.trailingjunk.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.html
new file mode 100644
index 0000000000..1aa86d6a9e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.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.canvas.host.size.attributes.setAttribute.whitespace</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.canvas.host.size.attributes.setAttribute.whitespace</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.whitespace.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '\r\n\t\x0c100');
+  canvas.setAttribute('height', '\r\n\t\x0c100');
+  _assertSame(canvas.width, 100, "canvas.width", "100");
+  _assertSame(canvas.height, 100, "canvas.height", "100");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
+  _assertSame(canvas.getAttribute('width'), '\r\n\t\x0c100', "canvas.getAttribute('width')", "'\\r\\n\\t\\x0c100'");
+  _assertSame(canvas.getAttribute('height'), '\r\n\t\x0c100', "canvas.getAttribute('height')", "'\\r\\n\\t\\x0c100'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.png b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.png
new file mode 100644
index 0000000000..f842673330
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.whitespace.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.zero.html b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.zero.html
new file mode 100644
index 0000000000..64b4811d79
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.zero.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.canvas.host.size.attributes.setAttribute.zero</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.canvas.host.size.attributes.setAttribute.zero</h1>
+<p class="desc">Parsing of non-negative integers in setAttribute</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Parsing of non-negative integers in setAttribute");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('width', '0');
+  canvas.setAttribute('height', '0');
+  _assertSame(canvas.width, 0, "canvas.width", "0");
+  _assertSame(canvas.height, 0, "canvas.height", "0");
+  _assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "0px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"0px\"");
+  _assertSame(canvas.getAttribute('width'), '0', "canvas.getAttribute('width')", "'0'");
+  _assertSame(canvas.getAttribute('height'), '0', "canvas.getAttribute('height')", "'0'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.html
new file mode 100644
index 0000000000..cb805b692e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.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.composite.canvas.clear</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.composite.canvas.clear</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.composite.canvas.clear.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'clear';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.clear.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.html
new file mode 100644
index 0000000000..d4e75b7bac
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.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.composite.canvas.copy</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.composite.canvas.copy</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.composite.canvas.copy.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.png
new file mode 100644
index 0000000000..f5e9c21964
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.html
new file mode 100644
index 0000000000..6fded39e44
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.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.composite.canvas.destination-atop</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.composite.canvas.destination-atop</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.composite.canvas.destination-atop.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 128,255,128,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.png
new file mode 100644
index 0000000000..504b42756e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.html
new file mode 100644
index 0000000000..7277286d8b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.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.composite.canvas.destination-in</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.composite.canvas.destination-in</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.composite.canvas.destination-in.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,255,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.png
new file mode 100644
index 0000000000..790e418a6b
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.html
new file mode 100644
index 0000000000..5860c3d5cb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.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.composite.canvas.destination-out</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.composite.canvas.destination-out</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.composite.canvas.destination-out.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-out';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,255,32, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.png
new file mode 100644
index 0000000000..7f5ed1a836
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.html
new file mode 100644
index 0000000000..76bad84392
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.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.composite.canvas.destination-over</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.composite.canvas.destination-over</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.composite.canvas.destination-over.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 109,255,146,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.png
new file mode 100644
index 0000000000..226390b2f8
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.destination-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.html
new file mode 100644
index 0000000000..8d706df67e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.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.composite.canvas.lighter</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.composite.canvas.lighter</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.composite.canvas.lighter.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 191,255,128,255, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.png
new file mode 100644
index 0000000000..fc33f3301e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.lighter.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.html
new file mode 100644
index 0000000000..cf3e449123
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.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.composite.canvas.source-atop</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.composite.canvas.source-atop</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.composite.canvas.source-atop.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-atop';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.png
new file mode 100644
index 0000000000..1ef9630195
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.html
new file mode 100644
index 0000000000..dabcced9dd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.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.composite.canvas.source-in</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.composite.canvas.source-in</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.composite.canvas.source-in.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.png
new file mode 100644
index 0000000000..c26cdccf02
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.html
new file mode 100644
index 0000000000..2fcf708796
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.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.composite.canvas.source-out</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.composite.canvas.source-out</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.composite.canvas.source-out.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.png
new file mode 100644
index 0000000000..c26cdccf02
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.html
new file mode 100644
index 0000000000..b9dca65744
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.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.composite.canvas.source-over</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.composite.canvas.source-over</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.composite.canvas.source-over.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 219,255,36,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.png
new file mode 100644
index 0000000000..e63ab7e308
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.source-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.html
new file mode 100644
index 0000000000..c252e17a7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.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.composite.canvas.xor</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.composite.canvas.xor</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.composite.canvas.xor.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 = canvas.width;
+  canvas2.height = canvas.height;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'xor';
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.png
new file mode 100644
index 0000000000..1ef9630195
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.canvas.xor.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.html
new file mode 100644
index 0000000000..65cfd951e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.clear.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.composite.clip.clear</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.composite.clip.clear</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'clear';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.html
new file mode 100644
index 0000000000..b38397a2c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.copy.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.composite.clip.copy</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.composite.clip.copy</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.html
new file mode 100644
index 0000000000..79fb3af54c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-atop.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.composite.clip.destination-atop</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.composite.clip.destination-atop</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.html
new file mode 100644
index 0000000000..63e8d3acfd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-in.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.composite.clip.destination-in</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.composite.clip.destination-in</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.html
new file mode 100644
index 0000000000..839246427f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-out.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.composite.clip.destination-out</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.composite.clip.destination-out</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-out';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.html
new file mode 100644
index 0000000000..fc7f1ab728
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.destination-over.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.composite.clip.destination-over</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.composite.clip.destination-over</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.html
new file mode 100644
index 0000000000..b3acab0231
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.lighter.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.composite.clip.lighter</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.composite.clip.lighter</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.html
new file mode 100644
index 0000000000..49c3eb0bb5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-atop.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.composite.clip.source-atop</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.composite.clip.source-atop</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-atop';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.html
new file mode 100644
index 0000000000..afe92ba4bf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-in.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.composite.clip.source-in</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.composite.clip.source-in</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.html
new file mode 100644
index 0000000000..43b352fb46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-out.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.composite.clip.source-out</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.composite.clip.source-out</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.html
new file mode 100644
index 0000000000..4973f8e6e6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.source-over.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.composite.clip.source-over</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.composite.clip.source-over</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.html
new file mode 100644
index 0000000000..5239d6fd10
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.clip.xor.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.composite.clip.xor</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.composite.clip.xor</h1>
+<p class="desc">fill() does not affect pixels outside the clip region.</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("fill() does not affect pixels outside the clip region.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'xor';
+  ctx.rect(-20, -20, 10, 10);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.html
new file mode 100644
index 0000000000..525a56ebc9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvas.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.composite.globalAlpha.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.composite.globalAlpha.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) {
+
+  var canvas2 = document.createElement('canvas');
+  canvas2.width = 100;
+  canvas2.height = 50;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.fillStyle = '#f00';
+  ctx2.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  // Avoiding any potential alpha = 0 optimisations.
+  ctx.globalAlpha = 0.01;
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.html
new file mode 100644
index 0000000000..17a46cfca2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvascopy.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.composite.globalAlpha.canvascopy</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.composite.globalAlpha.canvascopy</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);
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.globalCompositeOperation = 'copy'
+  ctx.globalAlpha = 0.51;
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,130, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.html
new file mode 100644
index 0000000000..eea076c974
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.canvaspattern.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.composite.globalAlpha.canvaspattern</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.composite.globalAlpha.canvaspattern</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 = '#f00';
+  ctx2.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = ctx.createPattern(canvas2, 'no-repeat');
+  // Avoiding any potential alpha = 0 optimisations.
+  ctx.globalAlpha = 0.01;
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html
new file mode 100644
index 0000000000..97cdf267c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.globalAlpha.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.composite.globalAlpha.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.globalAlpha, 1.0, "ctx.globalAlpha", "1.0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.html
new file mode 100644
index 0000000000..5766fdbe77
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.fill.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.composite.globalAlpha.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.composite.globalAlpha.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);
+  // Avoiding any potential alpha = 0 optimisations.
+  ctx.globalAlpha = 0.01;
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.html
new file mode 100644
index 0000000000..5de1d5ff3e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.image.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.composite.globalAlpha.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.composite.globalAlpha.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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  // Avoiding any potential alpha = 0 optimisations.
+  ctx.globalAlpha = 0.01;
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.html
new file mode 100644
index 0000000000..87e884524e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.imagepattern.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.composite.globalAlpha.imagepattern</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.composite.globalAlpha.imagepattern</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.fillStyle = ctx.createPattern(bitmap, 'no-repeat');
+  // Avoiding any potential alpha = 0 optimisations.
+  ctx.globalAlpha = 0.01;
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 2,253,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.html
new file mode 100644
index 0000000000..db67f882f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.invalid.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.composite.globalAlpha.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.composite.globalAlpha.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) {
+
+  ctx.globalAlpha = 0.5;
+  // This may not set it to exactly 0.5 if it is rounded/quantised, so
+  // remember for future comparisons.
+  var a = ctx.globalAlpha;
+  ctx.globalAlpha = Infinity;
+  _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+  ctx.globalAlpha = -Infinity;
+  _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+  ctx.globalAlpha = NaN;
+  _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.html
new file mode 100644
index 0000000000..883b0cac69
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.globalAlpha.range.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.composite.globalAlpha.range</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.composite.globalAlpha.range</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.globalAlpha = 0.5;
+  // This may not set it to exactly 0.5 if it is rounded/quantised, so
+  // remember for future comparisons.
+  var a = ctx.globalAlpha;
+  _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+  ctx.globalAlpha = 1.1;
+  _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+  ctx.globalAlpha = -0.1;
+  _assertSame(ctx.globalAlpha, a, "ctx.globalAlpha", "a");
+  ctx.globalAlpha = 0;
+  _assertSame(ctx.globalAlpha, 0, "ctx.globalAlpha", "0");
+  ctx.globalAlpha = 1;
+  _assertSame(ctx.globalAlpha, 1, "ctx.globalAlpha", "1");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.html
new file mode 100644
index 0000000000..a44f8e35b0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.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.composite.image.clear</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.composite.image.clear</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.composite.image.clear.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'clear';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.clear.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.html
new file mode 100644
index 0000000000..d3c972b6d2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.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.composite.image.copy</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.composite.image.copy</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.composite.image.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.png
new file mode 100644
index 0000000000..f5e9c21964
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.html
new file mode 100644
index 0000000000..7c6f93448b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.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.composite.image.destination-atop</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.composite.image.destination-atop</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.composite.image.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 128,255,128,191, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.png
new file mode 100644
index 0000000000..504b42756e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.html
new file mode 100644
index 0000000000..a2bf972bb9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.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.composite.image.destination-in</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.composite.image.destination-in</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.composite.image.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,255,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.png
new file mode 100644
index 0000000000..790e418a6b
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.html
new file mode 100644
index 0000000000..d0d08fa09e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.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.composite.image.destination-out</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.composite.image.destination-out</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.composite.image.destination-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-out';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,255,32, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.png
new file mode 100644
index 0000000000..7f5ed1a836
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.html
new file mode 100644
index 0000000000..7ac98904f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.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.composite.image.destination-over</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.composite.image.destination-over</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.composite.image.destination-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 109,255,146,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.png
new file mode 100644
index 0000000000..226390b2f8
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.destination-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.html
new file mode 100644
index 0000000000..1df4c683df
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.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.composite.image.lighter</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.composite.image.lighter</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.composite.image.lighter.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 191,255,128,255, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.png
new file mode 100644
index 0000000000..fc33f3301e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.lighter.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.html
new file mode 100644
index 0000000000..86833df6b2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.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.composite.image.source-atop</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.composite.image.source-atop</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.composite.image.source-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-atop';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.png
new file mode 100644
index 0000000000..1ef9630195
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.html
new file mode 100644
index 0000000000..0b6ca4b52e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.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.composite.image.source-in</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.composite.image.source-in</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.composite.image.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.png
new file mode 100644
index 0000000000..c26cdccf02
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.html
new file mode 100644
index 0000000000..31dfe471e5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.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.composite.image.source-out</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.composite.image.source-out</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.composite.image.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,96, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.png
new file mode 100644
index 0000000000..c26cdccf02
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.html
new file mode 100644
index 0000000000..e396faa5d7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.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.composite.image.source-over</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.composite.image.source-over</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.composite.image.source-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 219,255,36,223, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.png
new file mode 100644
index 0000000000..e63ab7e308
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.source-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.html
new file mode 100644
index 0000000000..d43742c272
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.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.composite.image.xor</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.composite.image.xor</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.composite.image.xor.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'xor';
+  ctx.drawImage(document.getElementById('yellow75.png'), 0, 0);
+  _assertPixelApprox(canvas, 50,25, 191,255,64,128, 5);
+
+});
+</script>
+<img src="/images/yellow75.png" id="yellow75.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.png
new file mode 100644
index 0000000000..1ef9630195
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.image.xor.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.html
new file mode 100644
index 0000000000..13ae99b35f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.casesensitive.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.composite.operation.casesensitive</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.composite.operation.casesensitive</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.globalCompositeOperation = 'xor';
+  ctx.globalCompositeOperation = 'Source-over';
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.html
new file mode 100644
index 0000000000..c1e88b4894
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.clear.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.composite.operation.clear</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.composite.operation.clear</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.globalCompositeOperation = 'xor';
+  ctx.globalCompositeOperation = 'clear';
+  _assertSame(ctx.globalCompositeOperation, 'clear', "ctx.globalCompositeOperation", "'clear'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.html
new file mode 100644
index 0000000000..4fb6998f71
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.darker.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.composite.operation.darker</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.composite.operation.darker</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.globalCompositeOperation = 'xor';
+  ctx.globalCompositeOperation = 'darker';
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html
new file mode 100644
index 0000000000..5ccd488b3c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.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.composite.operation.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.globalCompositeOperation, 'source-over', "ctx.globalCompositeOperation", "'source-over'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html
new file mode 100644
index 0000000000..27b89c9fed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.get.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.composite.operation.get</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.composite.operation.get</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 modes = ['source-atop', 'source-in', 'source-out', 'source-over',
+      'destination-atop', 'destination-in', 'destination-out', 'destination-over',
+      'lighter', 'copy', 'xor'];
+  for (var i = 0; i < modes.length; ++i)
+  {
+      ctx.globalCompositeOperation = modes[i];
+      _assertSame(ctx.globalCompositeOperation, modes[i], "ctx.globalCompositeOperation", "modes[\""+(i)+"\"]");
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.html
new file mode 100644
index 0000000000..45c5dd15eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.highlight.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.composite.operation.highlight</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.composite.operation.highlight</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.globalCompositeOperation = 'xor';
+  ctx.globalCompositeOperation = 'highlight';
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.html
new file mode 100644
index 0000000000..8a2443ff41
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.nullsuffix.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.composite.operation.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.composite.operation.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) {
+
+  ctx.globalCompositeOperation = 'xor';
+  ctx.globalCompositeOperation = 'source-over\0';
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.html
new file mode 100644
index 0000000000..1d742ef3cc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.over.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.composite.operation.over</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.composite.operation.over</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.globalCompositeOperation = 'xor';
+  ctx.globalCompositeOperation = 'over';
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.html
new file mode 100644
index 0000000000..e4aa877d96
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.operation.unrecognised.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.composite.operation.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.composite.operation.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) {
+
+  ctx.globalCompositeOperation = 'xor';
+  ctx.globalCompositeOperation = 'nonexistent';
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.html
new file mode 100644
index 0000000000..a946989544
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.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.composite.solid.clear</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.composite.solid.clear</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.composite.solid.clear.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'clear';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.clear.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.html
new file mode 100644
index 0000000000..14bee74452
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.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.composite.solid.copy</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.composite.solid.copy</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.composite.solid.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.png
new file mode 100644
index 0000000000..fc0883e74f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.html
new file mode 100644
index 0000000000..d82fb44cce
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.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.composite.solid.destination-atop</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.composite.solid.destination-atop</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.composite.solid.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.png
new file mode 100644
index 0000000000..dd04072baf
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.html
new file mode 100644
index 0000000000..6a491f57c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.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.composite.solid.destination-in</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.composite.solid.destination-in</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.composite.solid.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.png
new file mode 100644
index 0000000000..dd04072baf
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.html
new file mode 100644
index 0000000000..bcc7f24e7a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.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.composite.solid.destination-out</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.composite.solid.destination-out</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.composite.solid.destination-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-out';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.html
new file mode 100644
index 0000000000..6e634e6ae5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.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.composite.solid.destination-over</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.composite.solid.destination-over</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.composite.solid.destination-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.png
new file mode 100644
index 0000000000..dd04072baf
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.destination-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.html
new file mode 100644
index 0000000000..fddbe92420
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.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.composite.solid.lighter</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.composite.solid.lighter</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.composite.solid.lighter.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 255,255,255,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.png
new file mode 100644
index 0000000000..bf48767a88
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.lighter.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.html
new file mode 100644
index 0000000000..4bb0e3d8b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.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.composite.solid.source-atop</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.composite.solid.source-atop</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.composite.solid.source-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-atop';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.png
new file mode 100644
index 0000000000..fc0883e74f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.html
new file mode 100644
index 0000000000..f8fee40a93
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.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.composite.solid.source-in</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.composite.solid.source-in</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.composite.solid.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.png
new file mode 100644
index 0000000000..fc0883e74f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.html
new file mode 100644
index 0000000000..2c9d086182
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.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.composite.solid.source-out</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.composite.solid.source-out</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.composite.solid.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.html
new file mode 100644
index 0000000000..335987b12b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.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.composite.solid.source-over</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.composite.solid.source-over</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.composite.solid.source-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 255,255,0,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.png
new file mode 100644
index 0000000000..fc0883e74f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.source-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.html
new file mode 100644
index 0000000000..d9da43070e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.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.composite.solid.xor</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.composite.solid.xor</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.composite.solid.xor.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'xor';
+  ctx.fillStyle = 'rgba(255, 255, 0, 1.0)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.solid.xor.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.html
new file mode 100644
index 0000000000..de417eea34
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.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.composite.transparent.clear</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.composite.transparent.clear</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.composite.transparent.clear.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'clear';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.clear.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.html
new file mode 100644
index 0000000000..2048975ec3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.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.composite.transparent.copy</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.composite.transparent.copy</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.composite.transparent.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,255,191, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.png
new file mode 100644
index 0000000000..b0cbe3a552
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.html
new file mode 100644
index 0000000000..1da1f1a4ee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.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.composite.transparent.destination-atop</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.composite.transparent.destination-atop</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.composite.transparent.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,128,128,191, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.png
new file mode 100644
index 0000000000..5db0a0484a
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.html
new file mode 100644
index 0000000000..b0f8abe0ef
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.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.composite.transparent.destination-in</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.composite.transparent.destination-in</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.composite.transparent.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,96, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.png
new file mode 100644
index 0000000000..c6895de985
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.html
new file mode 100644
index 0000000000..badbfc4ad7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.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.composite.transparent.destination-out</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.composite.transparent.destination-out</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.composite.transparent.destination-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-out';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,32, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.png
new file mode 100644
index 0000000000..873a9c45d8
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.html
new file mode 100644
index 0000000000..e8e0051b2c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.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.composite.transparent.destination-over</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.composite.transparent.destination-over</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.composite.transparent.destination-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-over';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,146,109,223, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.png
new file mode 100644
index 0000000000..5a8726bbca
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.destination-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.html
new file mode 100644
index 0000000000..6e4c42ab9a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.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.composite.transparent.lighter</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.composite.transparent.lighter</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.composite.transparent.lighter.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'lighter';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,128,191,255, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.png
new file mode 100644
index 0000000000..0e1c28c0cd
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.lighter.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.html
new file mode 100644
index 0000000000..d3d3fbda12
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.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.composite.transparent.source-atop</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.composite.transparent.source-atop</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.composite.transparent.source-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-atop';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,64,191,128, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.png
new file mode 100644
index 0000000000..e0afff6b00
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.html
new file mode 100644
index 0000000000..27c66cb673
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.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.composite.transparent.source-in</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.composite.transparent.source-in</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.composite.transparent.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,255,96, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.png
new file mode 100644
index 0000000000..1459b5e54e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.html
new file mode 100644
index 0000000000..31bb6a2403
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.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.composite.transparent.source-out</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.composite.transparent.source-out</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.composite.transparent.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,255,96, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.png
new file mode 100644
index 0000000000..1459b5e54e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.html
new file mode 100644
index 0000000000..ee20f52b46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.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.composite.transparent.source-over</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.composite.transparent.source-over</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.composite.transparent.source-over.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-over';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,36,219,223, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.png
new file mode 100644
index 0000000000..02acb7a861
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.source-over.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.html
new file mode 100644
index 0000000000..d1818750df
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.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.composite.transparent.xor</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.composite.transparent.xor</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.composite.transparent.xor.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'xor';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,64,191,128, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.png
new file mode 100644
index 0000000000..e0afff6b00
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.transparent.xor.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.html
new file mode 100644
index 0000000000..9dfd650b98
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.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.composite.uncovered.fill.copy</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.composite.uncovered.fill.copy</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.fill.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.translate(0, 25);
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.html
new file mode 100644
index 0000000000..685a139504
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.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.composite.uncovered.fill.destination-atop</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.composite.uncovered.fill.destination-atop</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.fill.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.translate(0, 25);
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.html
new file mode 100644
index 0000000000..9ca8021151
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.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.composite.uncovered.fill.destination-in</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.composite.uncovered.fill.destination-in</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.fill.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.translate(0, 25);
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.html
new file mode 100644
index 0000000000..9f1a5f9d51
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.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.composite.uncovered.fill.source-in</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.composite.uncovered.fill.source-in</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.fill.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.translate(0, 25);
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.html
new file mode 100644
index 0000000000..7653677fd5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.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.composite.uncovered.fill.source-out</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.composite.uncovered.fill.source-out</h1>
+<p class="desc">fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.fill.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.fillStyle = 'rgba(0, 0, 255, 0.75)';
+  ctx.translate(0, 25);
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.fill.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.html
new file mode 100644
index 0000000000..61dd0381ee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.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.composite.uncovered.image.copy</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.composite.uncovered.image.copy</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.image.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+  _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.html
new file mode 100644
index 0000000000..440c832c71
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.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.composite.uncovered.image.destination-atop</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.composite.uncovered.image.destination-atop</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.image.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+  _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.html
new file mode 100644
index 0000000000..03e2e807ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.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.composite.uncovered.image.destination-in</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.composite.uncovered.image.destination-in</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.image.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+  _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.html
new file mode 100644
index 0000000000..de2e5fad63
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.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.composite.uncovered.image.source-in</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.composite.uncovered.image.source-in</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.image.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+  _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.html
new file mode 100644
index 0000000000..5cb9b072b9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.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.composite.uncovered.image.source-out</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.composite.uncovered.image.source-out</h1>
+<p class="desc">drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.image.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.drawImage(document.getElementById('yellow.png'), 40, 40, 10, 10, 40, 50, 10, 10);
+  _assertPixelApprox(canvas, 15,15, 0,0,0,0, 5);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.image.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.html
new file mode 100644
index 0000000000..cac66ade5a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.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.composite.uncovered.nocontext.copy</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.composite.uncovered.nocontext.copy</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.nocontext.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  var canvas2 = document.createElement('canvas');
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.html
new file mode 100644
index 0000000000..c7cecc2e3d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.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.composite.uncovered.nocontext.destination-atop</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.composite.uncovered.nocontext.destination-atop</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.nocontext.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  var canvas2 = document.createElement('canvas');
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.html
new file mode 100644
index 0000000000..e090d7d4b4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.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.composite.uncovered.nocontext.destination-in</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.composite.uncovered.nocontext.destination-in</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.nocontext.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  var canvas2 = document.createElement('canvas');
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.html
new file mode 100644
index 0000000000..0436b40817
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.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.composite.uncovered.nocontext.source-in</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.composite.uncovered.nocontext.source-in</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.nocontext.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  var canvas2 = document.createElement('canvas');
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.html
new file mode 100644
index 0000000000..efbc8ab2f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.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.composite.uncovered.nocontext.source-out</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.composite.uncovered.nocontext.source-out</h1>
+<p class="desc">drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.nocontext.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("drawImage() of a canvas with no context draws pixels as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  var canvas2 = document.createElement('canvas');
+  ctx.drawImage(canvas2, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.nocontext.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.html
new file mode 100644
index 0000000000..aaee92022a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.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.composite.uncovered.pattern.copy</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.composite.uncovered.pattern.copy</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.pattern.copy.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'copy';
+  ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.copy.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.html
new file mode 100644
index 0000000000..aded018f8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.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.composite.uncovered.pattern.destination-atop</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.composite.uncovered.pattern.destination-atop</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.pattern.destination-atop.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-atop.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.html
new file mode 100644
index 0000000000..e520e1ffa3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.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.composite.uncovered.pattern.destination-in</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.composite.uncovered.pattern.destination-in</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.pattern.destination-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-in';
+  ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.destination-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.html
new file mode 100644
index 0000000000..bee654877b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.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.composite.uncovered.pattern.source-in</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.composite.uncovered.pattern.source-in</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.pattern.source-in.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-in.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.html b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.html
new file mode 100644
index 0000000000..947893091e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.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.composite.uncovered.pattern.source-out</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.composite.uncovered.pattern.source-out</h1>
+<p class="desc">Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.</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.composite.uncovered.pattern.source-out.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Pattern fill() draws pixels not covered by the source object as (0,0,0,0), and does not leave the pixels unchanged.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'source-out';
+  ctx.fillStyle = ctx.createPattern(document.getElementById('yellow.png'), 'no-repeat');
+  ctx.fillRect(0, 50, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,0,0,0, 5);
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.png b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.png
new file mode 100644
index 0000000000..eeedd0ff05
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/compositing/2d.composite.uncovered.pattern.source-out.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.basics.html b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.basics.html
new file mode 100644
index 0000000000..cea531f9db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.basics.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.conformance.requirements.basics</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.conformance.requirements.basics</h1>
+<p class="desc">void methods return undefined</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("void methods return undefined");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.save(), undefined, "ctx.save()", "undefined");
+  _assertSame(ctx.restore(), undefined, "ctx.restore()", "undefined");
+  _assertSame(ctx.scale(1, 1), undefined, "ctx.scale(1, 1)", "undefined");
+  _assertSame(ctx.rotate(0), undefined, "ctx.rotate(0)", "undefined");
+  _assertSame(ctx.translate(0, 0), undefined, "ctx.translate(0, 0)", "undefined");
+  if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+      _assertSame(ctx.transform(1, 0, 0, 1, 0, 0), undefined, "ctx.transform(1, 0, 0, 1, 0, 0)", "undefined");
+  }
+  if (ctx.setTransform) {
+      _assertSame(ctx.setTransform(1, 0, 0, 1, 0, 0), undefined, "ctx.setTransform(1, 0, 0, 1, 0, 0)", "undefined");
+      _assertSame(ctx.setTransform(), undefined, "ctx.setTransform()", "undefined");
+  }
+  _assertSame(ctx.clearRect(0, 0, 0, 0), undefined, "ctx.clearRect(0, 0, 0, 0)", "undefined");
+  _assertSame(ctx.fillRect(0, 0, 0, 0), undefined, "ctx.fillRect(0, 0, 0, 0)", "undefined");
+  _assertSame(ctx.strokeRect(0, 0, 0, 0), undefined, "ctx.strokeRect(0, 0, 0, 0)", "undefined");
+  _assertSame(ctx.beginPath(), undefined, "ctx.beginPath()", "undefined");
+  _assertSame(ctx.closePath(), undefined, "ctx.closePath()", "undefined");
+  _assertSame(ctx.moveTo(0, 0), undefined, "ctx.moveTo(0, 0)", "undefined");
+  _assertSame(ctx.lineTo(0, 0), undefined, "ctx.lineTo(0, 0)", "undefined");
+  _assertSame(ctx.quadraticCurveTo(0, 0, 0, 0), undefined, "ctx.quadraticCurveTo(0, 0, 0, 0)", "undefined");
+  _assertSame(ctx.bezierCurveTo(0, 0, 0, 0, 0, 0), undefined, "ctx.bezierCurveTo(0, 0, 0, 0, 0, 0)", "undefined");
+  _assertSame(ctx.arcTo(0, 0, 0, 0, 1), undefined, "ctx.arcTo(0, 0, 0, 0, 1)", "undefined");
+  _assertSame(ctx.rect(0, 0, 0, 0), undefined, "ctx.rect(0, 0, 0, 0)", "undefined");
+  _assertSame(ctx.arc(0, 0, 1, 0, 0, true), undefined, "ctx.arc(0, 0, 1, 0, 0, true)", "undefined");
+  _assertSame(ctx.fill(), undefined, "ctx.fill()", "undefined");
+  _assertSame(ctx.stroke(), undefined, "ctx.stroke()", "undefined");
+  _assertSame(ctx.clip(), undefined, "ctx.clip()", "undefined");
+  if (ctx.fillText) {
+      _assertSame(ctx.fillText('test', 0, 0), undefined, "ctx.fillText('test', 0, 0)", "undefined");
+      _assertSame(ctx.strokeText('test', 0, 0), undefined, "ctx.strokeText('test', 0, 0)", "undefined");
+  }
+  if (ctx.putImageData) {
+      _assertSame(ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0), undefined, "ctx.putImageData(ctx.getImageData(0, 0, 1, 1), 0, 0)", "undefined");
+  }
+  _assertSame(ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0), undefined, "ctx.drawImage(canvas, 0, 0, 1, 1, 0, 0, 0, 0)", "undefined");
+  _assertSame(ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white'), undefined, "ctx.createLinearGradient(0, 0, 0, 0).addColorStop(0, 'white')", "undefined");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.delete.html b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.delete.html
new file mode 100644
index 0000000000..a33cc869d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.delete.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.conformance.requirements.delete</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.conformance.requirements.delete</h1>
+<p class="desc">window.CanvasRenderingContext2D is Configurable</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.CanvasRenderingContext2D is Configurable");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(window.CanvasRenderingContext2D, undefined, "window.CanvasRenderingContext2D", "undefined");
+  _assertSame(delete window.CanvasRenderingContext2D, true, "delete window.CanvasRenderingContext2D", "true");
+  _assertSame(window.CanvasRenderingContext2D, undefined, "window.CanvasRenderingContext2D", "undefined");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.drawings.html b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.drawings.html
new file mode 100644
index 0000000000..efdad2eab9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.drawings.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.conformance.requirements.drawings</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.conformance.requirements.drawings</h1>
+<p class="desc">void methods return undefined</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("void methods return undefined");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.drawImage(document.getElementById('yellow.png'), 0, 0, 1, 1, 0, 0, 0, 0), undefined, "ctx.drawImage(document.getElementById('yellow.png'), 0, 0, 1, 1, 0, 0, 0, 0)", "undefined");
+
+});
+</script>
+<img src="/images/yellow.png" id="yellow.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.missingargs.html b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.missingargs.html
new file mode 100644
index 0000000000..6744c6c381
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/conformance-requirements/2d.conformance.requirements.missingargs.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.conformance.requirements.missingargs</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.conformance.requirements.missingargs</h1>
+<p class="desc">Missing arguments cause TypeError</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("Missing arguments cause TypeError");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.scale(); });
+  assert_throws_js(TypeError, function() { ctx.scale(1); });
+  assert_throws_js(TypeError, function() { ctx.rotate(); });
+  assert_throws_js(TypeError, function() { ctx.translate(); });
+  assert_throws_js(TypeError, function() { ctx.translate(0); });
+  if (ctx.transform) { // (avoid spurious failures, since the aim here is not to test that all features are supported)
+      assert_throws_js(TypeError, function() { ctx.transform(); });
+      assert_throws_js(TypeError, function() { ctx.transform(1); });
+      assert_throws_js(TypeError, function() { ctx.transform(1, 0); });
+      assert_throws_js(TypeError, function() { ctx.transform(1, 0, 0); });
+      assert_throws_js(TypeError, function() { ctx.transform(1, 0, 0, 1); });
+      assert_throws_js(TypeError, function() { ctx.transform(1, 0, 0, 1, 0); });
+  }
+  if (ctx.setTransform) {
+      assert_throws_js(TypeError, function() { ctx.setTransform(1); });
+      assert_throws_js(TypeError, function() { ctx.setTransform(1, 0); });
+      assert_throws_js(TypeError, function() { ctx.setTransform(1, 0, 0); });
+      assert_throws_js(TypeError, function() { ctx.setTransform(1, 0, 0, 1); });
+      assert_throws_js(TypeError, function() { ctx.setTransform(1, 0, 0, 1, 0); });
+  }
+  assert_throws_js(TypeError, function() { ctx.createLinearGradient(); });
+  assert_throws_js(TypeError, function() { ctx.createLinearGradient(0); });
+  assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.createLinearGradient(0, 0, 1); });
+  assert_throws_js(TypeError, function() { ctx.createRadialGradient(); });
+  assert_throws_js(TypeError, function() { ctx.createRadialGradient(0); });
+  assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1); });
+  assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0); });
+  assert_throws_js(TypeError, function() { ctx.createRadialGradient(0, 0, 1, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.createPattern(canvas); });
+  assert_throws_js(TypeError, function() { ctx.clearRect(); });
+  assert_throws_js(TypeError, function() { ctx.clearRect(0); });
+  assert_throws_js(TypeError, function() { ctx.clearRect(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.clearRect(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.fillRect(); });
+  assert_throws_js(TypeError, function() { ctx.fillRect(0); });
+  assert_throws_js(TypeError, function() { ctx.fillRect(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.fillRect(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.strokeRect(); });
+  assert_throws_js(TypeError, function() { ctx.strokeRect(0); });
+  assert_throws_js(TypeError, function() { ctx.strokeRect(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.strokeRect(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.moveTo(); });
+  assert_throws_js(TypeError, function() { ctx.moveTo(0); });
+  assert_throws_js(TypeError, function() { ctx.lineTo(); });
+  assert_throws_js(TypeError, function() { ctx.lineTo(0); });
+  assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(); });
+  assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(0); });
+  assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.quadraticCurveTo(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.bezierCurveTo(); });
+  assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0); });
+  assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.bezierCurveTo(0, 0, 0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.arcTo(); });
+  assert_throws_js(TypeError, function() { ctx.arcTo(0); });
+  assert_throws_js(TypeError, function() { ctx.arcTo(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.arcTo(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.arcTo(0, 0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.rect(); });
+  assert_throws_js(TypeError, function() { ctx.rect(0); });
+  assert_throws_js(TypeError, function() { ctx.rect(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.rect(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.arc(); });
+  assert_throws_js(TypeError, function() { ctx.arc(0); });
+  assert_throws_js(TypeError, function() { ctx.arc(0, 0); });
+  assert_throws_js(TypeError, function() { ctx.arc(0, 0, 1); });
+  assert_throws_js(TypeError, function() { ctx.arc(0, 0, 1, 0); });
+  // (6th argument to arc is optional)
+  if (ctx.isPointInPath) {
+      assert_throws_js(TypeError, function() { ctx.isPointInPath(); });
+      assert_throws_js(TypeError, function() { ctx.isPointInPath(0); });
+  }
+  if (ctx.drawFocusRing) {
+      assert_throws_js(TypeError, function() { ctx.drawFocusRing(); });
+      assert_throws_js(TypeError, function() { ctx.drawFocusRing(canvas); });
+      assert_throws_js(TypeError, function() { ctx.drawFocusRing(canvas, 0); });
+  }
+  if (ctx.fillText) {
+      assert_throws_js(TypeError, function() { ctx.fillText(); });
+      assert_throws_js(TypeError, function() { ctx.fillText('test'); });
+      assert_throws_js(TypeError, function() { ctx.fillText('test', 0); });
+      assert_throws_js(TypeError, function() { ctx.strokeText(); });
+      assert_throws_js(TypeError, function() { ctx.strokeText('test'); });
+      assert_throws_js(TypeError, function() { ctx.strokeText('test', 0); });
+      assert_throws_js(TypeError, function() { ctx.measureText(); });
+  }
+  assert_throws_js(TypeError, function() { ctx.drawImage(); });
+  assert_throws_js(TypeError, function() { ctx.drawImage(canvas); });
+  assert_throws_js(TypeError, function() { ctx.drawImage(canvas, 0); });
+  // TODO: n >= 3 args on drawImage could be either a valid overload,
+  // or too few for another overload, or too many for another
+  // overload - what should happen?
+  if (ctx.createImageData) {
+      assert_throws_js(TypeError, function() { ctx.createImageData(); });
+      assert_throws_js(TypeError, function() { ctx.createImageData(1); });
+  }
+  if (ctx.getImageData) {
+      assert_throws_js(TypeError, function() { ctx.getImageData(); });
+      assert_throws_js(TypeError, function() { ctx.getImageData(0); });
+      assert_throws_js(TypeError, function() { ctx.getImageData(0, 0); });
+      assert_throws_js(TypeError, function() { ctx.getImageData(0, 0, 1); });
+  }
+  if (ctx.putImageData) {
+      var imgdata = ctx.getImageData(0, 0, 1, 1);
+      assert_throws_js(TypeError, function() { ctx.putImageData(); });
+      assert_throws_js(TypeError, function() { ctx.putImageData(imgdata); });
+      assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 0); });
+  }
+  var g = ctx.createLinearGradient(0, 0, 0, 0);
+  assert_throws_js(TypeError, function() { g.addColorStop(); });
+  assert_throws_js(TypeError, function() { g.addColorStop(0); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.3arg.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.3arg.html
new file mode 100644
index 0000000000..d9e2de563b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.3arg.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.drawImage.3arg</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.drawImage.3arg</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  const response_red = await fetch('/images/red.png');
+  const blob_red = await response_red.blob();
+  const bitmap_red = await createImageBitmap(blob_red);
+
+  const response_green = await fetch('/images/green.png');
+  const blob_green = await response_green.blob();
+  const bitmap_green = await createImageBitmap(blob_green);
+
+  ctx.drawImage(bitmap_green, 0, 0);
+  ctx.drawImage(bitmap_red, -100, 0);
+  ctx.drawImage(bitmap_red, 100, 0);
+  ctx.drawImage(bitmap_red, 0, -50);
+  ctx.drawImage(bitmap_red, 0, 50);
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.5arg.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.5arg.html
new file mode 100644
index 0000000000..befa7108f8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.5arg.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.drawImage.5arg</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.drawImage.5arg</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  const response_red = await fetch('/images/red.png');
+  const blob_red = await response_red.blob();
+  const bitmap_red = await createImageBitmap(blob_red);
+
+  const response_green = await fetch('/images/green.png');
+  const blob_green = await response_green.blob();
+  const bitmap_green = await createImageBitmap(blob_green);
+
+  ctx.drawImage(bitmap_green, 50, 0, 50, 50);
+  ctx.drawImage(bitmap_red, 0, 0, 50, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.html
new file mode 100644
index 0000000000..f71eebc2e0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.basic.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.drawImage.9arg.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.drawImage.9arg.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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/green.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, 100, 50);
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.html
new file mode 100644
index 0000000000..98da8eccbd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destpos.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.drawImage.9arg.destpos</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.drawImage.9arg.destpos</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  const response_red = await fetch('/images/red.png');
+  const blob_red = await response_red.blob();
+  const bitmap_red = await createImageBitmap(blob_red);
+
+  const response_green = await fetch('/images/green.png');
+  const blob_green = await response_green.blob();
+  const bitmap_green = await createImageBitmap(blob_green);
+
+  ctx.drawImage(bitmap_green, 0, 0, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap_green, 0, 0, 100, 50, -100, 0, 100, 50);
+  ctx.drawImage(bitmap_red, 0, 0, 100, 50, 100, 0, 100, 50);
+  ctx.drawImage(bitmap_red, 0, 0, 100, 50, 0, -50, 100, 50);
+  ctx.drawImage(bitmap_red, 0, 0, 100, 50, 0, 50, 100, 50);
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.html
new file mode 100644
index 0000000000..f21096cd96
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.destsize.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.drawImage.9arg.destsize</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.drawImage.9arg.destsize</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  const response_red = await fetch('/images/red.png');
+  const blob_red = await response_red.blob();
+  const bitmap_red = await createImageBitmap(blob_red);
+
+  const response_green = await fetch('/images/green.png');
+  const blob_green = await response_green.blob();
+  const bitmap_green = await createImageBitmap(blob_green);
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.drawImage(bitmap_green, 1, 1, 1, 1, 0, 0, 100, 50);
+  ctx.drawImage(bitmap_red, 0, 0, 100, 50, -50, 0, 50, 50);
+  ctx.drawImage(bitmap_red, 0, 0, 100, 50, 100, 0, 50, 50);
+  ctx.drawImage(bitmap_red, 0, 0, 100, 50, 0, -25, 100, 25);
+  ctx.drawImage(bitmap_red, 0, 0, 100, 50, 0, 50, 100, 25);
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.html
new file mode 100644
index 0000000000..ca4cc18948
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcepos.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.drawImage.9arg.sourcepos</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.drawImage.9arg.sourcepos</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/rgrg-256x256.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  ctx.drawImage(bitmap, 140, 20, 100, 50, 0, 0, 100, 50);
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.html
new file mode 100644
index 0000000000..fb38943cfa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.9arg.sourcesize.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.drawImage.9arg.sourcesize</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.drawImage.9arg.sourcesize</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/rgrg-256x256.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  ctx.drawImage(bitmap, 0, 0, 256, 256, 0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 51, 26);
+  ctx.fillRect(49, 24, 51, 26);
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 20,20, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 80,20, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 20,30, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 80,30, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.alpha.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.alpha.html
new file mode 100644
index 0000000000..52acd11803
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.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.drawImage.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.drawImage.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="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalAlpha = 0;
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.animated.gif.html
new file mode 100644
index 0000000000..6330d06ade
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.animated.gif.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.drawImage.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.drawImage.animated.gif</h1>
+<p class="desc">drawImage() 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("drawImage() of an animated GIF draws the first frame");
+_addTest(function(canvas, ctx) {
+
+  deferTest();
+  step_timeout(t.step_func_done(function () {
+      ctx.drawImage(document.getElementById('anim-gr.gif'), 0, 0);
+      _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  }), 500);
+
+});
+</script>
+<img src="/images/anim-gr.gif" id="anim-gr.gif" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.html
new file mode 100644
index 0000000000..f6516a8ecc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.broken.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.drawImage.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.drawImage.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>
+<p class="output expectedtext">Expected output:<p><img src="/images/green-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  const response = await fetch('/images/broken.png');
+  const blob = await response.blob();
+
+  await promise_rejects_dom(t, 'InvalidStateError', createImageBitmap(blob), 'The source image could not be decoded.');
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.canvas.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.canvas.html
new file mode 100644
index 0000000000..d1f9aeb326
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.canvas.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.drawImage.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.drawImage.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) {
+
+  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);
+
+  ctx.fillStyle = '#f00';
+  ctx.drawImage(canvas2, 0, 0);
+
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+  ctx.drawImage(document.createElement('canvas'), 0, 0);
+
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.clip.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.clip.html
new file mode 100644
index 0000000000..70ec029d8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.clip.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.drawImage.clip</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.drawImage.clip</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.rect(-10, -10, 1, 1);
+  ctx.clip();
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.rect(-10, -10, 1, 1);
+  ctx.clip();
+  ctx.drawImage(bitmap, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.composite.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.composite.html
new file mode 100644
index 0000000000..4ff2026aad
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.composite.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.drawImage.composite</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.drawImage.composite</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-over';
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.floatsource.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.floatsource.html
new file mode 100644
index 0000000000..3e100c257f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.floatsource.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.drawImage.floatsource</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.drawImage.floatsource</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  const response = await fetch('/images/green.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  ctx.drawImage(bitmap, 10.1, 10.1, 0.1, 0.1, 0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.emptysrc.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.emptysrc.html
new file mode 100644
index 0000000000..849f41aaf6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.emptysrc.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.drawImage.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.drawImage.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>
+<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');
+  img.src = "";
+  ctx.drawImage(img, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.immediate.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.immediate.html
new file mode 100644
index 0000000000..d2e8108d90
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.immediate.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.drawImage.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.drawImage.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>
+<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 = 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:
+  ctx.drawImage(img, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.nosrc.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.nosrc.html
new file mode 100644
index 0000000000..dccf75c6d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.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.drawImage.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.drawImage.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>
+<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 = new Image();
+  ctx.drawImage(img, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.reload.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.reload.html
new file mode 100644
index 0000000000..b4a8440e46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.reload.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.drawImage.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.drawImage.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>
+<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('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:
+  ctx.drawImage(img, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</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/drawing-images-to-the-canvas/2d.drawImage.incomplete.removedsrc.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.removedsrc.html
new file mode 100644
index 0000000000..91e11eb15c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.incomplete.removedsrc.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.drawImage.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.drawImage.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>
+<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');
+  img.removeAttribute('src');
+  ctx.drawImage(img, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedest.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedest.html
new file mode 100644
index 0000000000..94d4f71a7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedest.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.drawImage.negativedest</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.drawImage.negativedest</h1>
+<p class="desc">Negative destination width/height represents the correct rectangle</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/ggrr-256x256.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  ctx.drawImage(bitmap, 100, 78, 50, 50, 0, 50, 50, -50);
+  ctx.drawImage(bitmap, 100, 128, 50, -50, 100, 50, -50, -50);
+  _assertPixelApprox(canvas, 1,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 1,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 48,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 48,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 51,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 51,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "Negative destination width/height represents the correct rectangle");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedir.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedir.html
new file mode 100644
index 0000000000..281da9a573
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativedir.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.drawImage.negativedir</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.drawImage.negativedir</h1>
+<p class="desc">Negative dimensions do not affect the direction of the image</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/ggrr-256x256.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  ctx.drawImage(bitmap, 0, 178, 50, -100, 0, 0, 50, 100);
+  ctx.drawImage(bitmap, 0, 78, 50, 100, 50, 100, 50, -100);
+  _assertPixelApprox(canvas, 1,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 1,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 48,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 48,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 51,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 51,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "Negative dimensions do not affect the direction of the image");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativesource.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativesource.html
new file mode 100644
index 0000000000..5a504973d1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.negativesource.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.drawImage.negativesource</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.drawImage.negativesource</h1>
+<p class="desc">Negative source width/height represents the correct rectangle</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/ggrr-256x256.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  ctx.drawImage(bitmap, 100, 78, -100, 50, 0, 0, 50, 50);
+  ctx.drawImage(bitmap, 100, 128, -100, -50, 50, 0, 50, 50);
+  _assertPixelApprox(canvas, 1,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 1,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 48,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 48,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 51,1, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 51,48, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "Negative source width/height represents the correct rectangle");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonexistent.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonexistent.html
new file mode 100644
index 0000000000..0cebf6cf68
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonexistent.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.drawImage.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.drawImage.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('not-found-at-all.png');
+  assert_throws_dom("INVALID_STATE_ERR", function() { ctx.drawImage(img, 0, 0); });
+
+});
+</script>
+<img src="/images/not-found-at-all.png" id="not-found-at-all.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html
new file mode 100644
index 0000000000..8225d15fdd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nonfinite.html
@@ -0,0 +1,335 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.drawImage.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.drawImage.nonfinite</h1>
+<p class="desc">drawImage() with Infinity/NaN is ignored</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/redtransparent.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, Infinity, 0);
+  ctx.drawImage(bitmap, -Infinity, 0);
+  ctx.drawImage(bitmap, NaN, 0);
+  ctx.drawImage(bitmap, 0, Infinity);
+  ctx.drawImage(bitmap, 0, -Infinity);
+  ctx.drawImage(bitmap, 0, NaN);
+  ctx.drawImage(bitmap, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, -Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, NaN, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, -Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, NaN, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, -Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, NaN, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, -Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, NaN);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, -Infinity, 0, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, NaN, 0, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, -Infinity, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, NaN, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, -Infinity, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, NaN, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, -Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, NaN, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, -Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, NaN, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, -Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, NaN, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, -Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, NaN, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, 100, -Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, 100, NaN);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, Infinity, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, Infinity, 100, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, Infinity, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, Infinity, 0, 100, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, Infinity, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, Infinity, 100, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, Infinity, 50, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, 0, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, Infinity, 0, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, Infinity, 100, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, 0, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, 0, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, Infinity, 0, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, Infinity, Infinity, 50);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, Infinity, Infinity, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, Infinity, 100, Infinity);
+  ctx.drawImage(bitmap, 0, 0, 100, 50, 0, 0, Infinity, Infinity);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+}, "drawImage() with Infinity/NaN is ignored");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nowrap.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nowrap.html
new file mode 100644
index 0000000000..8c32461b3a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.nowrap.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.drawImage.nowrap</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.drawImage.nowrap</h1>
+<p class="desc">Stretched images do not get pixels wrapping around the edges</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/redtransparent.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, -1950, 0, 2000, 50);
+  _assertPixelApprox(canvas, 45,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 55,25, 0,255,0,255, 2);
+
+}, "Stretched images do not get pixels wrapping around the edges");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.null.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.null.html
new file mode 100644
index 0000000000..0f46c97dce
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.null.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.drawImage.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.drawImage.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_throws_js(TypeError, function() { ctx.drawImage(null, 0, 0); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.path.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.path.html
new file mode 100644
index 0000000000..52852ec32e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.path.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.drawImage.path</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.drawImage.path</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.rect(0, 0, 100, 50);
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, 0, 0);
+  ctx.fill();
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.1.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.1.html
new file mode 100644
index 0000000000..90eaaea5d9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.1.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.drawImage.self.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.drawImage.self.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';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(50, 0, 50, 50);
+  ctx.drawImage(canvas, 50, 0);
+
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.2.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.2.html
new file mode 100644
index 0000000000..39e619ddc5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.self.2.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.drawImage.self.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.drawImage.self.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';
+  ctx.fillRect(0, 1, 100, 49);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 1);
+  ctx.drawImage(canvas, 0, 1);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 2);
+
+  _assertPixelApprox(canvas, 0,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,0, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 0,49, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 99,49, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.svg.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.svg.html
new file mode 100644
index 0000000000..bcfcdadb28
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.svg.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.drawImage.svg</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.drawImage.svg</h1>
+<p class="desc">drawImage() of an SVG image</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  const img = new Image();
+  const imageLoadPromise = new Promise((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = (err) => reject(err);
+  });
+  img.src = '/images/green.svg';
+  await imageLoadPromise;
+
+  ctx.drawImage(img, 0, 0);
+  _assertPixelApprox(canvas, 50, 25, 0, 255, 0, 255, 2);
+
+}, "drawImage() of an SVG image");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.transform.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.transform.html
new file mode 100644
index 0000000000..42a277e200
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.transform.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.drawImage.transform</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.drawImage.transform</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.translate(100, 0);
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+
+  ctx.drawImage(bitmap, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.html
new file mode 100644
index 0000000000..73e8f45090
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.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.drawImage.wrongtype</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.drawImage.wrongtype</h1>
+<p class="desc">Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError</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("Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.drawImage(undefined, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.drawImage(0, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.drawImage("", 0, 0); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.paragraph.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.paragraph.html
new file mode 100644
index 0000000000..ef0be39ca7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.wrongtype.paragraph.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.drawImage.wrongtype.paragraph</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.drawImage.wrongtype.paragraph</h1>
+<p class="desc">Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError</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("Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.drawImage(document.createElement('p'), 0, 0); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.html
new file mode 100644
index 0000000000..d3c644cf88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerocanvas.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.drawImage.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.drawImage.zerocanvas</h1>
+<p class="desc">drawImage with zero-sized canvas as the source shoud throw exception</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("drawImage with zero-sized canvas as the source shoud throw exception");
+_addTest(function(canvas, ctx) {
+
+  var canvas2 = document.createElement('canvas');
+  canvas2.width = 0;
+  canvas2.height = 50;
+  assert_throws_dom("INVALID_STATE_ERR", function() { ctx.drawImage(canvas2, 0, 0); });
+
+  canvas2.width = 50;
+  canvas2.height = 0;
+  assert_throws_dom("INVALID_STATE_ERR", function() { ctx.drawImage(canvas2, 0, 0); });
+
+  canvas2.width = 0;
+  canvas2.height = 0;
+  assert_throws_dom("INVALID_STATE_ERR", function() { ctx.drawImage(canvas2, 0, 0); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.html
new file mode 100644
index 0000000000..2b7b4ebea6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.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.drawImage.zerosource</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.drawImage.zerosource</h1>
+<p class="desc">drawImage with zero-sized source rectangle draws nothing without exception</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  const response = await fetch('/images/red.png');
+  const blob = await response.blob();
+  const bitmap = await createImageBitmap(blob);
+  ctx.drawImage(bitmap, 10, 10, 0, 1, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 10, 10, 1, 0, 0, 0, 100, 50);
+  ctx.drawImage(bitmap, 10, 10, 0, 0, 0, 0, 100, 50);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+}, "drawImage with zero-sized source rectangle draws nothing without exception");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.image.html b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.image.html
new file mode 100644
index 0000000000..ea00f1f9a1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-images-to-the-canvas/2d.drawImage.zerosource.image.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.drawImage.zerosource.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.drawImage.zerosource.image</h1>
+<p class="desc">drawImage with zero-sized source rectangle from image draws nothing without exception</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  function loadImage(src) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = (err) => reject(err);
+      img.src = src;
+    });
+  }
+  const img1 = await loadImage('/images/red-zerowidth.svg');
+  const img2 = await loadImage('/images/red-zeroheight.svg');
+  const img3 = await loadImage('/images/red-zerosize.svg');
+
+  ctx.drawImage(img1, 0, 0, 100, 50);
+  ctx.drawImage(img2, 0, 0, 100, 50);
+  ctx.drawImage(img3, 0, 0, 100, 50);
+  _assertPixel(canvas, 50, 25, 0, 255, 0, 255);
+
+}, "drawImage with zero-sized source rectangle from image draws nothing without exception");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.basic.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.basic.html
new file mode 100644
index 0000000000..78a8c3ac06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.basic.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.clearRect.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.clearRect.basic</h1>
+<p class="desc">clearRect clears to transparent black</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("clearRect clears to transparent black");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.clearRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.clip.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.clip.html
new file mode 100644
index 0000000000..eb43a401e7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.clip.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.clearRect.clip</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.clearRect.clip</h1>
+<p class="desc">clearRect is affected by clipping regions</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("clearRect is affected by clipping regions");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.rect(0, 0, 16, 16);
+  ctx.clip();
+  ctx.clearRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 16, 16);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalalpha.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalalpha.html
new file mode 100644
index 0000000000..73b87ecc81
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalalpha.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.clearRect.globalalpha</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.clearRect.globalalpha</h1>
+<p class="desc">clearRect is not affected by globalAlpha</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("clearRect is not affected by globalAlpha");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalAlpha = 0.1;
+  ctx.clearRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalcomposite.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalcomposite.html
new file mode 100644
index 0000000000..9eb3d33834
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.globalcomposite.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.clearRect.globalcomposite</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.clearRect.globalcomposite</h1>
+<p class="desc">clearRect is not affected by globalCompositeOperation</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("clearRect is not affected by globalCompositeOperation");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.clearRect(0, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.negative.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.negative.html
new file mode 100644
index 0000000000..baa48e2ba3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.negative.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.clearRect.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.clearRect.negative</h1>
+<p class="desc">clearRect of negative sizes works</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("clearRect of negative sizes works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.clearRect(0, 0, 50, 25);
+  ctx.clearRect(100, 0, -50, 25);
+  ctx.clearRect(0, 50, 50, -25);
+  ctx.clearRect(100, 50, -50, -25);
+  _assertPixel(canvas, 25,12, 0,0,0,0);
+  _assertPixel(canvas, 75,12, 0,0,0,0);
+  _assertPixel(canvas, 25,37, 0,0,0,0);
+  _assertPixel(canvas, 75,37, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.nonfinite.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.nonfinite.html
new file mode 100644
index 0000000000..726ed05772
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.nonfinite.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.clearRect.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.clearRect.nonfinite</h1>
+<p class="desc">clearRect() with Infinity/NaN is ignored</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("clearRect() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.clearRect(Infinity, 0, 100, 50);
+  ctx.clearRect(-Infinity, 0, 100, 50);
+  ctx.clearRect(NaN, 0, 100, 50);
+  ctx.clearRect(0, Infinity, 100, 50);
+  ctx.clearRect(0, -Infinity, 100, 50);
+  ctx.clearRect(0, NaN, 100, 50);
+  ctx.clearRect(0, 0, Infinity, 50);
+  ctx.clearRect(0, 0, -Infinity, 50);
+  ctx.clearRect(0, 0, NaN, 50);
+  ctx.clearRect(0, 0, 100, Infinity);
+  ctx.clearRect(0, 0, 100, -Infinity);
+  ctx.clearRect(0, 0, 100, NaN);
+  ctx.clearRect(Infinity, Infinity, 100, 50);
+  ctx.clearRect(Infinity, Infinity, Infinity, 50);
+  ctx.clearRect(Infinity, Infinity, Infinity, Infinity);
+  ctx.clearRect(Infinity, Infinity, 100, Infinity);
+  ctx.clearRect(Infinity, 0, Infinity, 50);
+  ctx.clearRect(Infinity, 0, Infinity, Infinity);
+  ctx.clearRect(Infinity, 0, 100, Infinity);
+  ctx.clearRect(0, Infinity, Infinity, 50);
+  ctx.clearRect(0, Infinity, Infinity, Infinity);
+  ctx.clearRect(0, Infinity, 100, Infinity);
+  ctx.clearRect(0, 0, Infinity, Infinity);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.path.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.path.html
new file mode 100644
index 0000000000..77c9c037b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.path.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.clearRect.path</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.clearRect.path</h1>
+<p class="desc">clearRect does not affect the current path</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("clearRect does not affect the current path");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 50);
+  ctx.clearRect(0, 0, 16, 16);
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.shadow.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.shadow.html
new file mode 100644
index 0000000000..8240073a28
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.shadow.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.clearRect.shadow</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.clearRect.shadow</h1>
+<p class="desc">clearRect does not draw shadows</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("clearRect does not draw shadows");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#f00';
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 50;
+  ctx.clearRect(0, -50, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.transform.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.transform.html
new file mode 100644
index 0000000000..347bedb835
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.transform.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.clearRect.transform</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.clearRect.transform</h1>
+<p class="desc">clearRect is affected by transforms</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("clearRect is affected by transforms");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.scale(10, 10);
+  ctx.translate(0, 5);
+  ctx.clearRect(0, -5, 10, 5);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.zero.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.zero.html
new file mode 100644
index 0000000000..2c192a7102
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.clearRect.zero.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.clearRect.zero</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.clearRect.zero</h1>
+<p class="desc">clearRect of zero pixels has no effect</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("clearRect of zero pixels has no effect");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.clearRect(0, 0, 100, 0);
+  ctx.clearRect(0, 0, 0, 50);
+  ctx.clearRect(0, 0, 0, 0);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.basic.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.basic.html
new file mode 100644
index 0000000000..f29daf426a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.basic.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.fillRect.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.fillRect.basic</h1>
+<p class="desc">fillRect works</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("fillRect works");
+_addTest(function(canvas, ctx) {
+
+  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/drawing-rectangles-to-the-canvas/2d.fillRect.clip.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.clip.html
new file mode 100644
index 0000000000..cc46b765d4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.clip.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.fillRect.clip</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.fillRect.clip</h1>
+<p class="desc">fillRect is affected by clipping regions</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("fillRect is affected by clipping regions");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.rect(0, 0, 16, 16);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 16, 16);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.negative.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.negative.html
new file mode 100644
index 0000000000..7c64952e8b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.negative.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.fillRect.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.fillRect.negative</h1>
+<p class="desc">fillRect of negative sizes works</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("fillRect of negative sizes works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 25);
+  ctx.fillRect(100, 0, -50, 25);
+  ctx.fillRect(0, 50, 50, -25);
+  ctx.fillRect(100, 50, -50, -25);
+  _assertPixel(canvas, 25,12, 0,255,0,255);
+  _assertPixel(canvas, 75,12, 0,255,0,255);
+  _assertPixel(canvas, 25,37, 0,255,0,255);
+  _assertPixel(canvas, 75,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.nonfinite.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.nonfinite.html
new file mode 100644
index 0000000000..090607766d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.nonfinite.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.fillRect.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.fillRect.nonfinite</h1>
+<p class="desc">fillRect() with Infinity/NaN is ignored</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("fillRect() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(Infinity, 0, 100, 50);
+  ctx.fillRect(-Infinity, 0, 100, 50);
+  ctx.fillRect(NaN, 0, 100, 50);
+  ctx.fillRect(0, Infinity, 100, 50);
+  ctx.fillRect(0, -Infinity, 100, 50);
+  ctx.fillRect(0, NaN, 100, 50);
+  ctx.fillRect(0, 0, Infinity, 50);
+  ctx.fillRect(0, 0, -Infinity, 50);
+  ctx.fillRect(0, 0, NaN, 50);
+  ctx.fillRect(0, 0, 100, Infinity);
+  ctx.fillRect(0, 0, 100, -Infinity);
+  ctx.fillRect(0, 0, 100, NaN);
+  ctx.fillRect(Infinity, Infinity, 100, 50);
+  ctx.fillRect(Infinity, Infinity, Infinity, 50);
+  ctx.fillRect(Infinity, Infinity, Infinity, Infinity);
+  ctx.fillRect(Infinity, Infinity, 100, Infinity);
+  ctx.fillRect(Infinity, 0, Infinity, 50);
+  ctx.fillRect(Infinity, 0, Infinity, Infinity);
+  ctx.fillRect(Infinity, 0, 100, Infinity);
+  ctx.fillRect(0, Infinity, Infinity, 50);
+  ctx.fillRect(0, Infinity, Infinity, Infinity);
+  ctx.fillRect(0, Infinity, 100, Infinity);
+  ctx.fillRect(0, 0, Infinity, Infinity);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.path.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.path.html
new file mode 100644
index 0000000000..39a6e18103
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.path.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.fillRect.path</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.fillRect.path</h1>
+<p class="desc">fillRect does not affect the current path</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("fillRect does not affect the current path");
+_addTest(function(canvas, ctx) {
+
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 16, 16);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.shadow.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.shadow.html
new file mode 100644
index 0000000000..48aa8538f1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.shadow.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.fillRect.shadow</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.fillRect.shadow</h1>
+<p class="desc">fillRect draws shadows</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("fillRect draws shadows");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#0f0';
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 50;
+  ctx.fillRect(0, -50, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.transform.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.transform.html
new file mode 100644
index 0000000000..de6f790bc7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.transform.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.fillRect.transform</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.fillRect.transform</h1>
+<p class="desc">fillRect is affected by transforms</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("fillRect is affected by transforms");
+_addTest(function(canvas, ctx) {
+
+  ctx.scale(10, 10);
+  ctx.translate(0, 5);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, -5, 10, 5);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.zero.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.zero.html
new file mode 100644
index 0000000000..095eb19a66
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.fillRect.zero.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.fillRect.zero</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.fillRect.zero</h1>
+<p class="desc">fillRect of zero pixels has no effect</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("fillRect of zero pixels has no effect");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 0);
+  ctx.fillRect(0, 0, 0, 50);
+  ctx.fillRect(0, 0, 0, 0);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.basic.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.basic.html
new file mode 100644
index 0000000000..d2ea813178
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.basic.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.strokeRect.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.strokeRect.basic</h1>
+<p class="desc">strokeRect works</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("strokeRect works");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  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/drawing-rectangles-to-the-canvas/2d.strokeRect.clip.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.clip.html
new file mode 100644
index 0000000000..31db69b6cd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.clip.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.strokeRect.clip</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.strokeRect.clip</h1>
+<p class="desc">strokeRect is affected by clipping regions</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("strokeRect is affected by clipping regions");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.rect(0, 0, 16, 16);
+  ctx.clip();
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.strokeRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 16, 16);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalalpha.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalalpha.html
new file mode 100644
index 0000000000..323b663145
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalalpha.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.strokeRect.globalalpha</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.strokeRect.globalalpha</h1>
+<p class="desc">strokeRect is affected by globalAlpha</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("strokeRect is affected by globalAlpha");
+_addTest(function(canvas, ctx) {
+
+  ctx.globalAlpha = 0;
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.strokeRect(25, 24, 50, 2);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalcomposite.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalcomposite.html
new file mode 100644
index 0000000000..671db7f07a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.globalcomposite.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.strokeRect.globalcomposite</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.strokeRect.globalcomposite</h1>
+<p class="desc">strokeRect is not affected by globalCompositeOperation</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("strokeRect is not affected by globalCompositeOperation");
+_addTest(function(canvas, ctx) {
+
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.strokeRect(25, 24, 50, 2);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.negative.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.negative.html
new file mode 100644
index 0000000000..20bbc5bafe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.negative.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.strokeRect.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.strokeRect.negative</h1>
+<p class="desc">strokeRect of negative sizes works</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("strokeRect of negative sizes works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 25;
+  ctx.strokeRect(12, 12, 26, 1);
+  ctx.strokeRect(88, 12, -26, 1);
+  ctx.strokeRect(12, 38, 26, -1);
+  ctx.strokeRect(88, 38, -26, -1);
+  _assertPixel(canvas, 25,12, 0,255,0,255);
+  _assertPixel(canvas, 75,12, 0,255,0,255);
+  _assertPixel(canvas, 25,37, 0,255,0,255);
+  _assertPixel(canvas, 75,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.nonfinite.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.nonfinite.html
new file mode 100644
index 0000000000..af7a393c8f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.nonfinite.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.strokeRect.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.strokeRect.nonfinite</h1>
+<p class="desc">strokeRect() with Infinity/NaN is ignored</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("strokeRect() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 150;
+  ctx.strokeRect(Infinity, 0, 100, 50);
+  ctx.strokeRect(-Infinity, 0, 100, 50);
+  ctx.strokeRect(NaN, 0, 100, 50);
+  ctx.strokeRect(0, Infinity, 100, 50);
+  ctx.strokeRect(0, -Infinity, 100, 50);
+  ctx.strokeRect(0, NaN, 100, 50);
+  ctx.strokeRect(0, 0, Infinity, 50);
+  ctx.strokeRect(0, 0, -Infinity, 50);
+  ctx.strokeRect(0, 0, NaN, 50);
+  ctx.strokeRect(0, 0, 100, Infinity);
+  ctx.strokeRect(0, 0, 100, -Infinity);
+  ctx.strokeRect(0, 0, 100, NaN);
+  ctx.strokeRect(Infinity, Infinity, 100, 50);
+  ctx.strokeRect(Infinity, Infinity, Infinity, 50);
+  ctx.strokeRect(Infinity, Infinity, Infinity, Infinity);
+  ctx.strokeRect(Infinity, Infinity, 100, Infinity);
+  ctx.strokeRect(Infinity, 0, Infinity, 50);
+  ctx.strokeRect(Infinity, 0, Infinity, Infinity);
+  ctx.strokeRect(Infinity, 0, 100, Infinity);
+  ctx.strokeRect(0, Infinity, Infinity, 50);
+  ctx.strokeRect(0, Infinity, Infinity, Infinity);
+  ctx.strokeRect(0, Infinity, 100, Infinity);
+  ctx.strokeRect(0, 0, Infinity, Infinity);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.path.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.path.html
new file mode 100644
index 0000000000..121789d864
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.path.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.strokeRect.path</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.strokeRect.path</h1>
+<p class="desc">strokeRect does not affect the current path</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("strokeRect does not affect the current path");
+_addTest(function(canvas, ctx) {
+
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 5;
+  ctx.strokeRect(0, 0, 16, 16);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.shadow.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.shadow.html
new file mode 100644
index 0000000000..8e7a50a745
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.shadow.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.strokeRect.shadow</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.strokeRect.shadow</h1>
+<p class="desc">strokeRect draws shadows</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("strokeRect draws shadows");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowBlur = 0;
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 50;
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.strokeRect(0, -75, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.transform.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.transform.html
new file mode 100644
index 0000000000..312b9d2003
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.transform.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.strokeRect.transform</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.strokeRect.transform</h1>
+<p class="desc">fillRect is affected by transforms</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("fillRect is affected by transforms");
+_addTest(function(canvas, ctx) {
+
+  ctx.scale(10, 10);
+  ctx.translate(0, 5);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 5;
+  ctx.strokeRect(2.5, -2.6, 5, 0.2);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.1.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.1.html
new file mode 100644
index 0000000000..c140a2668b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.1.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.strokeRect.zero.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.strokeRect.zero.1</h1>
+<p class="desc">strokeRect of 0x0 pixels draws nothing</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("strokeRect of 0x0 pixels draws nothing");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 250;
+  ctx.strokeRect(50, 25, 0, 0);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.2.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.2.html
new file mode 100644
index 0000000000..f17620a302
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.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.strokeRect.zero.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.strokeRect.zero.2</h1>
+<p class="desc">strokeRect of 0x0 pixels draws nothing, including caps and joins</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("strokeRect of 0x0 pixels draws nothing, including caps and joins");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 250;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+  ctx.strokeRect(50, 25, 0, 0);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.3.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.3.html
new file mode 100644
index 0000000000..e671ae4116
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.3.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.strokeRect.zero.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.strokeRect.zero.3</h1>
+<p class="desc">strokeRect of Nx0 pixels draws a straight line</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("strokeRect of Nx0 pixels draws a straight line");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.strokeRect(0, 25, 100, 0);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.4.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.4.html
new file mode 100644
index 0000000000..ff3c4040b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.4.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.strokeRect.zero.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.strokeRect.zero.4</h1>
+<p class="desc">strokeRect of Nx0 pixels draws a closed line with no caps</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("strokeRect of Nx0 pixels draws a closed line with no caps");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 250;
+  ctx.lineCap = 'round';
+  ctx.strokeRect(100, 25, 100, 0);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.5.html b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.5.html
new file mode 100644
index 0000000000..809781ab43
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/drawing-rectangles-to-the-canvas/2d.strokeRect.zero.5.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.strokeRect.zero.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.strokeRect.zero.5</h1>
+<p class="desc">strokeRect of Nx0 pixels draws a closed line with joins</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("strokeRect of Nx0 pixels draws a closed line with joins");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 250;
+  ctx.lineJoin = 'round';
+  ctx.strokeRect(100, 25, 100, 0);
+  _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.CSSHSL.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSHSL.html
new file mode 100644
index 0000000000..481d6fe9e5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSHSL.html
@@ -0,0 +1,50 @@
+<!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..cfdb603d5d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.CSSRGB.html
@@ -0,0 +1,59 @@
+<!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..ae6507350c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.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.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..b48715f093
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colorObject.transparency.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.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.colormix.currentcolor.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.currentcolor.html
new file mode 100644
index 0000000000..191395a20b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.currentcolor.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.colormix.currentcolor</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.colormix.currentcolor</h1>
+<p class="desc">color-mix works as color input with currentcolor</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("color-mix works as color input with currentcolor");
+_addTest(function(canvas, ctx) {
+
+  canvas.setAttribute('style', 'color: magenta');
+  ctx.fillStyle = "color-mix(in srgb, black, currentcolor)";
+  _assertSame(ctx.fillStyle, 'color(srgb 0.5 0 0.5)', "ctx.fillStyle", "'color(srgb 0.5 0 0.5)'");
+  ctx.strokeStyle = "color-mix(in srgb, black, currentcolor)";
+  _assertSame(ctx.strokeStyle, 'color(srgb 0.5 0 0.5)', "ctx.strokeStyle", "'color(srgb 0.5 0 0.5)'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.html
new file mode 100644
index 0000000000..1faa6c0a9f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.colormix.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.fillStyle.colormix</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.colormix</h1>
+<p class="desc">color-mix 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>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("color-mix works as color input");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = "color-mix(in srgb, red, blue)";
+  _assertSame(ctx.fillStyle, 'color(srgb 0.5 0 0.5)', "ctx.fillStyle", "'color(srgb 0.5 0 0.5)'");
+  ctx.fillStyle = "color-mix(in srgb, red, color(srgb 1 0 0))";
+  _assertSame(ctx.fillStyle, 'color(srgb 1 0 0)', "ctx.fillStyle", "'color(srgb 1 0 0)'");
+
+});
+</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..1bd3e2d4ad
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.default.html
@@ -0,0 +1,26 @@
+<!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..423293e1b6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.halftransparent.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.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..ec63d7662d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.semitransparent.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.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..bcdd57a7ca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.solid.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.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..21931aaf23
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.get.transparent.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.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..9fb83063f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidstring.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.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..84d8fbd3ff
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.invalidtype.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.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..87b5bc9371
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-1.png 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..746c358dbb
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-2.png 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..b8a9cd5a09
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-3.png 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..d5e58b9321
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-4.png 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..85bbb802b5
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-5.png 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..154bdcd49a
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-6.png 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..5cf81e41a1
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-7.png 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..17d0782df1
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-8.png 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..2f4b1e8e1a
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsl-9.png 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..bc70e21d62
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-1.png 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..7f77498531
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-2.png 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..c33a50a946
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-3.png 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..3d0cafc66b
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-4.png 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..a70613b49f
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-5.png 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..8c46d887ba
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-6.png 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..b6b4760086
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-7.png 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..7933d47fd2
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-8.png 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..8a4e29d40e
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-hsla-9.png 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..632b7f57fb
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-1.png 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..1d3e683b35
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-2.png 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..8a6f352350
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-3.png 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..1fdf9ecf92
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-4.png 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..a1d99d5e24
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-5.png 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..ad2c5f5484
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgb-6.png 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..f394dbfb2f
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-1.png 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..5529bc1462
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-2.png 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..82047a5698
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-3.png 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..5fea546f10
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-4.png 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..d048566522
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-5.png 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..28feb2eb17
--- /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,29 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.css-color-4-rgba-6.png 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..a1481e36e1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.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.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..2f4d0fe4f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.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.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..96b070c8c1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.removed.png 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..017bfc88c2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex3.png 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..c8704edbb2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex4.png 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..9644a46a0c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex6.png 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..b2dd06982d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hex8.png 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..ceb3da52e0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-1.png 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..22e67e33d4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-2.png 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..e182952fbf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-3.png 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..b320c1c98b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-4.png 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..1264f626de
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-5.png 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..e0fc787559
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-6.png 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..59d66c383c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-1.png 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..1a1939e47a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-2.png 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..56f3a0a8b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-3.png 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..af9d11e678
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsl-clamp-4.png 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..dbc738ffa7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-1.png 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..aa21789b02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-2.png 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..2acac26e1a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-1.png 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..0f32fb5474
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-2.png 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..4bc134aec5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-3.png 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..f8b2382755
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-4.png 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..9c5e2258b9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-5.png 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..153515eedd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.hsla-clamp-6.png 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..65d0d2020c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.html4.png 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..4046f825a1
--- /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,29 @@
+<!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..2075f8e459
--- /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,29 @@
+<!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..53bbf6c7ee
--- /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,29 @@
+<!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..e8be93b59d
--- /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,29 @@
+<!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..b8938adeb2
--- /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,29 @@
+<!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..7104ca6a84
--- /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,29 @@
+<!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..c340e7445d
--- /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,29 @@
+<!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..3f94ec16ff
--- /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,29 @@
+<!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..69503593fe
--- /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,29 @@
+<!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..96af643ee8
--- /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,29 @@
+<!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..a2691acaf1
--- /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,29 @@
+<!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..eb5f56692a
--- /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,29 @@
+<!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..7de9dd4911
--- /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,29 @@
+<!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..20b889c5cc
--- /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,29 @@
+<!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..908545cebe
--- /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,29 @@
+<!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..851314f643
--- /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,29 @@
+<!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..9aba392276
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex1.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.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..361db1de43
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex2.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.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..7df089d840
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex3.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.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..6089675b81
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex4.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.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..488daf4690
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex5.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.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..ec0def2e10
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex6.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.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..2b07b8dc9b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex7.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.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..f886d4a67c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hex8.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.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..153f9cb513
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-1.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.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..7a2bd4f930
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-2.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.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..8ad0f54264
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-3.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.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..780b83b383
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-4.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.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..ad5944f1c0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-5.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.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..948a9d8a36
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsl-6.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.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..7a4bdb318f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-1.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.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..4164de3bbd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-2.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.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..109a22cdf9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.hsla-3.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.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..acdd4d4c8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-1.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.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..292f909bcd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-2.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.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..f47ec43f55
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-3.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.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..d15d787f63
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-4.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.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..ce391d0069
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.name-5.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.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..934f725dd3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-1.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.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..f92a06b450
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-2.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.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..8ebde1782a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgb-3.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.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..6e3d135f41
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-1.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.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..a6a61002da
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-2.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.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..464d562b2f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-3.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.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..815ce2f8b6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-4.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.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..33c3e33dfc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.invalid.rgba-5.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.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..0432a3bbd4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-1.png 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..cf81e3c73f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-2.png 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..b3c609fbee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-3.png 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..60aa8563bd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-4.png 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..242ca3933d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-clamp-5.png 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..201874c27d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-eof.png 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..0ce1db836f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-num.png 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..9b3de61672
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgb-percent.png 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..587253ad69
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-1.png 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..4e8156e60a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-clamp-2.png 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..5f07d38b68
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-eof.png 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..0c329c96ea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-1.png 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..384a7f412a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-num-2.png 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..60ee007577
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-percent.png 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..eaec0debcb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-1.png 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..947bbbce8d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-2.png 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..052a12beae
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-3.png 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..ee9cd4e34e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.rgba-solid-4.png 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..0ff839b8cb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-1.png 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..141f4bfe46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.svg-2.png 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..3a56389973
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.system.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.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..5b9a834c0b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-1.png 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..a077534c23
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.transparent-2.png 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..2a12b05839
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.toStringFunctionCallback.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.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..1a4cde4146
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.invalid.inputs.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.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..ba85463b41
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.negative.rotation.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.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..f8cebbb0d4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic.positive.rotation.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.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..dcc7575254
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.empty.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.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..13f48f37bf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.alpha.png 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..3f7e27abe0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.html
@@ -0,0 +1,33 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.color.png 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..0d635ed671
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.html
@@ -0,0 +1,33 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.coloralpha.png 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..9e62f3436c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.multiple.png 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..b46a7bed36
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.outside.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.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..099a3ea81a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap.png 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..a4a2955d3b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.overlap2.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.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..9ac31626df
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.solid.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.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..80302761d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.html
@@ -0,0 +1,33 @@
+<!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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.vertical.png 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..7a8892db11
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fill.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.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..7696cefdd0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillRect.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.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..98ef6c3425
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.fillText.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.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..283e3874ad
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.stroke.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.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..7d243ecbc4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeRect.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.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..bab7c6b6d9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.interpolate.zerosize.strokeText.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.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..89d0092715
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.nonfinite.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.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..0ae3220f06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.1.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.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..8f761c666f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.2.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.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..fdd1e0e9a4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.linear.transform.3.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.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..9ff3e607c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.compare.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.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..9c30d9cbac
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.crosscanvas.html
@@ -0,0 +1,33 @@
+<!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..95cc893671
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.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.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
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.current.png 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..2be7b3d6fd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidcolor.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.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..76aaed7115
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.invalidoffset.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.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..c32312142d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.return.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.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..37c77d2f2c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.object.type.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.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..ae78d0d78f
--- /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;
+  ctx.fillRect(0, 0, 100, 50);
+  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..d32e972cc5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.behind.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..b9774aeba6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.beside.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..15808ee50e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.bottom.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..067f129983
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.cylinder.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..88ecdb9810
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.front.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..046e4d97b1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape1.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..1c7660ac99
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.shape2.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..6760b18db7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.cone.top.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..1ff7c44193
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.equal.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..00ece5750e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside1.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..be9c1a810a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside2.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..5e9bd4c721
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.inside3.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..d86812b68c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.negative.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.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..0c16b41540
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.nonfinite.html
@@ -0,0 +1,100 @@
+<!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..ea9dfdb3bb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside1.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..b07fd02518
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside2.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..7c19baf5c5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.outside3.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..6487fc440b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch1.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..908a0dbc19
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch2.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..07f52d7363
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.touch3.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.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);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 1);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixelApprox(canvas, 50,48, 0,255,0,255, 1);
+  _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..d0eb13c457
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.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.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..6e56c4c63b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.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.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..426021d097
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.radial.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.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..be69cca997
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.animated.gif.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.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..069263adff
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.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.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..5ebffe50f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.image.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.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..f24899c302
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.nocontext.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.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..c510063d80
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.type.html
@@ -0,0 +1,33 @@
+<!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..fbeb7bd797
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.basic.zerocanvas.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.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..f93b36ddf2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.crosscanvas.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.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..2cf21746ca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.broken.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.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..fb05cbb455
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.emptysrc.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.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..375c1b49c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.immediate.html
@@ -0,0 +1,33 @@
+<!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..d43a0ca918
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.nosrc.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.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..984bd36a74
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.reload.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.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..20d5543684
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.incomplete.removedsrc.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.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..2af0a3ed09
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent-but-loading.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.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..b365281179
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nonexistent.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.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..710749dd54
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.nosrc.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.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..8ae002d682
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.null.html
@@ -0,0 +1,26 @@
+<!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..af32e63bba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.string.html
@@ -0,0 +1,26 @@
+<!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..75f50c7a4a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.undefined.html
@@ -0,0 +1,26 @@
+<!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..cd12c2e883
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zeroheight.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.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..053b8ac648
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.image.zerowidth.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.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..0524351fdb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas1.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.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..6e50a5761c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.canvas2.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.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..94f55c84f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image1.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.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..1025d195f2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.modify.image2.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.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..036be9e068
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.basic.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.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..dfe2b8589e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord1.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.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..dfd637211d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord2.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.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..5456a543da
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.coord3.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.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..4df0cdfe67
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.norepeat.outside.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.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..f0ad70fc1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.canvas.html
@@ -0,0 +1,47 @@
+<!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..b45f4ab773
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.orientation.image.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.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..8999ac4e44
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.basic.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.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..8dc6402d55
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord1.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.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..9c03d02898
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord2.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.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..0dc0a865b4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.coord3.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.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..b939195877
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeat.outside.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.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..8c77908cd1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.basic.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.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..4c7fa9d498
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.coord1.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.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..26ee85e4d1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeatx.outside.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.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..c28ff155eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.basic.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.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..7f2bb163f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.coord1.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.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..7be743ec2b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.paint.repeaty.outside.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.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..d998bbeb2f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.case.html
@@ -0,0 +1,26 @@
+<!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..2810efe700
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.empty.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.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..0de121a4f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.null.html
@@ -0,0 +1,26 @@
+<!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..33d601d974
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.nullsuffix.html
@@ -0,0 +1,26 @@
+<!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..f0a7ae8488
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.undefined.html
@@ -0,0 +1,26 @@
+<!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..cdcc7d6523
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognised.html
@@ -0,0 +1,26 @@
+<!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..11c9ec0ebb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.repeat.unrecognisednull.html
@@ -0,0 +1,26 @@
+<!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..8cd3983dc3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.nonexistent.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.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..11c07e36de
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zeroheight.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.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..a8b8cb1351
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.svgimage.zerowidth.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.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..21da30581d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.identity.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.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..bfb22aeb14
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.infinity.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.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..13f0459e9f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.pattern.transform.invalid.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.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..308e6b54b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.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.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..0232140eaf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colorObject.transparency.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.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.colormix.html b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colormix.html
new file mode 100644
index 0000000000..c1971666e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.colormix.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.strokeStyle.colormix</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.colormix</h1>
+<p class="desc">color-mix 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>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("color-mix works as color input");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = "color-mix(in srgb, red, blue)";
+  _assertSame(ctx.strokeStyle, 'color(srgb 0.5 0 0.5)', "ctx.strokeStyle", "'color(srgb 0.5 0 0.5)'");
+  ctx.strokeStyle = "color-mix(in srgb, red, color(srgb 1 0 0))";
+  _assertSame(ctx.strokeStyle, 'color(srgb 1 0 0)', "ctx.strokeStyle", "'color(srgb 1 0 0)'");
+
+});
+</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..a432d74a42
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.default.html
@@ -0,0 +1,26 @@
+<!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>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.html
new file mode 100644
index 0000000000..42fb1ee8f8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.tentative.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.filter.canvasFilterObject.blur.exceptions.tentative</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.filter.canvasFilterObject.blur.exceptions.tentative</h1>
+<p class="desc">Test exceptions on CanvasFilter() blur.object</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("Test exceptions on CanvasFilter() blur.object");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({name: 'gaussianBlur'}); });
+  assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: undefined}); });
+  assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: 'foo'}); });
+  assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: [1,2,3]}); });
+  assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: NaN}); });
+  assert_throws_js(TypeError, function() { ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: {}}); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
new file mode 100644
index 0000000000..b2f6a6ac97
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.colorMatrix.tentative.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.colorMatrix.tentative</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.filter.canvasFilterObject.colorMatrix.tentative</h1>
+<p class="desc">Test the functionality of ColorMatrix filters in CanvasFilter 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>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Test the functionality of ColorMatrix filters in CanvasFilter objects");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'colorMatrix', values: undefined}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'colorMatrix', values: 'foo'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'colorMatrix', values: null}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'colorMatrix', values: [1, 2, 3]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 'a']}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'colorMatrix', values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, Infinity]}); });
+  ctx.fillStyle = '#f00';
+  ctx.filter = new CanvasFilter({name: 'colorMatrix', type: 'hueRotate', values: 0});
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 10,10, 255,0,0,255, 2);
+  ctx.filter = new CanvasFilter({name: 'colorMatrix', type: 'hueRotate', values: 90});
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 10,10, 0,91,0,255, 2);
+  ctx.filter = new CanvasFilter({name: 'colorMatrix', type: 'hueRotate', values: 180});
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 10,10, 0,109,109,255, 2);
+  ctx.filter = new CanvasFilter({name: 'colorMatrix', type: 'hueRotate', values: 270});
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 10,10, 109,18,255,255, 2);
+  ctx.filter = new CanvasFilter({name: 'colorMatrix', type: 'saturate', values: 0.5});
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 10,10, 155,27,27,255, 2);
+  ctx.clearRect(0, 0, 100, 50);
+  ctx.filter = new CanvasFilter({name: 'colorMatrix', type: 'luminanceToAlpha'});
+  ctx.fillRect(0, 0, 100, 50);
+  _assertPixelApprox(canvas, 10,10, 0,0,0,54, 2);
+  ctx.filter = new CanvasFilter({name: 'colorMatrix', values: [
+          0, 0, 0, 0, 0,
+          1, 1, 1, 1, 0,
+          0, 0, 0, 0, 0,
+          0, 0, 0, 1, 0
+  ]});
+  ctx.fillRect(0, 0, 50, 25);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(50, 0, 50, 25);
+  ctx.fillStyle = '#00f';
+  ctx.fillRect(0, 25, 50, 25);
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(50, 25, 50, 25);
+  _assertPixelApprox(canvas, 10,10, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 60,10, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 10,30, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 60,30, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
new file mode 100644
index 0000000000..b392b189f2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.discrete.tentative.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.componentTransfer.discrete.tentative</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.filter.canvasFilterObject.componentTransfer.discrete.tentative</h1>
+<p class="desc">Test pixels on CanvasFilter() componentTransfer with discrete type</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("Test pixels on CanvasFilter() componentTransfer with discrete type");
+_addTest(function(canvas, ctx) {
+
+  // From https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement
+  function getTransformedValue(C, V) {
+      // Get the right interval
+      const n = V.length;
+      const k = C == 1 ? n - 1 : Math.floor(C * n);
+      return V[k];
+  }
+
+  function getColor(inputColor, tableValues) {
+      const result = [0, 0, 0];
+      for (const i in inputColor) {
+          const C = inputColor[i]/255;
+          const Cprime = getTransformedValue(C, tableValues[i]);
+          result[i] = Math.max(0, Math.min(1, Cprime)) * 255;
+      }
+      return result;
+  }
+
+  tableValuesR = [0, 0, 1, 1];
+  tableValuesG = [2, 0, 0.5, 3];
+  tableValuesB = [1, -1, 5, 0];
+  ctx.filter = new CanvasFilter({name: 'componentTransfer',
+      funcR: {type: 'discrete', tableValues: tableValuesR},
+      funcG: {type: 'discrete', tableValues: tableValuesG},
+      funcB: {type: 'discrete', tableValues: tableValuesB},
+  });
+
+  const inputColors = [
+      [255, 255, 255],
+      [0, 0, 0],
+      [127, 0, 34],
+      [252, 186, 3],
+      [50, 68, 87],
+  ];
+
+  for (const color of inputColors) {
+      let outputColor = getColor(color, [tableValuesR, tableValuesG, tableValuesB]);
+      ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+      ctx.fillRect(0, 0, 10, 10);
+      _assertPixelApprox(canvas, 5, 5, outputColor[0],outputColor[1],outputColor[2],255, 2);
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
new file mode 100644
index 0000000000..e5bff7e44d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.gamma.tentative.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.componentTransfer.gamma.tentative</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.filter.canvasFilterObject.componentTransfer.gamma.tentative</h1>
+<p class="desc">Test pixels on CanvasFilter() componentTransfer with gamma type</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("Test pixels on CanvasFilter() componentTransfer with gamma type");
+_addTest(function(canvas, ctx) {
+
+  // From https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement
+  function getColor(inputColor, amplitude, exponent, offset) {
+      return [
+          Math.max(0, Math.min(1, Math.pow(inputColor[0]/255, exponent[0]) * amplitude[0] + offset[0])) * 255,
+          Math.max(0, Math.min(1, Math.pow(inputColor[1]/255, exponent[1]) * amplitude[1] + offset[1])) * 255,
+          Math.max(0, Math.min(1, Math.pow(inputColor[2]/255, exponent[2]) * amplitude[2] + offset[2])) * 255,
+      ];
+  }
+
+  const amplitudes = [2, 1.1, 0.5];
+  const exponents = [5, 3, 1];
+  const offsets = [0.25, 0, 0.5];
+  ctx.filter = new CanvasFilter({name: 'componentTransfer',
+      funcR: {type: 'gamma', amplitude: amplitudes[0], exponent: exponents[0], offset: offsets[0]},
+      funcG: {type: 'gamma', amplitude: amplitudes[1], exponent: exponents[1], offset: offsets[1]},
+      funcB: {type: 'gamma', amplitude: amplitudes[2], exponent: exponents[2], offset: offsets[2]},
+  });
+
+  const inputColors = [
+      [255, 255, 255],
+      [0, 0, 0],
+      [127, 0, 34],
+      [252, 186, 3],
+      [50, 68, 87],
+  ];
+
+  for (const color of inputColors) {
+      let outputColor = getColor(color, amplitudes, exponents, offsets);
+      ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+      ctx.fillRect(0, 0, 10, 10);
+      _assertPixelApprox(canvas, 5, 5, outputColor[0],outputColor[1],outputColor[2],255, 2);
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.html
new file mode 100644
index 0000000000..ecd3830be3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.identity.tentative.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.filter.canvasFilterObject.componentTransfer.identity.tentative</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.filter.canvasFilterObject.componentTransfer.identity.tentative</h1>
+<p class="desc">Test pixels on CanvasFilter() componentTransfer with identity type</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("Test pixels on CanvasFilter() componentTransfer with identity type");
+_addTest(function(canvas, ctx) {
+
+  ctx.filter = new CanvasFilter({name: 'componentTransfer',
+      funcR: {type: 'identity'},
+      funcG: {type: 'identity'},
+      funcB: {type: 'identity'},
+  });
+
+  const inputColors = [
+      [255, 255, 255],
+      [0, 0, 0],
+      [127, 0, 34],
+      [252, 186, 3],
+      [50, 68, 87],
+  ];
+
+  for (const color of inputColors) {
+      ctx.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, 1)`,
+      ctx.fillRect(0, 0, 10, 10);
+      _assertPixel(canvas, 5, 5, color[0],color[1],color[2],255);
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
new file mode 100644
index 0000000000..8708887f6a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.linear.tentative.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.componentTransfer.linear.tentative</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.filter.canvasFilterObject.componentTransfer.linear.tentative</h1>
+<p class="desc">Test pixels on CanvasFilter() componentTransfer with linear type</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("Test pixels on CanvasFilter() componentTransfer with linear type");
+_addTest(function(canvas, ctx) {
+
+  // From https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement
+  function getColor(inputColor, slopes, intercepts) {
+      return [
+          Math.max(0, Math.min(1, inputColor[0]/255 * slopes[0] + intercepts[0])) * 255,
+          Math.max(0, Math.min(1, inputColor[1]/255 * slopes[1] + intercepts[1])) * 255,
+          Math.max(0, Math.min(1, inputColor[2]/255 * slopes[2] + intercepts[2])) * 255,
+      ];
+  }
+
+  const slopes = [0.5, 1.2, -0.2];
+  const intercepts = [0.25, 0, 0.5];
+  ctx.filter = new CanvasFilter({name: 'componentTransfer',
+      funcR: {type: 'linear', slope: slopes[0], intercept: intercepts[0]},
+      funcG: {type: 'linear', slope: slopes[1], intercept: intercepts[1]},
+      funcB: {type: 'linear', slope: slopes[2], intercept: intercepts[2]},
+  });
+
+  const inputColors = [
+      [255, 255, 255],
+      [0, 0, 0],
+      [127, 0, 34],
+      [252, 186, 3],
+      [50, 68, 87],
+  ];
+
+  for (const color of inputColors) {
+      let outputColor = getColor(color, slopes, intercepts);
+      ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+      ctx.fillRect(0, 0, 10, 10);
+      _assertPixelApprox(canvas, 5, 5, outputColor[0],outputColor[1],outputColor[2],255, 2);
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
new file mode 100644
index 0000000000..4b296d9fd7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.componentTransfer.table.tentative.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.componentTransfer.table.tentative</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.filter.canvasFilterObject.componentTransfer.table.tentative</h1>
+<p class="desc">Test pixels on CanvasFilter() componentTransfer with table type</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("Test pixels on CanvasFilter() componentTransfer with table type");
+_addTest(function(canvas, ctx) {
+
+  // From https://www.w3.org/TR/SVG11/filters.html#feComponentTransferElement
+  function getTransformedValue(C, V) {
+      // Get the right interval
+      const n = V.length - 1;
+      const k = C == 1 ? n - 1 : Math.floor(C * n);
+      return V[k] + (C - k/n) * n * (V[k + 1] - V[k]);
+  }
+
+  function getColor(inputColor, tableValues) {
+      const result = [0, 0, 0];
+      for (const i in inputColor) {
+          const C = inputColor[i]/255;
+          const Cprime = getTransformedValue(C, tableValues[i]);
+          result[i] = Math.max(0, Math.min(1, Cprime)) * 255;
+      }
+      return result;
+  }
+
+  tableValuesR = [0, 0, 1, 1];
+  tableValuesG = [2, 0, 0.5, 3];
+  tableValuesB = [1, -1, 5, 0];
+  ctx.filter = new CanvasFilter({name: 'componentTransfer',
+      funcR: {type: 'table', tableValues: tableValuesR},
+      funcG: {type: 'table', tableValues: tableValuesG},
+      funcB: {type: 'table', tableValues: tableValuesB},
+  });
+
+  const inputColors = [
+      [255, 255, 255],
+      [0, 0, 0],
+      [127, 0, 34],
+      [252, 186, 3],
+      [50, 68, 87],
+  ];
+
+  for (const color of inputColors) {
+      let outputColor = getColor(color, [tableValuesR, tableValuesG, tableValuesB]);
+      ctx.fillStyle = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+      ctx.fillRect(0, 0, 10, 10);
+      _assertPixelApprox(canvas, 5, 5, outputColor[0],outputColor[1],outputColor[2],255, 2);
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.html
new file mode 100644
index 0000000000..b80600c141
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.convolveMatrix.exceptions.tentative.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.filter.canvasFilterObject.convolveMatrix.exceptions.tentative</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.filter.canvasFilterObject.convolveMatrix.exceptions.tentative</h1>
+<p class="desc">Test exceptions on CanvasFilter() convolveMatrix</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("Test exceptions on CanvasFilter() convolveMatrix");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', divisor: 2}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: null}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: 1}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[1, 0], [0]]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[1, 'a'], [0]]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[1, 0], 0]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[1, 0], [0, Infinity]]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: []}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [1]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [1, 2, 3, 4]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[], []]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[1, 2], []]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[], [1, 2]]}); });
+  // This should not throw an error
+  ctx.filter = new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[]]});
+  ctx.filter = new CanvasFilter({name: 'convolveMatrix', kernelMatrix: [[1]]});
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.exceptions.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.exceptions.tentative.html
new file mode 100644
index 0000000000..8c07a72b2b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.exceptions.tentative.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.dropShadow.exceptions.tentative</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.filter.canvasFilterObject.dropShadow.exceptions.tentative</h1>
+<p class="desc">Test exceptions on CanvasFilter() dropShadow object</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("Test exceptions on CanvasFilter() dropShadow object");
+_addTest(function(canvas, ctx) {
+
+  // dx
+  _assert(new CanvasFilter({name: 'dropShadow', dx: 10}), "new CanvasFilter({name: 'dropShadow', dx: 10})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: -1}), "new CanvasFilter({name: 'dropShadow', dx: -1})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: 0.5}), "new CanvasFilter({name: 'dropShadow', dx: 0.5})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: null}), "new CanvasFilter({name: 'dropShadow', dx: null})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: true}), "new CanvasFilter({name: 'dropShadow', dx: true})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: false}), "new CanvasFilter({name: 'dropShadow', dx: false})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: []}), "new CanvasFilter({name: 'dropShadow', dx: []})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: [20]}), "new CanvasFilter({name: 'dropShadow', dx: [\""+(20)+"\"]})");
+  _assert(new CanvasFilter({name: 'dropShadow', dx: '30'}), "new CanvasFilter({name: 'dropShadow', dx: '30'})");
+  // dy
+  _assert(new CanvasFilter({name: 'dropShadow', dy: 10}), "new CanvasFilter({name: 'dropShadow', dy: 10})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: -1}), "new CanvasFilter({name: 'dropShadow', dy: -1})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: 0.5}), "new CanvasFilter({name: 'dropShadow', dy: 0.5})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: null}), "new CanvasFilter({name: 'dropShadow', dy: null})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: true}), "new CanvasFilter({name: 'dropShadow', dy: true})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: false}), "new CanvasFilter({name: 'dropShadow', dy: false})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: []}), "new CanvasFilter({name: 'dropShadow', dy: []})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: [20]}), "new CanvasFilter({name: 'dropShadow', dy: [\""+(20)+"\"]})");
+  _assert(new CanvasFilter({name: 'dropShadow', dy: '30'}), "new CanvasFilter({name: 'dropShadow', dy: '30'})");
+  // floodOpacity
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: 10}), "new CanvasFilter({name: 'dropShadow', floodOpacity: 10})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: -1}), "new CanvasFilter({name: 'dropShadow', floodOpacity: -1})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: 0.5}), "new CanvasFilter({name: 'dropShadow', floodOpacity: 0.5})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: null}), "new CanvasFilter({name: 'dropShadow', floodOpacity: null})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: true}), "new CanvasFilter({name: 'dropShadow', floodOpacity: true})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: false}), "new CanvasFilter({name: 'dropShadow', floodOpacity: false})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: []}), "new CanvasFilter({name: 'dropShadow', floodOpacity: []})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: [20]}), "new CanvasFilter({name: 'dropShadow', floodOpacity: [\""+(20)+"\"]})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodOpacity: '30'}), "new CanvasFilter({name: 'dropShadow', floodOpacity: '30'})");
+  // stdDeviation
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: 10}), "new CanvasFilter({name: 'dropShadow', stdDeviation: 10})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: -1}), "new CanvasFilter({name: 'dropShadow', stdDeviation: -1})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: 0.5}), "new CanvasFilter({name: 'dropShadow', stdDeviation: 0.5})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: null}), "new CanvasFilter({name: 'dropShadow', stdDeviation: null})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: true}), "new CanvasFilter({name: 'dropShadow', stdDeviation: true})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: false}), "new CanvasFilter({name: 'dropShadow', stdDeviation: false})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: []}), "new CanvasFilter({name: 'dropShadow', stdDeviation: []})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: [20]}), "new CanvasFilter({name: 'dropShadow', stdDeviation: [\""+(20)+"\"]})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: '30'}), "new CanvasFilter({name: 'dropShadow', stdDeviation: '30'})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: [10, -1]}), "new CanvasFilter({name: 'dropShadow', stdDeviation: [10, -1]})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: [0.5, null]}), "new CanvasFilter({name: 'dropShadow', stdDeviation: [0.5, null]})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: [true, false]}), "new CanvasFilter({name: 'dropShadow', stdDeviation: [true, false]})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: [[], [20]]}), "new CanvasFilter({name: 'dropShadow', stdDeviation: [[], [\""+(20)+"\"]]})");
+  _assert(new CanvasFilter({name: 'dropShadow', stdDeviation: ['30', ['40']]}), "new CanvasFilter({name: 'dropShadow', stdDeviation: ['30', ['40']]})");
+  // floodColor
+  _assert(new CanvasFilter({name: 'dropShadow', floodColor: 'red'}), "new CanvasFilter({name: 'dropShadow', floodColor: 'red'})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodColor: 'canvas'}), "new CanvasFilter({name: 'dropShadow', floodColor: 'canvas'})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodColor: 'rgba(4, -3, 0.5, 1)'}), "new CanvasFilter({name: 'dropShadow', floodColor: 'rgba(4, -3, 0.5, 1)'})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodColor: '#aabbccdd'}), "new CanvasFilter({name: 'dropShadow', floodColor: '#aabbccdd'})");
+  _assert(new CanvasFilter({name: 'dropShadow', floodColor: '#abcd'}), "new CanvasFilter({name: 'dropShadow', floodColor: '#abcd'})");
+
+  // dx
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dx: NaN}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dx: Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dx: -Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dx: undefined}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dx: 'test'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dx: {}}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dx: [1, 2]}); });
+  // dy
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dy: NaN}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dy: Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dy: -Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dy: undefined}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dy: 'test'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dy: {}}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', dy: [1, 2]}); });
+  // floodOpacity
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodOpacity: NaN}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodOpacity: Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodOpacity: -Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodOpacity: undefined}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodOpacity: 'test'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodOpacity: {}}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodOpacity: [1, 2]}); });
+  // stdDeviation
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: NaN}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: -Infinity}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: undefined}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: 'test'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: {}}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, 2, 3]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, NaN]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, Infinity]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, -Infinity]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, undefined]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, 'test']}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, {}]}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', stdDeviation: [1, [2, 3]]}); });
+  // floodColor
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodColor: 'test'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodColor: 'rgba(NaN, 3, 2, 1)'}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodColor: 10}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodColor: undefined}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodColor: null}); });
+  assert_throws_js(TypeError, function() { new CanvasFilter({name: 'dropShadow', floodColor: NaN}); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
new file mode 100644
index 0000000000..86c5710132
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative-expected.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.dropShadow.tentative</title>
+<h1>2d.filter.canvasFilterObject.dropShadow.tentative</h1>
+<p class="desc">Test CanvasFilter() dropShadow object.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width=520 height=420
+     color-interpolation-filters="sRGB">
+  <rect x=0 y=0 width=100% height=50 fill="teal" />
+  <rect x=0 y=100 width=100% height=50 fill="teal" />
+  <rect x=0 y=200 width=100% height=50 fill="teal" />
+  <rect x=0 y=300 width=100% height=50 fill="teal" />
+
+  <rect x=10 y=10 width=80 height=80 fill="crimson"
+        filter="drop-shadow(2px 2px 2px black)"/>
+  <rect x=110 y=10 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 5px rgba(128, 0, 128, 0.7))"/>
+
+  <rect x=10 y=110 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 3px purple)"/>
+  <rect x=110 y=110 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 3px LinkText)"/>
+  <rect x=210 y=110 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 3px rgba(20, 50, 130, 1))"/>
+  <rect x=310 y=110 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 3px rgba(20, 50, 130, 0.7))"/>
+  <rect x=410 y=110 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 3px rgba(20, 50, 130, 0.49))"/>
+
+  <rect x=10 y=210 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 0px purple)"/>
+  <rect x=110 y=210 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 5px purple)"/>
+  <rect x=210 y=210 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 0px purple)"/>
+  <filter id="separable-filter"
+          x="-100%" y="-100%" width="300%" height="300%">
+    <feDropShadow dx=9 dy=12 stdDeviation="3 5" flood-color="purple"/>
+  </filter>
+  <rect x=310 y=210 width=80 height=80 fill="crimson"
+        filter="url(#separable-filter)"/>
+  <rect x=410 y=210 width=80 height=80 fill="crimson"
+        filter="drop-shadow(9px 12px 0px purple)"/>
+
+  <rect x=10 y=310 width=80 height=80 fill="crimson"
+        filter="drop-shadow(-5px 0px 0px purple)"/>
+  <filter id="separable-filter-degenerate"
+          x="-100%" y="-100%" width="300%" height="300%">
+    <feDropShadow dx=0 dy=5 stdDeviation="0 3"
+        flood-color="rgba(128, 0, 128, 0.8)"/>
+  </filter>
+  <rect x=110 y=310 width=80 height=80 fill="crimson"
+        filter="url(#separable-filter-degenerate)"/>
+  <rect x=210 y=310 width=80 height=80 fill="crimson"
+        filter="drop-shadow(1px 10px 0px rgba(128, 0, 128, 0.4))"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
new file mode 100644
index 0000000000..47bb891b3f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.dropShadow.tentative.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.dropShadow.tentative-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.dropShadow.tentative</title>
+<h1>2d.filter.canvasFilterObject.dropShadow.tentative</h1>
+<p class="desc">Test CanvasFilter() dropShadow object.</p>
+<canvas id="canvas" width="520" height="420">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(0, 0, 520, 50);
+  ctx.fillRect(0, 100, 520, 50);
+  ctx.fillRect(0, 200, 520, 50);
+  ctx.fillRect(0, 300, 520, 50);
+
+  ctx.fillStyle = 'crimson';
+
+  // Parameter defaults.
+  ctx.filter = new CanvasFilter({name: 'dropShadow'});
+  ctx.fillRect(10, 10, 80, 80);
+
+  // All parameters specified.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 5,
+     floodColor: 'purple', floodOpacity: 0.7});
+  ctx.fillRect(110, 10, 80, 80);
+
+  // Named color.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+     floodColor: 'purple'});
+  ctx.fillRect(10, 110, 80, 80);
+
+  // System color.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+     floodColor: 'LinkText'});
+  ctx.fillRect(110, 110, 80, 80);
+
+  // Numerical color.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 1)'});
+  ctx.fillRect(210, 110, 80, 80);
+
+  // Transparent floodColor.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 0.7)'});
+  ctx.fillRect(310, 110, 80, 80);
+
+  // Transparent floodColor and floodOpacity.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 3,
+     floodColor: 'rgba(20, 50, 130, 0.7)', floodOpacity: 0.7});
+  ctx.fillRect(410, 110, 80, 80);
+
+  // No blur.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 0,
+     floodColor: 'purple'});
+  ctx.fillRect(10, 210, 80, 80);
+
+  // Single float blur.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: 5,
+     floodColor: 'purple'});
+  ctx.fillRect(110, 210, 80, 80);
+
+  // Single negative float blur.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: -5,
+     floodColor: 'purple'});
+  ctx.fillRect(210, 210, 80, 80);
+
+  // Two floats (X&Y) blur.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: [3, 5],
+     floodColor: 'purple'});
+  ctx.fillRect(310, 210, 80, 80);
+
+  // Two negative floats (X&Y) blur.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: 9, dy: 12, stdDeviation: [-3, -5],
+     floodColor: 'purple'});
+  ctx.fillRect(410, 210, 80, 80);
+
+  // Degenerate parameter values.
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: [-5], dy: [], stdDeviation: null,
+     floodColor: 'purple', floodOpacity: [2]});
+  ctx.fillRect(10, 310, 80, 80);
+
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: null, dy: '5', stdDeviation: [[-5], ['3']],
+     floodColor: 'purple', floodOpacity: '0.8'});
+  ctx.fillRect(110, 310, 80, 80);
+
+  ctx.filter = new CanvasFilter(
+    {name: 'dropShadow', dx: true, dy: ['10'], stdDeviation: false,
+     floodColor: 'purple', floodOpacity: ['0.4']});
+  ctx.fillRect(210, 310, 80, 80);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic-expected.html
new file mode 100644
index 0000000000..f9571f208e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100" height="100"
+     color-interpolation-filters="sRGB">
+  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+    <feGaussianBlur stdDeviation="4 4" />
+  </filter>
+  <rect x="25" y="25" width="50" height="50"
+        fill="teal" filter="url(#blur)" />
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic.html
new file mode 100644
index 0000000000..6376d07b0e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.isotropic</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'teal';
+  ctx.filter = new CanvasFilter({
+      name: 'gaussianBlur',
+      stdDeviation: [4, 4],
+  });
+  ctx.fillRect(25, 25, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x-expected.html
new file mode 100644
index 0000000000..e76613271f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100" height="100"
+     color-interpolation-filters="sRGB">
+  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+    <feGaussianBlur stdDeviation="4 1" />
+  </filter>
+  <rect x="25" y="25" width="50" height="50"
+        fill="teal" filter="url(#blur)" />
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x.html
new file mode 100644
index 0000000000..145cb32757
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-x</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'teal';
+  ctx.filter = new CanvasFilter({
+      name: 'gaussianBlur',
+      stdDeviation: [4, 1],
+  });
+  ctx.fillRect(25, 25, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y-expected.html
new file mode 100644
index 0000000000..0f214fca9f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100" height="100"
+     color-interpolation-filters="sRGB">
+  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+    <feGaussianBlur stdDeviation="1 4" />
+  </filter>
+  <rect x="25" y="25" width="50" height="50"
+        fill="teal" filter="url(#blur)" />
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y.html
new file mode 100644
index 0000000000..e921e0eaa6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.mostly-y</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'teal';
+  ctx.filter = new CanvasFilter({
+      name: 'gaussianBlur',
+      stdDeviation: [1, 4],
+  });
+  ctx.fillRect(25, 25, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only-expected.html
new file mode 100644
index 0000000000..285a641726
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100" height="100"
+     color-interpolation-filters="sRGB">
+  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+    <feGaussianBlur stdDeviation="4 0" />
+  </filter>
+  <rect x="25" y="25" width="50" height="50"
+        fill="teal" filter="url(#blur)" />
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only.html
new file mode 100644
index 0000000000..fd6ac687f9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.x-only</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'teal';
+  ctx.filter = new CanvasFilter({
+      name: 'gaussianBlur',
+      stdDeviation: [4, 0],
+  });
+  ctx.fillRect(25, 25, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only-expected.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only-expected.html
new file mode 100644
index 0000000000..d59945b5da
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100" height="100"
+     color-interpolation-filters="sRGB">
+  <filter id="blur" x="-50%" y="-50%" width="200%" height="200%">
+    <feGaussianBlur stdDeviation="0 4" />
+  </filter>
+  <rect x="25" y="25" width="50" height="50"
+        fill="teal" filter="url(#blur)" />
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only.html
new file mode 100644
index 0000000000..6442433e7c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only-expected.html">
+<title>Canvas test: 2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only</title>
+<h1>2d.filter.canvasFilterObject.gaussianBlur.tentative.y-only</h1>
+<p class="desc">Test CanvasFilter() with gaussianBlur.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'teal';
+  ctx.filter = new CanvasFilter({
+      name: 'gaussianBlur',
+      stdDeviation: [0, 4],
+  });
+  ctx.fillRect(25, 25, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.html
new file mode 100644
index 0000000000..c40e718d72
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.tentative.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.filter.canvasFilterObject.tentative</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.filter.canvasFilterObject.tentative</h1>
+<p class="desc">Test CanvasFilter() object</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("Test CanvasFilter() object");
+_addTest(function(canvas, ctx) {
+
+  _assert(ctx.filter == 'none', "ctx.filter == 'none'");
+  ctx.filter = 'blur(5px)';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: 5});
+  _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
+  ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: [1, 2]});
+  _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
+  ctx.filter = new CanvasFilter([
+      {name: 'gaussianBlur', stdDeviation: 5},
+      {name: 'gaussianBlur', stdDeviation: 10}
+  ]);
+  _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
+  var canvas2 = document.createElement('canvas');
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.filter = ctx.filter;
+  _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
+  ctx.filter = 'blur(5px)';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.filter = 'none';
+  _assert(ctx.filter == 'none', "ctx.filter == 'none'");
+  ctx.filter = new CanvasFilter({name: 'gaussianBlur', stdDeviation: 5});
+  ctx.filter = 'this string is not a filter and should do nothing';
+  _assert(ctx.filter.toString() == '[object CanvasFilter]', "ctx.filter.toString() == '[object CanvasFilter]'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
new file mode 100644
index 0000000000..c24cfd2398
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.canvasFilterObject.turbulence.inputTypes.tentative.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.canvasFilterObject.turbulence.inputTypes.tentative</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.filter.canvasFilterObject.turbulence.inputTypes.tentative</h1>
+<p class="desc">Test exceptions on CanvasFilter() turbulence object</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("Test exceptions on CanvasFilter() turbulence object");
+_addTest(function(canvas, ctx) {
+
+  const errorTestCases = [
+    {baseFrequency: {}},
+    {baseFrequency: -1},
+    {baseFrequency: [0, -1]},
+    {baseFrequency: NaN},
+    {baseFrequency: Infinity},
+    {baseFrequency: undefined},
+    {baseFrequency: -Infinity},
+    {baseFrequency: 'test'},
+
+    {numOctaves: {}},
+    {numOctaves: -1},
+    {numOctaves: NaN},
+    {numOctaves: Infinity},
+    {numOctaves: undefined},
+    {numOctaves: -Infinity},
+    {numOctaves: [1, 1]},
+    {numOctaves: 'test'},
+
+    {seed: {}},
+    {seed: NaN},
+    {seed: Infinity},
+    {seed: undefined},
+    {seed: -Infinity},
+    {seed: [1, 1]},
+    {seed: 'test'},
+
+    {stitchTiles: {}},
+    {stitchTiles: NaN},
+    {stitchTiles: Infinity},
+    {stitchTiles: undefined},
+    {stitchTiles: -Infinity},
+    {stitchTiles: [1, 1]},
+    {stitchTiles: 'test'},
+    {stitchTiles: null},
+    {stitchTiles: []},
+    {stitchTiles: [10]},
+    {stitchTiles: 30},
+    {stitchTiles: false},
+    {stitchTiles: true},
+    {stitchTiles: '10'},
+    {stitchTiles: -1},
+
+    {type: {}},
+    {type: NaN},
+    {type: Infinity},
+    {type: undefined},
+    {type: -Infinity},
+    {type: [1, 1]},
+    {type: 'test'},
+    {type: null},
+    {type: []},
+    {type: [10]},
+    {type: 30},
+    {type: false},
+    {type: true},
+    {type: '10'},
+    {type: -1},
+  ]
+
+  // null and [] = 0 when parsed as number
+  const workingTestCases = [
+    {baseFrequency: null},
+    {baseFrequency: []},
+    {baseFrequency: [10]},
+    {baseFrequency: [10, 3]},
+    {baseFrequency: 30},
+    {baseFrequency: false},
+    {baseFrequency: true},
+    {baseFrequency: '10'},
+
+    {numOctaves: null},
+    {numOctaves: []},
+    {numOctaves: [10]},
+    {numOctaves: 30},
+    {numOctaves: false},
+    {numOctaves: true},
+    {numOctaves: '10'},
+
+    {seed: null},
+    {seed: []},
+    {seed: [10]},
+    {seed: 30},
+    {seed: false},
+    {seed: true},
+    {seed: '10'},
+    {seed: -1},
+
+    {stitchTiles: 'stitch'},
+    {stitchTiles: 'noStitch'},
+
+    {type: 'fractalNoise'},
+    {type: 'turbulence'},
+  ]
+
+  for (testCase of errorTestCases) {
+    const filterOptions = {...{name: 'turbulence'}, ...testCase};
+    assert_throws_js(TypeError, function() { new CanvasFilter(filterOptions); });
+  }
+
+  for (testCase of workingTestCases) {
+    const filterOptions = {...{name: 'turbulence'}, ...testCase};
+    _assert(new CanvasFilter(filterOptions) != null, "new CanvasFilter(filterOptions) != null");
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/filters/2d.filter.value.html b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.value.html
new file mode 100644
index 0000000000..5716b9bd16
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/filters/2d.filter.value.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.filter.value</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.filter.value</h1>
+<p class="desc">test if ctx.filter works correctly</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("test if ctx.filter works correctly");
+_addTest(function(canvas, ctx) {
+
+  _assert(ctx.filter == 'none', "ctx.filter == 'none'");
+  ctx.filter = 'blur(5px)';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.save();
+  ctx.filter = 'none';
+  _assert(ctx.filter == 'none', "ctx.filter == 'none'");
+  ctx.restore();
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+  ctx.filter = 'blur(10)';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.filter = 'blur 10px';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+  ctx.filter = 'inherit';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.filter = 'initial';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.filter = 'unset';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+  ctx.filter = '';
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.filter = null;
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+  ctx.filter = undefined;
+  _assert(ctx.filter == 'blur(5px)', "ctx.filter == 'blur(5px)'");
+
+  ctx.filter = 'blur(  5px)';
+  assert_equals(ctx.filter, 'blur(  5px)');
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic-expected.html
new file mode 100644
index 0000000000..6a6f0f6892
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.anisotropic-blur.isotropic</title>
+<h1>2d.layer.anisotropic-blur.isotropic</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feGaussianBlur stdDeviation="4 4" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.html
new file mode 100644
index 0000000000..4e496b7e48
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.isotropic.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.anisotropic-blur.isotropic-expected.html">
+<title>Canvas test: 2d.layer.anisotropic-blur.isotropic</title>
+<h1>2d.layer.anisotropic-blur.isotropic</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: { name: 'gaussianBlur', stdDeviation: [4, 4] }});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x-expected.html
new file mode 100644
index 0000000000..b0473f2ff0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.anisotropic-blur.mostly-x</title>
+<h1>2d.layer.anisotropic-blur.mostly-x</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feGaussianBlur stdDeviation="4 1" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.html
new file mode 100644
index 0000000000..4217d9fad3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-x.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.anisotropic-blur.mostly-x-expected.html">
+<title>Canvas test: 2d.layer.anisotropic-blur.mostly-x</title>
+<h1>2d.layer.anisotropic-blur.mostly-x</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: { name: 'gaussianBlur', stdDeviation: [4, 1] }});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y-expected.html
new file mode 100644
index 0000000000..43da016eea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.anisotropic-blur.mostly-y</title>
+<h1>2d.layer.anisotropic-blur.mostly-y</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feGaussianBlur stdDeviation="1 4" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.html
new file mode 100644
index 0000000000..97a44e9045
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.mostly-y.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.anisotropic-blur.mostly-y-expected.html">
+<title>Canvas test: 2d.layer.anisotropic-blur.mostly-y</title>
+<h1>2d.layer.anisotropic-blur.mostly-y</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: { name: 'gaussianBlur', stdDeviation: [1, 4] }});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only-expected.html
new file mode 100644
index 0000000000..0b4d269189
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.anisotropic-blur.x-only</title>
+<h1>2d.layer.anisotropic-blur.x-only</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feGaussianBlur stdDeviation="4 0" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.html
new file mode 100644
index 0000000000..fdf604616b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.x-only.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.anisotropic-blur.x-only-expected.html">
+<title>Canvas test: 2d.layer.anisotropic-blur.x-only</title>
+<h1>2d.layer.anisotropic-blur.x-only</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: { name: 'gaussianBlur', stdDeviation: [4, 0] }});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only-expected.html
new file mode 100644
index 0000000000..2572386412
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.anisotropic-blur.y-only</title>
+<h1>2d.layer.anisotropic-blur.y-only</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feGaussianBlur stdDeviation="0 4" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.html
new file mode 100644
index 0000000000..c7ceb63a87
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.anisotropic-blur.y-only.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.anisotropic-blur.y-only-expected.html">
+<title>Canvas test: 2d.layer.anisotropic-blur.y-only</title>
+<h1>2d.layer.anisotropic-blur.y-only</h1>
+<p class="desc">Checks that layers allow gaussian blur with separate X and Y components.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: { name: 'gaussianBlur', stdDeviation: [0, 4] }});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html
new file mode 100644
index 0000000000..658d7e0991
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.beginLayer-options.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.beginLayer-options</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.layer.beginLayer-options</h1>
+<p class="desc">Checks beginLayer works for different option parameter values</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("Checks beginLayer works for different option parameter values");
+_addTest(function(canvas, ctx) {
+
+  ctx.beginLayer(); ctx.endLayer();
+  ctx.beginLayer(null); ctx.endLayer();
+  ctx.beginLayer(undefined); ctx.endLayer();
+  ctx.beginLayer([]); ctx.endLayer();
+  ctx.beginLayer({}); ctx.endLayer();
+
+  assert_throws_js(TypeError, function() { ctx.beginLayer(''); });
+  assert_throws_js(TypeError, function() { ctx.beginLayer(0); });
+  assert_throws_js(TypeError, function() { ctx.beginLayer(1); });
+  assert_throws_js(TypeError, function() { ctx.beginLayer(true); });
+  assert_throws_js(TypeError, function() { ctx.beginLayer(false); });
+
+  ctx.beginLayer({filter: null}); ctx.endLayer();
+  ctx.beginLayer({filter: undefined}); ctx.endLayer();
+  ctx.beginLayer({filter: []}); ctx.endLayer();
+  ctx.beginLayer({filter: {}}); ctx.endLayer();
+  ctx.beginLayer({filter: {name: "unknown"}}); ctx.endLayer();
+  ctx.beginLayer({filter: ''}); ctx.endLayer();
+
+  // These cases don't throw TypeError since they can be casted to a
+  // DOMString.
+  ctx.beginLayer({filter: 0}); ctx.endLayer();
+  ctx.beginLayer({filter: 1}); ctx.endLayer();
+  ctx.beginLayer({filter: true}); ctx.endLayer();
+  ctx.beginLayer({filter: false}); ctx.endLayer();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping-expected.html
new file mode 100644
index 0000000000..6cad180f14
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping-expected.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.layer.blur-from-outside-canvas.no-clipping</title>
+<h1>2d.layer.blur-from-outside-canvas.no-clipping</h1>
+<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+  <svg xmlns="http://www.w3.org/2000/svg"
+        width="200" height="200"
+        color-interpolation-filters="sRGB">
+    <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
+    </filter>
+    <g filter="url(#filter)">
+      <rect x="201" y="50" width="100" height="100" fill="turquoise"/>
+      <rect x="50" y="201" width="100" height="100" fill="indigo"/>
+      <rect x="-101" y="50" width="100" height="100" fill="orange"/>
+      <rect x="50" y="-101" width="100" height="100" fill="brown"/>
+    </g>
+  </svg>`;
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+      // No clipping.
+
+      ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.html
new file mode 100644
index 0000000000..b689ad39fe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.no-clipping.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.blur-from-outside-canvas.no-clipping-expected.html">
+<title>Canvas test: 2d.layer.blur-from-outside-canvas.no-clipping</title>
+<h1>2d.layer.blur-from-outside-canvas.no-clipping</h1>
+<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  // No clipping.
+
+  ctx.beginLayer({filter: [ {name: 'gaussianBlur', stdDeviation: 30} ]});
+
+  ctx.fillStyle = 'turquoise';
+  ctx.fillRect(201, 50, 100, 100);
+  ctx.fillStyle = 'indigo';
+  ctx.fillRect(50, 201, 100, 100);
+  ctx.fillStyle = 'orange';
+  ctx.fillRect(-1, 50, -100, 100);
+  ctx.fillStyle = 'brown';
+  ctx.fillRect(50, -1, 100, -100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping-expected.html
new file mode 100644
index 0000000000..1823f78983
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping-expected.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.layer.blur-from-outside-canvas.with-clipping</title>
+<h1>2d.layer.blur-from-outside-canvas.with-clipping</h1>
+<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+  <svg xmlns="http://www.w3.org/2000/svg"
+        width="200" height="200"
+        color-interpolation-filters="sRGB">
+    <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+      <feGaussianBlur in="SourceGraphic" stdDeviation="30" />
+    </filter>
+    <g filter="url(#filter)">
+      <rect x="201" y="50" width="100" height="100" fill="turquoise"/>
+      <rect x="50" y="201" width="100" height="100" fill="indigo"/>
+      <rect x="-101" y="50" width="100" height="100" fill="orange"/>
+      <rect x="50" y="-101" width="100" height="100" fill="brown"/>
+    </g>
+  </svg>`;
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+      const clipRegion = new Path2D();
+      clipRegion.rect(20, 20, 160, 160);
+      ctx.clip(clipRegion);
+
+      ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.html
new file mode 100644
index 0000000000..9e8161019a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.blur-from-outside-canvas.with-clipping.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.blur-from-outside-canvas.with-clipping-expected.html">
+<title>Canvas test: 2d.layer.blur-from-outside-canvas.with-clipping</title>
+<h1>2d.layer.blur-from-outside-canvas.with-clipping</h1>
+<p class="desc">Checks blur leaking inside from drawing outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const clipRegion = new Path2D();
+  clipRegion.rect(20, 20, 160, 160);
+  ctx.clip(clipRegion);
+
+  ctx.beginLayer({filter: [ {name: 'gaussianBlur', stdDeviation: 30} ]});
+
+  ctx.fillStyle = 'turquoise';
+  ctx.fillRect(201, 50, 100, 100);
+  ctx.fillStyle = 'indigo';
+  ctx.fillRect(50, 201, 100, 100);
+  ctx.fillStyle = 'orange';
+  ctx.fillRect(-1, 50, -100, 100);
+  ctx.fillStyle = 'brown';
+  ctx.fillRect(50, -1, 100, -100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full-expected.html
new file mode 100644
index 0000000000..5a47f8e118
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clearRect.full</title>
+<h1>2d.layer.clearRect.full</h1>
+<p class="desc">clearRect inside a layer can clear all of the layer content.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full.html
new file mode 100644
index 0000000000..579c6e1053
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.full.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clearRect.full-expected.html">
+<title>Canvas test: 2d.layer.clearRect.full</title>
+<h1>2d.layer.clearRect.full</h1>
+<p class="desc">clearRect inside a layer can clear all of the layer content.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 50);
+
+  ctx.beginLayer();
+  ctx.fillStyle = 'red';
+  ctx.fillRect(20, 20, 80, 50);
+  ctx.fillStyle = 'green';
+  ctx.clearRect(0, 0, 100, 100);
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial-expected.html
new file mode 100644
index 0000000000..ac75105cec
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial-expected.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clearRect.partial</title>
+<h1>2d.layer.clearRect.partial</h1>
+<p class="desc">clearRect inside a layer can clear a portion of the layer content.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 50);
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(20, 20, 80, 10);
+  ctx.fillRect(20, 60, 80, 10);
+  ctx.fillRect(20, 20, 10, 50);
+  ctx.fillRect(90, 20, 10, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial.html
new file mode 100644
index 0000000000..8323ffb931
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clearRect.partial.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clearRect.partial-expected.html">
+<title>Canvas test: 2d.layer.clearRect.partial</title>
+<h1>2d.layer.clearRect.partial</h1>
+<p class="desc">clearRect inside a layer can clear a portion of the layer content.</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 50);
+
+  ctx.beginLayer();
+  ctx.fillStyle = 'red';
+  ctx.fillRect(20, 20, 80, 50);
+  ctx.clearRect(30, 30, 60, 30);
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside-expected.html
new file mode 100644
index 0000000000..14e6d56245
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside-expected.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.layer.clip-inside-and-outside</title>
+<h1>2d.layer.clip-inside-and-outside</h1>
+<p class="desc">Check clipping set inside and outside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginPath();
+  ctx2.rect(15, 15, 70, 70);
+  ctx2.clip();
+
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+
+  const canvas3 = new OffscreenCanvas(200, 200);
+  const ctx3 = canvas3.getContext('2d');
+
+  ctx3.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx3.drawImage(canvas2, 0, 0);
+  ctx3.endLayer();
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+  ctx.drawImage(canvas3, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside.html
new file mode 100644
index 0000000000..1a727bbd3c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-and-outside.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-inside-and-outside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside-and-outside</title>
+<h1>2d.layer.clip-inside-and-outside</h1>
+<p class="desc">Check clipping set inside and outside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-expected.html
new file mode 100644
index 0000000000..281fc1d913
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside-expected.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-inside</title>
+<h1>2d.layer.clip-inside</h1>
+<p class="desc">Check clipping set inside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginPath();
+  ctx2.rect(15, 15, 70, 70);
+  ctx2.clip();
+
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx.drawImage(canvas2, 0, 0);
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside.html
new file mode 100644
index 0000000000..f3555c8321
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-inside.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-inside-expected.html">
+<title>Canvas test: 2d.layer.clip-inside</title>
+<h1>2d.layer.clip-inside</h1>
+<p class="desc">Check clipping set inside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside-expected.html
new file mode 100644
index 0000000000..1b18c2e8a7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside-expected.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.clip-outside</title>
+<h1>2d.layer.clip-outside</h1>
+<p class="desc">Check clipping set outside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+
+  ctx2.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx2.fillStyle = 'blue';
+  ctx2.fillRect(10, 10, 80, 80);
+  ctx2.endLayer();
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside.html
new file mode 100644
index 0000000000..bf8e84e3d2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.clip-outside.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.clip-outside-expected.html">
+<title>Canvas test: 2d.layer.clip-outside</title>
+<h1>2d.layer.clip-outside</h1>
+<p class="desc">Check clipping set outside the layer</p>
+<canvas id="canvas" width="100" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginPath();
+  ctx.rect(15, 15, 70, 70);
+  ctx.clip();
+
+  ctx.beginLayer({filter: {name: "gaussianBlur", stdDeviation: 12}});
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(10, 10, 80, 80);
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths-expected.html
new file mode 100644
index 0000000000..c394ecdfe3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.cross-layer-paths</title>
+<h1>2d.layer.cross-layer-paths</h1>
+<p class="desc">Checks that path defined in a layer is usable outside.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.moveTo(50, 0); ctx.lineTo(50, 100); ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths.html
new file mode 100644
index 0000000000..7feebfdce6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.cross-layer-paths.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.cross-layer-paths-expected.html">
+<title>Canvas test: 2d.layer.cross-layer-paths</title>
+<h1>2d.layer.cross-layer-paths</h1>
+<p class="desc">Checks that path defined in a layer is usable outside.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer();
+  ctx.translate(50, 0);
+  ctx.moveTo(0, 0);
+  ctx.endLayer();
+  ctx.lineTo(50, 100);
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow-expected.html
new file mode 100644
index 0000000000..85503ae33a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow-expected.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.css-filters.blur-and-shadow</title>
+<h1>2d.layer.css-filters.blur-and-shadow</h1>
+<p class="desc">Checks that beginLayer works with a CSS filter string as input.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feGaussianBlur stdDeviation="5" />
+    <feDropShadow dx="10" dy="10" stdDeviation="5" flood-color="orange" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.html
new file mode 100644
index 0000000000..08adfa3d74
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-and-shadow.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.css-filters.blur-and-shadow-expected.html">
+<title>Canvas test: 2d.layer.css-filters.blur-and-shadow</title>
+<h1>2d.layer.css-filters.blur-and-shadow</h1>
+<p class="desc">Checks that beginLayer works with a CSS filter string as input.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: 'blur(5px) drop-shadow(10px 10px 5px orange)'});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-expected.html
new file mode 100644
index 0000000000..c6131f6c1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.css-filters.blur</title>
+<h1>2d.layer.css-filters.blur</h1>
+<p class="desc">Checks that beginLayer works with a CSS filter string as input.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feGaussianBlur stdDeviation="10" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur.html
new file mode 100644
index 0000000000..3eb3ab8f9c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.blur.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.css-filters.blur-expected.html">
+<title>Canvas test: 2d.layer.css-filters.blur</title>
+<h1>2d.layer.css-filters.blur</h1>
+<p class="desc">Checks that beginLayer works with a CSS filter string as input.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: 'blur(10px)'});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow-expected.html
new file mode 100644
index 0000000000..60f78d8096
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.css-filters.shadow</title>
+<h1>2d.layer.css-filters.shadow</h1>
+<p class="desc">Checks that beginLayer works with a CSS filter string as input.</p>
+
+<svg xmlns="http://www.w3.org/2000/svg"
+      width="200" height="200"
+      color-interpolation-filters="sRGB">
+  <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+    <feDropShadow dx="-10" dy="-10" stdDeviation="5" flood-color="purple" />
+  </filter>
+  <g filter="url(#filter)">
+    <rect x="50" y="50" width="100" height="100" fill="teal"/>
+  </g>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow.html
new file mode 100644
index 0000000000..e6df8a3ac2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.css-filters.shadow.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.css-filters.shadow-expected.html">
+<title>Canvas test: 2d.layer.css-filters.shadow</title>
+<h1>2d.layer.css-filters.shadow</h1>
+<p class="desc">Checks that beginLayer works with a CSS filter string as input.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: 'drop-shadow(-10px -10px 5px purple)'});
+
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.html
new file mode 100644
index 0000000000..7ab2080fca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.exceptions-are-no-op.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.layer.exceptions-are-no-op</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.layer.exceptions-are-no-op</h1>
+<p class="desc">Checks that the context state is left unchanged if beginLayer throws.</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("Checks that the context state is left unchanged if beginLayer throws.");
+_addTest(function(canvas, ctx) {
+
+  // Get `beginLayer` to throw while parsing the filter.
+  assert_throws_js(TypeError,
+                   () => ctx.beginLayer({filter: {name: 'colorMatrix',
+                                                  values: 'foo'}}));
+  // `beginLayer` shouldn't have opened the layer, so `endLayer` should throw.
+  assert_throws_dom("InvalidStateError", () => ctx.endLayer());
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation-expected.html
new file mode 100644
index 0000000000..532c29576c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation-expected.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<title>Canvas test: 2d.layer.flush-on-frame-presentation</title>
+<h1>2d.layer.flush-on-frame-presentation</h1>
+<p class="desc">Check that layers state stack is flushed and rebuilt on frame renders.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script type="module">
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'purple';
+  ctx.fillRect(60, 60, 75, 50);
+  ctx.globalAlpha = 0.5;
+
+  ctx.beginLayer({filter: {name: 'dropShadow', dx: -2, dy: 2}});
+  ctx.fillStyle = 'purple';
+  ctx.fillRect(40, 40, 75, 50);
+  ctx.fillStyle = 'grey';
+  ctx.fillRect(50, 50, 75, 50);
+
+  ctx.fillStyle = 'grey';
+  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillStyle = 'orange';
+  ctx.fillRect(80, 80, 75, 50);
+  ctx.endLayer();
+
+  ctx.fillRect(80, 40, 75, 50);
+  document.documentElement.classList.remove("reftest-wait");
+</script>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation.html
new file mode 100644
index 0000000000..c8a118f8a2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.flush-on-frame-presentation.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<html class="reftest-wait">
+<link rel="match" href="2d.layer.flush-on-frame-presentation-expected.html">
+<title>Canvas test: 2d.layer.flush-on-frame-presentation</title>
+<h1>2d.layer.flush-on-frame-presentation</h1>
+<p class="desc">Check that layers state stack is flushed and rebuilt on frame renders.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script type="module">
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'purple';
+  ctx.fillRect(60, 60, 75, 50);
+  ctx.globalAlpha = 0.5;
+
+  ctx.beginLayer({filter: {name: 'dropShadow', dx: -2, dy: 2}});
+  ctx.fillRect(40, 40, 75, 50);
+  ctx.fillStyle = 'grey';
+  ctx.fillRect(50, 50, 75, 50);
+
+  // Force a flush and restoration of the state stack:
+  await new Promise(resolve => requestAnimationFrame(resolve));
+
+  ctx.fillRect(70, 70, 75, 50);
+  ctx.fillStyle = 'orange';
+  ctx.fillRect(80, 80, 75, 50);
+  ctx.endLayer();
+
+  ctx.fillRect(80, 40, 75, 50);
+  document.documentElement.classList.remove("reftest-wait");
+</script>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter-expected.html
new file mode 100644
index 0000000000..88057fc354
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter-expected.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-filter</title>
+<h1>2d.layer.global-filter</h1>
+<p class="desc">Tests that layers ignore the global context filter.</p>
+<canvas id="canvas" width="150" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillRect(60, 10, 30, 30);
+  ctx.filter = 'blur(5px)'
+  ctx.fillRect(10, 10, 30, 30);
+  ctx.fillRect(110, 10, 30, 30);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter.html
new file mode 100644
index 0000000000..cf46f41b97
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-filter.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-filter-expected.html">
+<title>Canvas test: 2d.layer.global-filter</title>
+<h1>2d.layer.global-filter</h1>
+<p class="desc">Tests that layers ignore the global context filter.</p>
+<canvas id="canvas" width="150" height="100">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.filter = 'blur(5px)'
+
+  ctx.beginLayer();
+  ctx.fillRect(10, 10, 30, 30);  // `ctx.filter` applied to draw call.
+  ctx.endLayer();
+
+  ctx.beginLayer();
+  ctx.filter = 'none';
+  ctx.fillRect(60, 10, 30, 30);  // Should not be filted by the layer.
+  ctx.endLayer();
+
+  ctx.fillRect(110, 10, 30, 30);  // `ctx.filter` is still set.
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.html
new file mode 100644
index 0000000000..0666e3098a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha-expected.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.layer.global-states.alpha</title>
+<h1>2d.layer.global-states.alpha</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.html
new file mode 100644
index 0000000000..8a45027588
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending-expected.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.layer.global-states.alpha.blending</title>
+<h1>2d.layer.global-states.alpha.blending</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
new file mode 100644
index 0000000000..8e15a2b936
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.alpha.blending-expected.html">
+<title>Canvas test: 2d.layer.global-states.alpha.blending</title>
+<h1>2d.layer.global-states.alpha.blending</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.html
new file mode 100644
index 0000000000..f7b633b35f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow-expected.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.layer.global-states.alpha.blending.shadow</title>
+<h1>2d.layer.global-states.alpha.blending.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
new file mode 100644
index 0000000000..c8c6d433bc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.blending.shadow.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.alpha.blending.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.alpha.blending.shadow</title>
+<h1>2d.layer.global-states.alpha.blending.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.html
new file mode 100644
index 0000000000..951049e638
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite-expected.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.layer.global-states.alpha.composite</title>
+<h1>2d.layer.global-states.alpha.composite</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
new file mode 100644
index 0000000000..1ac6a2cbfe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.alpha.composite-expected.html">
+<title>Canvas test: 2d.layer.global-states.alpha.composite</title>
+<h1>2d.layer.global-states.alpha.composite</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.html
new file mode 100644
index 0000000000..0ae93871f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow-expected.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.layer.global-states.alpha.composite.shadow</title>
+<h1>2d.layer.global-states.alpha.composite.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
new file mode 100644
index 0000000000..92b8a0d7a7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.composite.shadow.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.alpha.composite.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.alpha.composite.shadow</title>
+<h1>2d.layer.global-states.alpha.composite.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html
new file mode 100644
index 0000000000..829796acbf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.alpha-expected.html">
+<title>Canvas test: 2d.layer.global-states.alpha</title>
+<h1>2d.layer.global-states.alpha</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.html
new file mode 100644
index 0000000000..6f764c5001
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow-expected.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.layer.global-states.alpha.shadow</title>
+<h1>2d.layer.global-states.alpha.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.5;
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
new file mode 100644
index 0000000000..a325302b3b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.alpha.shadow.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.alpha.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.alpha.shadow</title>
+<h1>2d.layer.global-states.alpha.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.5;
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.html
new file mode 100644
index 0000000000..33fdf46a28
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending-expected.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.layer.global-states.blending</title>
+<h1>2d.layer.global-states.blending</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'multiply';
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html
new file mode 100644
index 0000000000..7d4d9ae4b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending</title>
+<h1>2d.layer.global-states.blending</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'multiply';
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.html
new file mode 100644
index 0000000000..6f969074f9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow-expected.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.layer.global-states.blending.shadow</title>
+<h1>2d.layer.global-states.blending.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
new file mode 100644
index 0000000000..51926d76d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.blending.shadow.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.blending.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.blending.shadow</title>
+<h1>2d.layer.global-states.blending.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.html
new file mode 100644
index 0000000000..ed7669c4cf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite-expected.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.layer.global-states.composite</title>
+<h1>2d.layer.global-states.composite</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html
new file mode 100644
index 0000000000..898d149924
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite</title>
+<h1>2d.layer.global-states.composite</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.html
new file mode 100644
index 0000000000..b687c27f47
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow-expected.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.layer.global-states.composite.shadow</title>
+<h1>2d.layer.global-states.composite.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
new file mode 100644
index 0000000000..c563a57b76
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.composite.shadow.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.composite.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.composite.shadow</title>
+<h1>2d.layer.global-states.composite.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
new file mode 100644
index 0000000000..f304700feb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha-expected.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.alpha</title>
+<h1>2d.layer.global-states.filter.alpha</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalAlpha = 0.6;
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.html
new file mode 100644
index 0000000000..7c91ce4229
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending-expected.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.layer.global-states.filter.alpha.blending</title>
+<h1>2d.layer.global-states.filter.alpha.blending</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
new file mode 100644
index 0000000000..17e0f0c8c5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.alpha.blending-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.alpha.blending</title>
+<h1>2d.layer.global-states.filter.alpha.blending</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
new file mode 100644
index 0000000000..62942ffeae
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow-expected.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title>
+<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
new file mode 100644
index 0000000000..ccadfb624b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.blending.shadow.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.alpha.blending.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.alpha.blending.shadow</title>
+<h1>2d.layer.global-states.filter.alpha.blending.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.html
new file mode 100644
index 0000000000..8e0d98648e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite-expected.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.layer.global-states.filter.alpha.composite</title>
+<h1>2d.layer.global-states.filter.alpha.composite</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
new file mode 100644
index 0000000000..71a27cf710
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.alpha.composite-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.alpha.composite</title>
+<h1>2d.layer.global-states.filter.alpha.composite</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
new file mode 100644
index 0000000000..a649972546
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow-expected.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title>
+<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
new file mode 100644
index 0000000000..b2907f02aa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.composite.shadow.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.alpha.composite.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.alpha.composite.shadow</title>
+<h1>2d.layer.global-states.filter.alpha.composite.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
new file mode 100644
index 0000000000..5133aa170e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.alpha-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.alpha</title>
+<h1>2d.layer.global-states.filter.alpha</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.6;
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
new file mode 100644
index 0000000000..169baee29b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow-expected.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title>
+<h1>2d.layer.global-states.filter.alpha.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalAlpha = 0.5;
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
new file mode 100644
index 0000000000..6aa8e75a95
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.alpha.shadow.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.alpha.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.alpha.shadow</title>
+<h1>2d.layer.global-states.filter.alpha.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalAlpha = 0.5;
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
new file mode 100644
index 0000000000..f81dcf72dc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending-expected.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending</title>
+<h1>2d.layer.global-states.filter.blending</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalCompositeOperation = 'multiply';
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
new file mode 100644
index 0000000000..31628812c2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending</title>
+<h1>2d.layer.global-states.filter.blending</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'multiply';
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
new file mode 100644
index 0000000000..91f3725f8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow-expected.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title>
+<h1>2d.layer.global-states.filter.blending.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
new file mode 100644
index 0000000000..e54cf06d0d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.blending.shadow.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.blending.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.blending.shadow</title>
+<h1>2d.layer.global-states.filter.blending.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'multiply';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
new file mode 100644
index 0000000000..97e85a1593
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite-expected.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite</title>
+<h1>2d.layer.global-states.filter.composite</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalCompositeOperation = 'source-in';
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
new file mode 100644
index 0000000000..d7e365422f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite</title>
+<h1>2d.layer.global-states.filter.composite</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
new file mode 100644
index 0000000000..4716bb2760
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow-expected.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title>
+<h1>2d.layer.global-states.filter.composite.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
new file mode 100644
index 0000000000..e5c7698634
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.composite.shadow.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.composite.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.composite.shadow</title>
+<h1>2d.layer.global-states.filter.composite.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
new file mode 100644
index 0000000000..e56fe0b360
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states-expected.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title>
+<h1>2d.layer.global-states.filter.no-global-states</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    // No global states.
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
new file mode 100644
index 0000000000..68f4d5004a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.no-global-states.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.no-global-states-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.no-global-states</title>
+<h1>2d.layer.global-states.filter.no-global-states</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  // No global states.
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.html
new file mode 100644
index 0000000000..13ba2dd4cd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow-expected.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.layer.global-states.filter.shadow</title>
+<h1>2d.layer.global-states.filter.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg"
+          width="200" height="200"
+          color-interpolation-filters="sRGB">
+      <filter id="filter" x="-100%" y="-100%" width="300%" height="300%">
+        <feColorMatrix
+            type="matrix"
+            values="0.393 0.769 0.189 0 0
+                    0.349 0.686 0.168 0 0
+                    0.272 0.534 0.131 0 0
+                    0 0 0 1 0" />
+        <feComponentTransfer>
+          <feFuncA type="table" tableValues="0 0.7"></feFuncA>
+        </feComponentTransfer>
+        <feDropShadow dx="5" dy="5" flood-color="#81e" />
+      </filter>
+      <g filter="url(#filter)">
+        <rect x="50" y="50" width="75" height="50" fill="rgba(200, 0, 0, 1)"/>
+        <rect x="70" y="70" width="75" height="50" fill="rgba(0, 200, 0, 1)"/>
+      </g>
+    </svg>`;
+
+  const img = new Image();
+  img.width = 200;
+  img.height = 200;
+  img.onload = () => {
+    ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+    var circle = new Path2D();
+    circle.arc(90, 90, 45, 0, 2 * Math.PI);
+    ctx.fill(circle);
+
+    ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+    ctx.drawImage(img, 0, 0);
+  };
+  img.src = 'data:image/svg+xml;base64,' + btoa(svg);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
new file mode 100644
index 0000000000..9efcd9d4f7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.filter.shadow.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.filter.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.filter.shadow</title>
+<h1>2d.layer.global-states.filter.shadow</h1>
+<p class="desc">Checks that layers with filters correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer({filter: [
+      {name: 'colorMatrix', values: [0.393, 0.769, 0.189, 0, 0,
+                                     0.349, 0.686, 0.168, 0, 0,
+                                     0.272, 0.534, 0.131, 0, 0,
+                                     0, 0, 0, 1, 0]},
+      {name: 'componentTransfer',
+          funcA: {type: "table", tableValues: [0, 0.7]}},
+      {name: 'dropShadow', dx: 5, dy: 5, floodColor: '#81e'}]});
+
+  ctx.fillStyle = 'rgba(200, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 200, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.html
new file mode 100644
index 0000000000..b91a2ae8b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states-expected.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.layer.global-states.no-global-states</title>
+<h1>2d.layer.global-states.no-global-states</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  // No global states.
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
new file mode 100644
index 0000000000..d561be2341
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.no-global-states.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.no-global-states-expected.html">
+<title>Canvas test: 2d.layer.global-states.no-global-states</title>
+<h1>2d.layer.global-states.no-global-states</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  // No global states.
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.html
new file mode 100644
index 0000000000..835e9d420a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow-expected.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.layer.global-states.shadow</title>
+<h1>2d.layer.global-states.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.globalCompositeOperation = 'screen';
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(50, 50, 75, 50);
+  ctx2.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx2.fillRect(70, 70, 75, 50);
+
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html
new file mode 100644
index 0000000000..209316164c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.global-states.shadow.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.global-states.shadow-expected.html">
+<title>Canvas test: 2d.layer.global-states.shadow</title>
+<h1>2d.layer.global-states.shadow</h1>
+<p class="desc">Checks that layers correctly use global render states.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 45, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'rgba(255, 165, 0, 0.5)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer();
+
+  // Enable compositing in the layer to validate that draw calls in the layer
+  // won't individually composite with the background.
+  ctx.globalCompositeOperation = 'screen';
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.html
new file mode 100644
index 0000000000..74e05e1e48
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-reset-endLayer.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.layer.invalid-calls.beginLayer-reset-endLayer</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.layer.invalid-calls.beginLayer-reset-endLayer</h1>
+<p class="desc">Raises exception on beginLayer() + reset() + endLayer().</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("Raises exception on beginLayer() + reset() + endLayer().");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INVALID_STATE_ERR", function() {
+    ctx.beginLayer();
+    ctx.reset();
+    ctx.endLayer();
+  });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.html
new file mode 100644
index 0000000000..1979cb6c73
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-restore.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.layer.invalid-calls.beginLayer-restore</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.layer.invalid-calls.beginLayer-restore</h1>
+<p class="desc">Raises exception on beginLayer() + restore().</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("Raises exception on beginLayer() + restore().");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INVALID_STATE_ERR", function() {
+    ctx.beginLayer();
+    ctx.restore();
+  });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.html
new file mode 100644
index 0000000000..c635ac75b9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.beginLayer-save-endLayer.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.layer.invalid-calls.beginLayer-save-endLayer</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.layer.invalid-calls.beginLayer-save-endLayer</h1>
+<p class="desc">Raises exception on beginLayer() + save() + endLayer().</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("Raises exception on beginLayer() + save() + endLayer().");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INVALID_STATE_ERR", function() {
+    ctx.beginLayer();
+    ctx.save();
+    ctx.endLayer();
+  });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.html
new file mode 100644
index 0000000000..c39a352d65
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.endLayer.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.layer.invalid-calls.endLayer</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.layer.invalid-calls.endLayer</h1>
+<p class="desc">Raises exception on lone endLayer calls.</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("Raises exception on lone endLayer calls.");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INVALID_STATE_ERR", function() {
+    ctx.endLayer();
+  });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.html
new file mode 100644
index 0000000000..e2d4d56589
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-beginLayer-restore.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.layer.invalid-calls.save-beginLayer-restore</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.layer.invalid-calls.save-beginLayer-restore</h1>
+<p class="desc">Raises exception on save() + beginLayer() + restore().</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("Raises exception on save() + beginLayer() + restore().");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INVALID_STATE_ERR", function() {
+    ctx.save();
+    ctx.beginLayer();
+    ctx.restore();
+  });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.html
new file mode 100644
index 0000000000..f4308e1191
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.invalid-calls.save-endLayer.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.layer.invalid-calls.save-endLayer</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.layer.invalid-calls.save-endLayer</h1>
+<p class="desc">Raises exception on save() + endLayer().</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("Raises exception on save() + endLayer().");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INVALID_STATE_ERR", function() {
+    ctx.save();
+    ctx.endLayer();
+  });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.layer-rendering-state-reset-in-layer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.layer-rendering-state-reset-in-layer.html
new file mode 100644
index 0000000000..9283fd39b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.layer-rendering-state-reset-in-layer.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.layer-rendering-state-reset-in-layer</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.layer.layer-rendering-state-reset-in-layer</h1>
+<p class="desc">Tests that layers ignore the global context filter.</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("Tests that layers ignore the global context filter.");
+_addTest(function(canvas, ctx) {
+
+  ctx.globalAlpha = 0.5;
+  ctx.globalCompositeOperation = 'xor';
+  ctx.shadowColor = '#0000ff';
+  ctx.shadowOffsetX = 10;
+  ctx.shadowOffsetY = 20;
+  ctx.shadowBlur = 30;
+
+  _assertSame(ctx.globalAlpha, 0.5, "ctx.globalAlpha", "0.5");
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+  _assertSame(ctx.shadowColor, '#0000ff', "ctx.shadowColor", "'#0000ff'");
+  _assertSame(ctx.shadowOffsetX, 10, "ctx.shadowOffsetX", "10");
+  _assertSame(ctx.shadowOffsetY, 20, "ctx.shadowOffsetY", "20");
+  _assertSame(ctx.shadowBlur, 30, "ctx.shadowBlur", "30");
+
+  ctx.beginLayer();
+
+  _assertSame(ctx.globalAlpha, 1.0, "ctx.globalAlpha", "1.0");
+  _assertSame(ctx.globalCompositeOperation, 'source-over', "ctx.globalCompositeOperation", "'source-over'");
+  _assertSame(ctx.shadowColor, 'rgba(0, 0, 0, 0)', "ctx.shadowColor", "'rgba(0, 0, 0, 0)'");
+  _assertSame(ctx.shadowOffsetX, 0, "ctx.shadowOffsetX", "0");
+  _assertSame(ctx.shadowOffsetY, 0, "ctx.shadowOffsetY", "0");
+  _assertSame(ctx.shadowBlur, 0, "ctx.shadowBlur", "0");
+
+  ctx.endLayer();
+
+  _assertSame(ctx.globalAlpha, 0.5, "ctx.globalAlpha", "0.5");
+  _assertSame(ctx.globalCompositeOperation, 'xor', "ctx.globalCompositeOperation", "'xor'");
+  _assertSame(ctx.shadowColor, '#0000ff', "ctx.shadowColor", "'#0000ff'");
+  _assertSame(ctx.shadowOffsetX, 10, "ctx.shadowOffsetX", "10");
+  _assertSame(ctx.shadowOffsetY, 20, "ctx.shadowOffsetY", "20");
+  _assertSame(ctx.shadowBlur, 30, "ctx.shadowBlur", "30");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.html
new file mode 100644
index 0000000000..f1204aa61b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.createImageBitmap.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.layer.malformed-operations-with-promises.createImageBitmap</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.layer.malformed-operations-with-promises.createImageBitmap</h1>
+<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  await createImageBitmap(canvas);
+  // Make sure the exception isn't caused by calling the function twice.
+  await createImageBitmap(canvas);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  await promise_rejects_dom(t, 'InvalidStateError', createImageBitmap(canvas));
+
+}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.html
new file mode 100644
index 0000000000..6c69bb3784
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations-with-promises.toBlob.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.layer.malformed-operations-with-promises.toBlob</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.layer.malformed-operations-with-promises.toBlob</h1>
+<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  // Shouldn't throw on its own.
+  await new Promise(resolve => canvas.toBlob(resolve));
+  // Make sure the exception isn't caused by calling the function twice.
+  await new Promise(resolve => canvas.toBlob(resolve));
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  await promise_rejects_dom(t, 'InvalidStateError', new Promise(resolve => canvas.toBlob(resolve)));
+
+}, "Check that exceptions are thrown for operations that are malformed while layers are open.");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html
new file mode 100644
index 0000000000..f927b96524
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.createPattern.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.malformed-operations.createPattern</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.layer.malformed-operations.createPattern</h1>
+<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
+_addTest(function(canvas, ctx) {
+
+  // Shouldn't throw on its own.
+  ctx.createPattern(canvas, 'repeat');
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.createPattern(canvas, 'repeat');
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.createPattern(canvas, 'repeat'));
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.html
new file mode 100644
index 0000000000..8bcc89d38e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.drawImage.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.layer.malformed-operations.drawImage</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.layer.malformed-operations.drawImage</h1>
+<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
+_addTest(function(canvas, ctx) {
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+  // Shouldn't throw on its own.
+  ctx2.drawImage(canvas, 0, 0);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx2.drawImage(canvas, 0, 0);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx2.drawImage(canvas, 0, 0));
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html
new file mode 100644
index 0000000000..5dc3fcc017
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.getImageData.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.malformed-operations.getImageData</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.layer.malformed-operations.getImageData</h1>
+<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
+_addTest(function(canvas, ctx) {
+
+  // Shouldn't throw on its own.
+  ctx.getImageData(0, 0, 200, 200);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.getImageData(0, 0, 200, 200);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.getImageData(0, 0, 200, 200));
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.html
new file mode 100644
index 0000000000..fd4fc262c2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.putImageData.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.layer.malformed-operations.putImageData</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.layer.malformed-operations.putImageData</h1>
+<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
+_addTest(function(canvas, ctx) {
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d')
+  const data = ctx2.getImageData(0, 0, 1, 1);
+  // Shouldn't throw on its own.
+  ctx.putImageData(data, 0, 0);
+  // Make sure the exception isn't caused by calling the function twice.
+  ctx.putImageData(data, 0, 0);
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => ctx.putImageData(data, 0, 0));
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html
new file mode 100644
index 0000000000..c9bb4f3875
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.malformed-operations.toDataURL.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.malformed-operations.toDataURL</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.layer.malformed-operations.toDataURL</h1>
+<p class="desc">Check that exceptions are thrown for operations that are malformed while layers are open.</p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="200" height="200"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("Check that exceptions are thrown for operations that are malformed while layers are open.");
+_addTest(function(canvas, ctx) {
+
+  // Shouldn't throw on its own.
+  canvas.toDataURL();
+  // Make sure the exception isn't caused by calling the function twice.
+  canvas.toDataURL();
+  // Calling again inside a layer should throw.
+  ctx.beginLayer();
+  assert_throws_dom("InvalidStateError",
+                    () => canvas.toDataURL());
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-expected.html
new file mode 100644
index 0000000000..65525d4d6a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-expected.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.layer.nested</title>
+<h1>2d.layer.nested</h1>
+<p class="desc">Tests nested canvas layers.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 40, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+
+  ctx2.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx2.fillRect(60, 60, 75, 50);
+
+  ctx2.globalAlpha = 0.5;
+
+  canvas3 = document.createElement("canvas");
+  ctx3 = canvas3.getContext("2d");
+
+  ctx3.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx3.fillRect(50, 50, 75, 50);
+  ctx3.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx3.fillRect(70, 70, 75, 50);
+
+  ctx2.drawImage(canvas3, 0, 0);
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters-expected.html
new file mode 100644
index 0000000000..8b53e2dc76
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters-expected.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.layer.nested-filters</title>
+<h1>2d.layer.nested-filters</h1>
+<p class="desc">Checks that nested layers work properly when both apply filters.</p>
+<canvas id="canvas" width="400" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'yellow';
+  ctx.fillRect(20, 20, 100, 100);
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(40, 40, 100, 100);
+  ctx.fillStyle = 'red';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(280, 80, 100, 100);
+  ctx.fillRect(270, 70, 100, 100);
+  ctx.fillStyle = 'yellow';
+  ctx.fillRect(260, 60, 100, 100);
+  ctx.fillStyle = 'red';
+  ctx.fillRect(250, 50, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters.html
new file mode 100644
index 0000000000..333de67ac9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested-filters.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.nested-filters-expected.html">
+<title>Canvas test: 2d.layer.nested-filters</title>
+<h1>2d.layer.nested-filters</h1>
+<p class="desc">Checks that nested layers work properly when both apply filters.</p>
+<canvas id="canvas" width="400" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginLayer({filter: {name: 'dropShadow', dx: -20, dy: -20,
+    stdDeviation: 0, floodColor: 'yellow'}});
+  ctx.beginLayer({filter: 'drop-shadow(-10px -10px 0 blue)'});
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(50, 50, 100, 100);
+
+  ctx.endLayer();
+  ctx.endLayer();
+
+  ctx.beginLayer({filter: 'drop-shadow(20px 20px 0 blue)'});
+  ctx.beginLayer({filter: {name: 'dropShadow', dx: 10, dy: 10,
+    stdDeviation: 0, floodColor: 'yellow'}});
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(250, 50, 100, 100);
+
+  ctx.endLayer();
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested.html
new file mode 100644
index 0000000000..a508d8e5c8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.nested.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.nested-expected.html">
+<title>Canvas test: 2d.layer.nested</title>
+<h1>2d.layer.nested</h1>
+<p class="desc">Tests nested canvas layers.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  var circle = new Path2D();
+  circle.arc(90, 90, 40, 0, 2 * Math.PI);
+  ctx.fill(circle);
+
+  ctx.globalCompositeOperation = 'source-in';
+
+  ctx.beginLayer();
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillRect(60, 60, 75, 50);
+
+  ctx.globalAlpha = 0.5;
+
+  ctx.beginLayer();
+
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas-expected.html
new file mode 100644
index 0000000000..89c85de1e5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas-expected.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.layer.opaque-canvas</title>
+<h1>2d.layer.opaque-canvas</h1>
+<p class="desc">Checks that layer blending works inside opaque canvas</p>
+<canvas id="canvas" width="300" height="300">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(0, 0, 300, 300);
+
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0, 0, 200, 200);
+
+  ctx.fillStyle = 'purple';
+  ctx.fillRect(10, 10, 100, 100);
+
+  const canvas2 = new OffscreenCanvas(200, 200);
+  const ctx2 = canvas2.getContext('2d');
+  ctx2.fillStyle = 'green';
+  ctx2.fillRect(50, 50, 100, 100);
+  ctx2.globalAlpha = 0.8;
+  ctx2.fillStyle = 'yellow';
+  ctx2.fillRect(75, 25, 100, 100);
+
+  ctx.shadowColor = 'rgba(200, 100, 50, 0.5)';
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas.html
new file mode 100644
index 0000000000..be8b088fbb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.opaque-canvas.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.opaque-canvas-expected.html">
+<title>Canvas test: 2d.layer.opaque-canvas</title>
+<h1>2d.layer.opaque-canvas</h1>
+<p class="desc">Checks that layer blending works inside opaque canvas</p>
+<canvas id="canvas" width="300" height="300">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const canvas2 = document.createElement('canvas');
+  canvas2.width = 200;
+  canvas2.height = 200;
+  const ctx2 = canvas2.getContext('2d', {alpha: false});
+
+  ctx2.fillStyle = 'purple';
+  ctx2.fillRect(10, 10, 100, 100);
+
+  ctx2.beginLayer({filter: {name: 'dropShadow', dx: -10, dy: 10,
+                            stdDeviation: 0,
+                            floodColor: 'rgba(200, 100, 50, 0.5)'}});
+  ctx2.fillStyle = 'green';
+  ctx2.fillRect(50, 50, 100, 100);
+  ctx2.globalAlpha = 0.8;
+  ctx2.fillStyle = 'yellow';
+  ctx2.fillRect(75, 25, 100, 100);
+  ctx2.endLayer();
+
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(0, 0, 300, 300);
+  ctx.drawImage(canvas2, 0, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset-expected.html
new file mode 100644
index 0000000000..93131dca9c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.reset</title>
+<h1>2d.layer.reset</h1>
+<p class="desc">Checks that reset discards any pending layers.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillRect(10, 10, 75, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset.html
new file mode 100644
index 0000000000..9ad779abfd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.reset.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.reset-expected.html">
+<title>Canvas test: 2d.layer.reset</title>
+<h1>2d.layer.reset</h1>
+<p class="desc">Checks that reset discards any pending layers.</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  // Global states:
+  ctx.globalAlpha = 0.3;
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -3;
+  ctx.shadowOffsetY = 3;
+  ctx.shadowColor = 'rgba(0, 30, 0, 0.3)';
+  ctx.shadowBlur = 3;
+
+  ctx.beginLayer({filter: {name: 'dropShadow', dx: -3, dy: 3}});
+
+  // Layer states:
+  ctx.globalAlpha = 0.6;
+  ctx.globalCompositeOperation = 'source-in';
+  ctx.shadowOffsetX = -6;
+  ctx.shadowOffsetY = 6;
+  ctx.shadowColor = 'rgba(0, 60, 0, 0.6)';
+  ctx.shadowBlur = 3;
+
+  ctx.reset();
+
+  ctx.fillRect(10, 10, 75, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style-expected.html
new file mode 100644
index 0000000000..1d0ac3558d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style-expected.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.restore-style</title>
+<h1>2d.layer.restore-style</h1>
+<p class="desc">Test that ensure layers restores style values upon endLayer.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.globalAlpha = 0.5;
+
+  canvas2 = document.createElement("canvas");
+  ctx2 = canvas2.getContext("2d");
+  ctx2.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx2.fillRect(60, 60, 75, 50);
+  ctx.drawImage(canvas2, 0, 0);
+
+  ctx.fillRect(70, 70, 75, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style.html
new file mode 100644
index 0000000000..2537f409d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.restore-style.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.restore-style-expected.html">
+<meta name=fuzzy content="maxDifference=0-1; totalPixels=0-950">
+<title>Canvas test: 2d.layer.restore-style</title>
+<h1>2d.layer.restore-style</h1>
+<p class="desc">Test that ensure layers restores style values upon endLayer.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0,0,255,1)';
+  ctx.fillRect(50, 50, 75, 50);
+  ctx.globalAlpha = 0.5;
+
+  ctx.beginLayer();
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(60, 60, 75, 50);
+  ctx.endLayer();
+
+  ctx.fillRect(70, 70, 75, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex-expected.html
new file mode 100644
index 0000000000..ef46f69e2a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex-expected.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.layer.several-complex</title>
+<h1>2d.layer.several-complex</h1>
+<p class="desc">Test to ensure beginlayer works for filter, alpha and shadow, even with consecutive layers.</p>
+<canvas id="canvas" width="500" height="500">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillRect(50, 50, 95, 70);
+
+  ctx.globalAlpha = 0.5;
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'orange';
+  ctx.shadowBlur = 3;
+
+  var canvas2 = [5];
+  var ctx2 = [5];
+
+  for (let i = 0; i < 5; i++) {
+    canvas2[i] = document.createElement("canvas");
+    ctx2[i] = canvas2[i].getContext("2d");
+    ctx2[i].fillStyle = 'rgba(225, 0, 0, 1)';
+    ctx2[i].fillRect(60, 40, 75, 50);
+    ctx2[i].fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx2[i].fillRect(80, 60, 75, 50);
+
+    ctx.drawImage(canvas2[i], i, i);
+  }
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex.html
new file mode 100644
index 0000000000..cff0c123ef
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.several-complex.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.several-complex-expected.html">
+<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-6318">
+<title>Canvas test: 2d.layer.several-complex</title>
+<h1>2d.layer.several-complex</h1>
+<p class="desc">Test to ensure beginlayer works for filter, alpha and shadow, even with consecutive layers.</p>
+<canvas id="canvas" width="500" height="500">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillRect(50, 50, 95, 70);
+
+  ctx.globalAlpha = 0.5;
+  ctx.shadowOffsetX = -10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = 'orange';
+  ctx.shadowBlur = 3
+
+  for (let i = 0; i < 5; i++) {
+    ctx.beginLayer();
+
+    ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+    ctx.fillRect(60 + i, 40 + i, 75, 50);
+    ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+    ctx.fillRect(80 + i, 60 + i, 75, 50);
+
+    ctx.endLayer();
+  }
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-expected.html
new file mode 100644
index 0000000000..cc10684a9b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.long-distance</title>
+<h1>2d.layer.shadow-from-outside-canvas.long-distance</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 10000;
+
+  // No clipping.
+
+  ctx.fillStyle = 'green';
+  ctx.fillRect(0, 0, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping-expected.html
new file mode 100644
index 0000000000..377dd55ef6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping-expected.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.long-distance-with-clipping</title>
+<h1>2d.layer.shadow-from-outside-canvas.long-distance-with-clipping</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 10000;
+
+  const clipRegion = new Path2D();
+  clipRegion.rect(20, 20, 160, 160);
+  ctx.clip(clipRegion);
+
+  ctx.fillStyle = 'green';
+  ctx.fillRect(0, 0, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping.html
new file mode 100644
index 0000000000..88a3a67c7b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance-with-clipping.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.shadow-from-outside-canvas.long-distance-with-clipping-expected.html">
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.long-distance-with-clipping</title>
+<h1>2d.layer.shadow-from-outside-canvas.long-distance-with-clipping</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 10000;
+
+  const clipRegion = new Path2D();
+  clipRegion.rect(20, 20, 160, 160);
+  ctx.clip(clipRegion);
+
+  ctx.beginLayer({filter: [
+      {name: 'dropShadow', dx: -(200 + delta),
+        dy: -(200 + delta), stdDeviation: 0,
+        floodColor: 'green'},
+      ]});
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(200 + delta, 200 + delta, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance.html
new file mode 100644
index 0000000000..8ade08bec5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.long-distance.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.shadow-from-outside-canvas.long-distance-expected.html">
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.long-distance</title>
+<h1>2d.layer.shadow-from-outside-canvas.long-distance</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 10000;
+
+  // No clipping.
+
+  ctx.beginLayer({filter: [
+      {name: 'dropShadow', dx: -(200 + delta),
+        dy: -(200 + delta), stdDeviation: 0,
+        floodColor: 'green'},
+      ]});
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(200 + delta, 200 + delta, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-expected.html
new file mode 100644
index 0000000000..8980708dd1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.short-distance</title>
+<h1>2d.layer.shadow-from-outside-canvas.short-distance</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 1;
+
+  // No clipping.
+
+  ctx.fillStyle = 'green';
+  ctx.fillRect(0, 0, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping-expected.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping-expected.html
new file mode 100644
index 0000000000..024fc8c9a4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping-expected.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.short-distance-with-clipping</title>
+<h1>2d.layer.shadow-from-outside-canvas.short-distance-with-clipping</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 1;
+
+  const clipRegion = new Path2D();
+  clipRegion.rect(20, 20, 160, 160);
+  ctx.clip(clipRegion);
+
+  ctx.fillStyle = 'green';
+  ctx.fillRect(0, 0, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping.html
new file mode 100644
index 0000000000..7ced448144
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance-with-clipping.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.shadow-from-outside-canvas.short-distance-with-clipping-expected.html">
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.short-distance-with-clipping</title>
+<h1>2d.layer.shadow-from-outside-canvas.short-distance-with-clipping</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 1;
+
+  const clipRegion = new Path2D();
+  clipRegion.rect(20, 20, 160, 160);
+  ctx.clip(clipRegion);
+
+  ctx.beginLayer({filter: [
+      {name: 'dropShadow', dx: -(200 + delta),
+        dy: -(200 + delta), stdDeviation: 0,
+        floodColor: 'green'},
+      ]});
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(200 + delta, 200 + delta, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance.html
new file mode 100644
index 0000000000..37398400d1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.shadow-from-outside-canvas.short-distance.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.layer.shadow-from-outside-canvas.short-distance-expected.html">
+<title>Canvas test: 2d.layer.shadow-from-outside-canvas.short-distance</title>
+<h1>2d.layer.shadow-from-outside-canvas.short-distance</h1>
+<p class="desc">Checks shadow produced by object drawn outside the canvas</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  const delta = 1;
+
+  // No clipping.
+
+  ctx.beginLayer({filter: [
+      {name: 'dropShadow', dx: -(200 + delta),
+        dy: -(200 + delta), stdDeviation: 0,
+        floodColor: 'green'},
+      ]});
+
+  ctx.fillStyle = 'red';
+  ctx.fillRect(200 + delta, 200 + delta, 100, 100);
+
+  ctx.endLayer();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-endLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-endLayer.html
new file mode 100644
index 0000000000..609cb19a7d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-endLayer.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.layer.valid-calls.beginLayer-endLayer</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.layer.valid-calls.beginLayer-endLayer</h1>
+<p class="desc">No exception raised on beginLayer() + endLayer().</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("No exception raised on beginLayer() + endLayer().");
+_addTest(function(canvas, ctx) {
+
+  ctx.beginLayer();
+  ctx.save();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-save.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-save.html
new file mode 100644
index 0000000000..9658040296
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer-save.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.layer.valid-calls.beginLayer-save</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.layer.valid-calls.beginLayer-save</h1>
+<p class="desc">No exception raised on beginLayer() + save().</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("No exception raised on beginLayer() + save().");
+_addTest(function(canvas, ctx) {
+
+  ctx.beginLayer();
+  ctx.save();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer.html
new file mode 100644
index 0000000000..0556683331
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.beginLayer.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.valid-calls.beginLayer</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.layer.valid-calls.beginLayer</h1>
+<p class="desc">No exception raised on lone beginLayer() calls.</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("No exception raised on lone beginLayer() calls.");
+_addTest(function(canvas, ctx) {
+
+  ctx.beginLayer();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.restore.html
new file mode 100644
index 0000000000..b7a370306f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.restore.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.valid-calls.restore</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.layer.valid-calls.restore</h1>
+<p class="desc">No exception raised on lone restore() calls.</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("No exception raised on lone restore() calls.");
+_addTest(function(canvas, ctx) {
+
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save-beginLayer.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save-beginLayer.html
new file mode 100644
index 0000000000..816398c7fc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save-beginLayer.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.layer.valid-calls.save-beginLayer</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.layer.valid-calls.save-beginLayer</h1>
+<p class="desc">No exception raised on save() + beginLayer().</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("No exception raised on save() + beginLayer().");
+_addTest(function(canvas, ctx) {
+
+  ctx.save();
+  ctx.beginLayer();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save.html
new file mode 100644
index 0000000000..d8df8cedce
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.layer.valid-calls.save</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.layer.valid-calls.save</h1>
+<p class="desc">No exception raised on lone save() calls.</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("No exception raised on lone save() calls.");
+_addTest(function(canvas, ctx) {
+
+  ctx.save();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_reset_restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_reset_restore.html
new file mode 100644
index 0000000000..4c733263a6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_reset_restore.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.layer.valid-calls.save_reset_restore</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.layer.valid-calls.save_reset_restore</h1>
+<p class="desc">No exception raised on save() + reset() + restore().</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("No exception raised on save() + reset() + restore().");
+_addTest(function(canvas, ctx) {
+
+  ctx.save();
+  ctx.reset();
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_restore.html b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_restore.html
new file mode 100644
index 0000000000..27ae70278e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/layers/2d.layer.valid-calls.save_restore.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.layer.valid-calls.save_restore</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.layer.valid-calls.save_restore</h1>
+<p class="desc">No exception raised on save() + restore().</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("No exception raised on save() + restore().");
+_addTest(function(canvas, ctx) {
+
+  ctx.save();
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.html
new file mode 100644
index 0000000000..f8c7cab1f2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.butt.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.line.cap.butt</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.line.cap.butt</h1>
+<p class="desc">lineCap 'butt' is rendered correctly</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("lineCap 'butt' is rendered correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineCap = 'butt';
+  ctx.lineWidth = 20;
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+  ctx.fillRect(15, 15, 20, 20);
+  ctx.beginPath();
+  ctx.moveTo(25, 15);
+  ctx.lineTo(25, 35);
+  ctx.stroke();
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(75, 15);
+  ctx.lineTo(75, 35);
+  ctx.stroke();
+  ctx.fillRect(65, 15, 20, 20);
+
+  _assertPixel(canvas, 25,14, 0,255,0,255);
+  _assertPixel(canvas, 25,15, 0,255,0,255);
+  _assertPixel(canvas, 25,16, 0,255,0,255);
+  _assertPixel(canvas, 25,34, 0,255,0,255);
+  _assertPixel(canvas, 25,35, 0,255,0,255);
+  _assertPixel(canvas, 25,36, 0,255,0,255);
+
+  _assertPixel(canvas, 75,14, 0,255,0,255);
+  _assertPixel(canvas, 75,15, 0,255,0,255);
+  _assertPixel(canvas, 75,16, 0,255,0,255);
+  _assertPixel(canvas, 75,34, 0,255,0,255);
+  _assertPixel(canvas, 75,35, 0,255,0,255);
+  _assertPixel(canvas, 75,36, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.html
new file mode 100644
index 0000000000..263c6c6c76
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.closed.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.line.cap.closed</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.line.cap.closed</h1>
+<p class="desc">Line caps are not drawn at the corners of an unclosed rectangle</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("Line caps are not drawn at the corners of an unclosed rectangle");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineCap = 'square';
+  ctx.lineWidth = 400;
+
+  ctx.beginPath();
+  ctx.moveTo(200, 200);
+  ctx.lineTo(200, 1000);
+  ctx.lineTo(1000, 1000);
+  ctx.lineTo(1000, 200);
+  ctx.closePath();
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.html
new file mode 100644
index 0000000000..22e98ee326
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.invalid.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.line.cap.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.line.cap.invalid</h1>
+<p class="desc">Setting lineCap to invalid values is ignored</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("Setting lineCap to invalid values is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.lineCap = 'butt'
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+  ctx.lineCap = 'butt';
+  ctx.lineCap = 'invalid';
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+  ctx.lineCap = 'butt';
+  ctx.lineCap = 'ROUND';
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+  ctx.lineCap = 'butt';
+  ctx.lineCap = 'round\0';
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+  ctx.lineCap = 'butt';
+  ctx.lineCap = 'round ';
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+  ctx.lineCap = 'butt';
+  ctx.lineCap = "";
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+  ctx.lineCap = 'butt';
+  ctx.lineCap = 'bevel';
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.open.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.open.html
new file mode 100644
index 0000000000..6f7918a1c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.open.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.line.cap.open</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.line.cap.open</h1>
+<p class="desc">Line caps are drawn at the corners of an unclosed rectangle</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("Line caps are drawn at the corners of an unclosed rectangle");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineCap = 'square';
+  ctx.lineWidth = 400;
+
+  ctx.beginPath();
+  ctx.moveTo(200, 200);
+  ctx.lineTo(200, 1000);
+  ctx.lineTo(1000, 1000);
+  ctx.lineTo(1000, 200);
+  ctx.lineTo(200, 200);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html
new file mode 100644
index 0000000000..3990ad384e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.round.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.cap.round</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.line.cap.round</h1>
+<p class="desc">lineCap 'round' is rendered correctly</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("lineCap 'round' is rendered correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  var tol = 1; // tolerance to avoid antialiasing artifacts
+
+  ctx.lineCap = 'round';
+  ctx.lineWidth = 20;
+
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+
+  ctx.beginPath();
+  ctx.moveTo(35-tol, 15);
+  ctx.arc(25, 15, 10-tol, 0, Math.PI, true);
+  ctx.arc(25, 35, 10-tol, Math.PI, 0, true);
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.moveTo(25, 15);
+  ctx.lineTo(25, 35);
+  ctx.stroke();
+
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+
+  ctx.beginPath();
+  ctx.moveTo(75, 15);
+  ctx.lineTo(75, 35);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(85+tol, 15);
+  ctx.arc(75, 15, 10+tol, 0, Math.PI, true);
+  ctx.arc(75, 35, 10+tol, Math.PI, 0, true);
+  ctx.fill();
+
+  _assertPixel(canvas, 17,6, 0,255,0,255);
+  _assertPixel(canvas, 25,6, 0,255,0,255);
+  _assertPixel(canvas, 32,6, 0,255,0,255);
+  _assertPixel(canvas, 17,43, 0,255,0,255);
+  _assertPixel(canvas, 25,43, 0,255,0,255);
+  _assertPixel(canvas, 32,43, 0,255,0,255);
+
+  _assertPixel(canvas, 67,6, 0,255,0,255);
+  _assertPixel(canvas, 75,6, 0,255,0,255);
+  _assertPixel(canvas, 82,6, 0,255,0,255);
+  _assertPixel(canvas, 67,43, 0,255,0,255);
+  _assertPixel(canvas, 75,43, 0,255,0,255);
+  _assertPixel(canvas, 82,43, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.html
new file mode 100644
index 0000000000..8d6af320fe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.square.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.line.cap.square</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.line.cap.square</h1>
+<p class="desc">lineCap 'square' is rendered correctly</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("lineCap 'square' is rendered correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineCap = 'square';
+  ctx.lineWidth = 20;
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+  ctx.fillRect(15, 5, 20, 40);
+  ctx.beginPath();
+  ctx.moveTo(25, 15);
+  ctx.lineTo(25, 35);
+  ctx.stroke();
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(75, 15);
+  ctx.lineTo(75, 35);
+  ctx.stroke();
+  ctx.fillRect(65, 5, 20, 40);
+
+  _assertPixel(canvas, 25,4, 0,255,0,255);
+  _assertPixel(canvas, 25,5, 0,255,0,255);
+  _assertPixel(canvas, 25,6, 0,255,0,255);
+  _assertPixel(canvas, 25,44, 0,255,0,255);
+  _assertPixel(canvas, 25,45, 0,255,0,255);
+  _assertPixel(canvas, 25,46, 0,255,0,255);
+
+  _assertPixel(canvas, 75,4, 0,255,0,255);
+  _assertPixel(canvas, 75,5, 0,255,0,255);
+  _assertPixel(canvas, 75,6, 0,255,0,255);
+  _assertPixel(canvas, 75,44, 0,255,0,255);
+  _assertPixel(canvas, 75,45, 0,255,0,255);
+  _assertPixel(canvas, 75,46, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.html
new file mode 100644
index 0000000000..a11d32030e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cap.valid.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.cap.valid</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.line.cap.valid</h1>
+<p class="desc">Setting lineCap to valid values works</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("Setting lineCap to valid values works");
+_addTest(function(canvas, ctx) {
+
+  ctx.lineCap = 'butt'
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+
+  ctx.lineCap = 'round';
+  _assertSame(ctx.lineCap, 'round', "ctx.lineCap", "'round'");
+
+  ctx.lineCap = 'square';
+  _assertSame(ctx.lineCap, 'square', "ctx.lineCap", "'square'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cross.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cross.html
new file mode 100644
index 0000000000..e6866e3e40
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.cross.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.line.cross</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.line.cross</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.lineWidth = 200;
+  ctx.lineJoin = 'bevel';
+
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(110, 50);
+  ctx.lineTo(110, 60);
+  ctx.lineTo(100, 60);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.html
new file mode 100644
index 0000000000..daa4634387
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.defaults.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.line.defaults</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.line.defaults</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.lineWidth, 1, "ctx.lineWidth", "1");
+  _assertSame(ctx.lineCap, 'butt', "ctx.lineCap", "'butt'");
+  _assertSame(ctx.lineJoin, 'miter', "ctx.lineJoin", "'miter'");
+  _assertSame(ctx.miterLimit, 10, "ctx.miterLimit", "10");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.fill.noop.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.fill.noop.html
new file mode 100644
index 0000000000..6dd8804ab0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.fill.noop.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.line.fill.noop</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.line.fill.noop</h1>
+<p class="desc">Filling a line draws nothing</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("Filling a line draws nothing");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.lineWidth = 20;
+  ctx.beginPath();
+  ctx.moveTo(10, 20);
+  ctx.lineTo(90, 30);
+  ctx.fill();
+  _assertPixel(canvas, 50,24, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 50,26, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.invalid.strokestyle.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.invalid.strokestyle.html
new file mode 100644
index 0000000000..89a234ecc3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.invalid.strokestyle.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.line.invalid.strokestyle</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.line.invalid.strokestyle</h1>
+<p class="desc">Verify correct behavior of canvas on an invalid strokeStyle()</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("Verify correct behavior of canvas on an invalid strokeStyle()");
+_addTest(function(canvas, ctx) {
+
+  ctx.strokeStyle = 'rgb(0, 255, 0)';
+  ctx.strokeStyle = 'nonsense';
+  ctx.lineWidth = 200;
+  ctx.moveTo(0,100);
+  ctx.lineTo(200,100);
+  ctx.stroke();
+  var imageData = ctx.getImageData(0, 0, 200, 200);
+  var imgdata = imageData.data;
+  _assert(imgdata[4] == 0, "imgdata[\""+(4)+"\"] == 0");
+  _assert(imgdata[5] == 255, "imgdata[\""+(5)+"\"] == 255");
+  _assert(imgdata[6] == 0, "imgdata[\""+(6)+"\"] == 0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html
new file mode 100644
index 0000000000..041e9a1605
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.bevel.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.join.bevel</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.line.join.bevel</h1>
+<p class="desc">lineJoin 'bevel' is rendered correctly</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("lineJoin 'bevel' is rendered correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  var tol = 1; // tolerance to avoid antialiasing artifacts
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineWidth = 20;
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+
+  ctx.fillRect(10, 10, 20, 20);
+  ctx.fillRect(20, 20, 20, 20);
+  ctx.beginPath();
+  ctx.moveTo(30, 20);
+  ctx.lineTo(40-tol, 20);
+  ctx.lineTo(30, 10+tol);
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.moveTo(10, 20);
+  ctx.lineTo(30, 20);
+  ctx.lineTo(30, 40);
+  ctx.stroke();
+
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+
+  ctx.beginPath();
+  ctx.moveTo(60, 20);
+  ctx.lineTo(80, 20);
+  ctx.lineTo(80, 40);
+  ctx.stroke();
+
+  ctx.fillRect(60, 10, 20, 20);
+  ctx.fillRect(70, 20, 20, 20);
+  ctx.beginPath();
+  ctx.moveTo(80, 20);
+  ctx.lineTo(90+tol, 20);
+  ctx.lineTo(80, 10-tol);
+  ctx.fill();
+
+  _assertPixel(canvas, 34,16, 0,255,0,255);
+  _assertPixel(canvas, 34,15, 0,255,0,255);
+  _assertPixel(canvas, 35,15, 0,255,0,255);
+  _assertPixel(canvas, 36,15, 0,255,0,255);
+  _assertPixel(canvas, 36,14, 0,255,0,255);
+
+  _assertPixel(canvas, 84,16, 0,255,0,255);
+  _assertPixel(canvas, 84,15, 0,255,0,255);
+  _assertPixel(canvas, 85,15, 0,255,0,255);
+  _assertPixel(canvas, 86,15, 0,255,0,255);
+  _assertPixel(canvas, 86,14, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.html
new file mode 100644
index 0000000000..a52219ccce
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.closed.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.line.join.closed</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.line.join.closed</h1>
+<p class="desc">Line joins are drawn at the corner of a closed rectangle</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("Line joins are drawn at the corner of a closed rectangle");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineJoin = 'miter';
+  ctx.lineWidth = 200;
+
+  ctx.beginPath();
+  ctx.moveTo(100, 50);
+  ctx.lineTo(100, 1000);
+  ctx.lineTo(1000, 1000);
+  ctx.lineTo(1000, 50);
+  ctx.closePath();
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.html
new file mode 100644
index 0000000000..3c34ef3475
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.invalid.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.line.join.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.line.join.invalid</h1>
+<p class="desc">Setting lineJoin to invalid values is ignored</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("Setting lineJoin to invalid values is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.lineJoin = 'bevel'
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineJoin = 'invalid';
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineJoin = 'ROUND';
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineJoin = 'round\0';
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineJoin = 'round ';
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineJoin = "";
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+  ctx.lineJoin = 'bevel';
+  ctx.lineJoin = 'butt';
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.miter.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.miter.html
new file mode 100644
index 0000000000..5a3472e92d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.miter.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.join.miter</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.line.join.miter</h1>
+<p class="desc">lineJoin 'miter' is rendered correctly</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("lineJoin 'miter' is rendered correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineJoin = 'miter';
+  ctx.lineWidth = 20;
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+
+  ctx.fillRect(10, 10, 30, 20);
+  ctx.fillRect(20, 10, 20, 30);
+
+  ctx.beginPath();
+  ctx.moveTo(10, 20);
+  ctx.lineTo(30, 20);
+  ctx.lineTo(30, 40);
+  ctx.stroke();
+
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+
+  ctx.beginPath();
+  ctx.moveTo(60, 20);
+  ctx.lineTo(80, 20);
+  ctx.lineTo(80, 40);
+  ctx.stroke();
+
+  ctx.fillRect(60, 10, 30, 20);
+  ctx.fillRect(70, 10, 20, 30);
+
+  _assertPixel(canvas, 38,12, 0,255,0,255);
+  _assertPixel(canvas, 39,11, 0,255,0,255);
+  _assertPixel(canvas, 40,10, 0,255,0,255);
+  _assertPixel(canvas, 41,9, 0,255,0,255);
+  _assertPixel(canvas, 42,8, 0,255,0,255);
+
+  _assertPixel(canvas, 88,12, 0,255,0,255);
+  _assertPixel(canvas, 89,11, 0,255,0,255);
+  _assertPixel(canvas, 90,10, 0,255,0,255);
+  _assertPixel(canvas, 91,9, 0,255,0,255);
+  _assertPixel(canvas, 92,8, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.html
new file mode 100644
index 0000000000..55b7a8b49e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.open.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.line.join.open</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.line.join.open</h1>
+<p class="desc">Line joins are not drawn at the corner of an unclosed rectangle</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("Line joins are not drawn at the corner of an unclosed rectangle");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineJoin = 'miter';
+  ctx.lineWidth = 200;
+
+  ctx.beginPath();
+  ctx.moveTo(100, 50);
+  ctx.lineTo(100, 1000);
+  ctx.lineTo(1000, 1000);
+  ctx.lineTo(1000, 50);
+  ctx.lineTo(100, 50);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.html
new file mode 100644
index 0000000000..cd736b503d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.parallel.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.line.join.parallel</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.line.join.parallel</h1>
+<p class="desc">Line joins are drawn at 180-degree joins</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("Line joins are drawn at 180-degree joins");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 300;
+  ctx.lineJoin = 'round';
+  ctx.beginPath();
+  ctx.moveTo(-100, 25);
+  ctx.lineTo(0, 25);
+  ctx.lineTo(-100, 25);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html
new file mode 100644
index 0000000000..fb968b9966
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.round.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.join.round</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.line.join.round</h1>
+<p class="desc">lineJoin 'round' is rendered correctly</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("lineJoin 'round' is rendered correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  var tol = 1; // tolerance to avoid antialiasing artifacts
+
+  ctx.lineJoin = 'round';
+  ctx.lineWidth = 20;
+
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+
+  ctx.fillRect(10, 10, 20, 20);
+  ctx.fillRect(20, 20, 20, 20);
+  ctx.beginPath();
+  ctx.moveTo(30, 20);
+  ctx.arc(30, 20, 10-tol, 0, 2*Math.PI, true);
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.moveTo(10, 20);
+  ctx.lineTo(30, 20);
+  ctx.lineTo(30, 40);
+  ctx.stroke();
+
+
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+
+  ctx.beginPath();
+  ctx.moveTo(60, 20);
+  ctx.lineTo(80, 20);
+  ctx.lineTo(80, 40);
+  ctx.stroke();
+
+  ctx.fillRect(60, 10, 20, 20);
+  ctx.fillRect(70, 20, 20, 20);
+  ctx.beginPath();
+  ctx.moveTo(80, 20);
+  ctx.arc(80, 20, 10+tol, 0, 2*Math.PI, true);
+  ctx.fill();
+
+  _assertPixel(canvas, 36,14, 0,255,0,255);
+  _assertPixel(canvas, 36,13, 0,255,0,255);
+  _assertPixel(canvas, 37,13, 0,255,0,255);
+  _assertPixel(canvas, 38,13, 0,255,0,255);
+  _assertPixel(canvas, 38,12, 0,255,0,255);
+
+  _assertPixel(canvas, 86,14, 0,255,0,255);
+  _assertPixel(canvas, 86,13, 0,255,0,255);
+  _assertPixel(canvas, 87,13, 0,255,0,255);
+  _assertPixel(canvas, 88,13, 0,255,0,255);
+  _assertPixel(canvas, 88,12, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.html
new file mode 100644
index 0000000000..3e5e200cb5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.join.valid.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.join.valid</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.line.join.valid</h1>
+<p class="desc">Setting lineJoin to valid values works</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("Setting lineJoin to valid values works");
+_addTest(function(canvas, ctx) {
+
+  ctx.lineJoin = 'bevel'
+  _assertSame(ctx.lineJoin, 'bevel', "ctx.lineJoin", "'bevel'");
+
+  ctx.lineJoin = 'round';
+  _assertSame(ctx.lineJoin, 'round', "ctx.lineJoin", "'round'");
+
+  ctx.lineJoin = 'miter';
+  _assertSame(ctx.lineJoin, 'miter', "ctx.lineJoin", "'miter'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.acute.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.acute.html
new file mode 100644
index 0000000000..6acba4f3d2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.acute.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.line.miter.acute</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.line.miter.acute</h1>
+<p class="desc">Miter joins are drawn correctly with acute angles</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("Miter joins are drawn correctly with acute angles");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 200;
+  ctx.lineJoin = 'miter';
+
+  ctx.strokeStyle = '#0f0';
+  ctx.miterLimit = 2.614;
+  ctx.beginPath();
+  ctx.moveTo(100, 1000);
+  ctx.lineTo(100, 100);
+  ctx.lineTo(1000, 1000);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.miterLimit = 2.613;
+  ctx.beginPath();
+  ctx.moveTo(100, 1000);
+  ctx.lineTo(100, 100);
+  ctx.lineTo(1000, 1000);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.html
new file mode 100644
index 0000000000..542851d580
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.exceeded.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.line.miter.exceeded</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.line.miter.exceeded</h1>
+<p class="desc">Miter joins are not drawn when the miter limit is exceeded</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("Miter joins are not drawn when the miter limit is exceeded");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 400;
+  ctx.lineJoin = 'miter';
+
+  ctx.strokeStyle = '#f00';
+  ctx.miterLimit = 1.414;
+  ctx.beginPath();
+  ctx.moveTo(200, 1000);
+  ctx.lineTo(200, 200);
+  ctx.lineTo(1000, 201); // slightly non-right-angle to avoid being a special case
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html
new file mode 100644
index 0000000000..826a6e24a7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.invalid.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.miter.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.line.miter.invalid</h1>
+<p class="desc">Setting miterLimit to invalid values is ignored</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("Setting miterLimit to invalid values is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.miterLimit = 1.5;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = 0;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = -1;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = Infinity;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = -Infinity;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = NaN;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = 'string';
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = true;
+  _assertSame(ctx.miterLimit, 1, "ctx.miterLimit", "1");
+
+  ctx.miterLimit = 1.5;
+  ctx.miterLimit = false;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.html
new file mode 100644
index 0000000000..68eeb06162
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.lineedge.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.line.miter.lineedge</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.line.miter.lineedge</h1>
+<p class="desc">Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle</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("Miter joins are not drawn when the miter limit is exceeded at the corners of a zero-height rectangle");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 200;
+  ctx.lineJoin = 'miter';
+
+  ctx.strokeStyle = '#f00';
+  ctx.miterLimit = 1.414;
+  ctx.beginPath();
+  ctx.strokeRect(100, 25, 200, 0);
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.html
new file mode 100644
index 0000000000..2dd08f6afc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.obtuse.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.line.miter.obtuse</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.line.miter.obtuse</h1>
+<p class="desc">Miter joins are drawn correctly with obtuse angles</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("Miter joins are drawn correctly with obtuse angles");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 1600;
+  ctx.lineJoin = 'miter';
+
+  ctx.strokeStyle = '#0f0';
+  ctx.miterLimit = 1.083;
+  ctx.beginPath();
+  ctx.moveTo(800, 10000);
+  ctx.lineTo(800, 300);
+  ctx.lineTo(10000, -8900);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.miterLimit = 1.082;
+  ctx.beginPath();
+  ctx.moveTo(800, 10000);
+  ctx.lineTo(800, 300);
+  ctx.lineTo(10000, -8900);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.html
new file mode 100644
index 0000000000..7ae9f5e232
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.rightangle.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.line.miter.rightangle</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.line.miter.rightangle</h1>
+<p class="desc">Miter joins are not drawn when the miter limit is exceeded, on exact right angles</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("Miter joins are not drawn when the miter limit is exceeded, on exact right angles");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 400;
+  ctx.lineJoin = 'miter';
+
+  ctx.strokeStyle = '#f00';
+  ctx.miterLimit = 1.414;
+  ctx.beginPath();
+  ctx.moveTo(200, 1000);
+  ctx.lineTo(200, 200);
+  ctx.lineTo(1000, 200);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.html
new file mode 100644
index 0000000000..51b00c292d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.valid.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.line.miter.valid</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.line.miter.valid</h1>
+<p class="desc">Setting miterLimit to valid values works</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("Setting miterLimit to valid values works");
+_addTest(function(canvas, ctx) {
+
+  ctx.miterLimit = 1.5;
+  _assertSame(ctx.miterLimit, 1.5, "ctx.miterLimit", "1.5");
+
+  ctx.miterLimit = "1e1";
+  _assertSame(ctx.miterLimit, 10, "ctx.miterLimit", "10");
+
+  ctx.miterLimit = 1/1024;
+  _assertSame(ctx.miterLimit, 1/1024, "ctx.miterLimit", "1/1024");
+
+  ctx.miterLimit = 1000;
+  _assertSame(ctx.miterLimit, 1000, "ctx.miterLimit", "1000");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.within.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.within.html
new file mode 100644
index 0000000000..f438866009
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.miter.within.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.line.miter.within</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.line.miter.within</h1>
+<p class="desc">Miter joins are drawn when the miter limit is not quite exceeded</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("Miter joins are drawn when the miter limit is not quite exceeded");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 400;
+  ctx.lineJoin = 'miter';
+
+  ctx.strokeStyle = '#0f0';
+  ctx.miterLimit = 1.416;
+  ctx.beginPath();
+  ctx.moveTo(200, 1000);
+  ctx.lineTo(200, 200);
+  ctx.lineTo(1000, 201);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.html
new file mode 100644
index 0000000000..9d43cebee7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.union.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.line.union</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.line.union</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.lineWidth = 100;
+  ctx.lineCap = 'round';
+
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 24);
+  ctx.lineTo(100, 25);
+  ctx.lineTo(0, 26);
+  ctx.closePath();
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 25,1, 0,255,0,255);
+  _assertPixel(canvas, 48,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixel(canvas, 25,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html
new file mode 100644
index 0000000000..f2e9a9f86d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.basic.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.width.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.line.width.basic</h1>
+<p class="desc">lineWidth determines the width of line strokes</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("lineWidth determines the width of line strokes");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 20;
+  // Draw a green line over a red box, to check the line is not too small
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+  ctx.fillRect(15, 15, 20, 20);
+  ctx.beginPath();
+  ctx.moveTo(25, 15);
+  ctx.lineTo(25, 35);
+  ctx.stroke();
+
+  // Draw a green box over a red line, to check the line is not too large
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(75, 15);
+  ctx.lineTo(75, 35);
+  ctx.stroke();
+  ctx.fillRect(65, 15, 20, 20);
+
+  _assertPixel(canvas, 14,25, 0,255,0,255);
+  _assertPixel(canvas, 15,25, 0,255,0,255);
+  _assertPixel(canvas, 16,25, 0,255,0,255);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 34,25, 0,255,0,255);
+  _assertPixel(canvas, 35,25, 0,255,0,255);
+  _assertPixel(canvas, 36,25, 0,255,0,255);
+
+  _assertPixel(canvas, 64,25, 0,255,0,255);
+  _assertPixel(canvas, 65,25, 0,255,0,255);
+  _assertPixel(canvas, 66,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+  _assertPixel(canvas, 84,25, 0,255,0,255);
+  _assertPixel(canvas, 85,25, 0,255,0,255);
+  _assertPixel(canvas, 86,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html
new file mode 100644
index 0000000000..363060cf6d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.invalid.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.width.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.line.width.invalid</h1>
+<p class="desc">Setting lineWidth to invalid values is ignored</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("Setting lineWidth to invalid values is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.lineWidth = 1.5;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = 0;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = -1;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = Infinity;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = -Infinity;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = NaN;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = 'string';
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = true;
+  _assertSame(ctx.lineWidth, 1, "ctx.lineWidth", "1");
+
+  ctx.lineWidth = 1.5;
+  ctx.lineWidth = false;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.html
new file mode 100644
index 0000000000..6c4ec52b5d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.scaledefault.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.line.width.scaledefault</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.line.width.scaledefault</h1>
+<p class="desc">Default lineWidth strokes are affected by scale transformations</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("Default lineWidth strokes are affected by scale transformations");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.scale(50, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.moveTo(0, 0.5);
+  ctx.lineTo(2, 0.5);
+  ctx.stroke();
+
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+  _assertPixel(canvas, 50,5, 0,255,0,255);
+  _assertPixel(canvas, 50,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.html
new file mode 100644
index 0000000000..600ce93fb7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.transformed.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.line.width.transformed</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.line.width.transformed</h1>
+<p class="desc">Line stroke widths are affected by scale transformations</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("Line stroke widths are affected by scale transformations");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 4;
+  // Draw a green line over a red box, to check the line is not too small
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+  ctx.fillRect(15, 15, 20, 20);
+  ctx.save();
+   ctx.scale(5, 1);
+   ctx.beginPath();
+   ctx.moveTo(5, 15);
+   ctx.lineTo(5, 35);
+   ctx.stroke();
+  ctx.restore();
+
+  // Draw a green box over a red line, to check the line is not too large
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.save();
+   ctx.scale(-5, 1);
+   ctx.beginPath();
+   ctx.moveTo(-15, 15);
+   ctx.lineTo(-15, 35);
+   ctx.stroke();
+  ctx.restore();
+  ctx.fillRect(65, 15, 20, 20);
+
+  _assertPixel(canvas, 14,25, 0,255,0,255);
+  _assertPixel(canvas, 15,25, 0,255,0,255);
+  _assertPixel(canvas, 16,25, 0,255,0,255);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 34,25, 0,255,0,255);
+  _assertPixel(canvas, 35,25, 0,255,0,255);
+  _assertPixel(canvas, 36,25, 0,255,0,255);
+
+  _assertPixel(canvas, 64,25, 0,255,0,255);
+  _assertPixel(canvas, 65,25, 0,255,0,255);
+  _assertPixel(canvas, 66,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+  _assertPixel(canvas, 84,25, 0,255,0,255);
+  _assertPixel(canvas, 85,25, 0,255,0,255);
+  _assertPixel(canvas, 86,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.html b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.html
new file mode 100644
index 0000000000..1a76b0ed4c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/line-styles/2d.line.width.valid.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.line.width.valid</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.line.width.valid</h1>
+<p class="desc">Setting lineWidth to valid values works</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("Setting lineWidth to valid values works");
+_addTest(function(canvas, ctx) {
+
+  ctx.lineWidth = 1.5;
+  _assertSame(ctx.lineWidth, 1.5, "ctx.lineWidth", "1.5");
+
+  ctx.lineWidth = "1e1";
+  _assertSame(ctx.lineWidth, 10, "ctx.lineWidth", "10");
+
+  ctx.lineWidth = 1/1024;
+  _assertSame(ctx.lineWidth, 1/1024, "ctx.lineWidth", "1/1024");
+
+  ctx.lineWidth = 1000;
+  _assertSame(ctx.lineWidth, 1000, "ctx.lineWidth", "1000");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/manual/README.md b/testing/web-platform/tests/html/canvas/element/manual/README.md
new file mode 100644
index 0000000000..68d877200b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/README.md
@@ -0,0 +1 @@
+This folder contains tests that were manually added to the repository. All other tests have been autogenerated by html/canvas/tools/build.sh
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001-ref.htm
new file mode 100644
index 0000000000..31ddfcafd9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001-ref.htm
@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  arcTo() adds to subpath if same point</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+                ctx.moveTo(0, 50);
+
+                ctx.lineTo(100, 50);
+                ctx.stroke();
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: If x1,y1 and x2,y2 are the same point, then arcTo must add x1,y1 to the subpath, and connect that point to x0,y0 with a straight line.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas (test ref).</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001.htm b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001.htm
new file mode 100644
index 0000000000..c3f2fb6f43
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_arcto_001.htm
@@ -0,0 +1,26 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  arcTo() adds to subpath if same point</title>
+        <link rel="match" href="canvas_complexshapes_arcto_001-ref.htm">
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-arcto" />
+        <meta name="assert" content="If x1,y1 and x2,y2 are the same point, then arcTo must add x1,y1 to the subpath, and connect that point to x0,y0 with a straight line." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+                ctx.moveTo(0, 50);
+
+                // Since (x1, y1) and (x2, y2) are the same point, (x1, y1) must be added to the subpath, thus creating a line.
+                ctx.arcTo(100, 50, 100, 50, 10);
+                ctx.stroke();
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: If x1,y1 and x2,y2 are the same point, then arcTo must add x1,y1 to the subpath, and connect that point to x0,y0 with a straight line.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001-ref.htm
new file mode 100644
index 0000000000..6be08c0b3c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001-ref.htm
@@ -0,0 +1,32 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  bezierCurveTo() must ensure subpaths</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                ctx.moveTo(65,25)
+                ctx.bezierCurveTo(65, 25, 65, 25, 65, 65);
+                ctx.stroke();
+                ctx.beginPath();
+
+                ctx.moveTo(35,25)
+                ctx.bezierCurveTo(35, 25, 35, 25, 35, 65);
+                ctx.stroke();
+                ctx.beginPath();
+
+                ctx.moveTo(0,75)
+                ctx.bezierCurveTo(0, 75, 50, 150, 100, 75);
+                ctx.stroke();
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) must ensure there is a subpath for the point (cp1x,cp1y) if the context has no subpaths, then it must connect the last point in the subpath to the point (x,y).</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas (ref test).</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001.htm b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001.htm
new file mode 100644
index 0000000000..d04926ebac
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/building-paths/canvas_complexshapes_beziercurveto_001.htm
@@ -0,0 +1,35 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  bezierCurveTo() must ensure subpaths</title>
+        <link rel="match" href="canvas_complexshapes_beziercurveto_001-ref.htm">
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-beziercurveto" />
+        <meta name="assert" content="bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) must ensure there is a subpath for the point (cp1x,cp1y) if the context has no subpaths, then it must connect the last point in the subpath to the point (x,y)." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Since the canvas has no subpaths, a virtual moveTo must be performed to (65,25) before creating the bezier.
+                ctx.bezierCurveTo(65, 25, 65, 25, 65, 65);
+                ctx.stroke();
+                ctx.beginPath();
+
+                // Since the canvas has no subpaths, a virtual moveTo must be performed to (35,25) before creating the bezier.
+                ctx.bezierCurveTo(35, 25, 35, 25, 35, 65);
+                ctx.stroke();
+                ctx.beginPath();
+
+                // Since the canvas has no subpaths, a virtual moveTo must be performed to (0,75) before creating the bezier.
+                ctx.bezierCurveTo(0, 75, 50, 150, 100, 75);
+                ctx.stroke();
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) must ensure there is a subpath for the point (cp1x,cp1y) if the context has no subpaths, then it must connect the last point in the subpath to the point (x,y).</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow-ref.html b/testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow-ref.html
new file mode 100644
index 0000000000..3ff0ed291d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow-ref.html
@@ -0,0 +1,15 @@
+<body>
+<script>
+var canvas, ctx;
+canvas = document.createElement("canvas");
+canvas.width = 100;
+canvas.height = 100;
+document.body.appendChild(canvas);
+
+ctx = canvas.getContext("2d");
+ctx.globalAlpha = 0.5;
+ctx.shadowOffsetX = -canvas.width;
+ctx.shadowColor = 'red';
+ctx.fillRect(canvas.width,0,canvas.width,canvas.height);
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow.html b/testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow.html
new file mode 100644
index 0000000000..1df227ce0b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/compositing/alpha_filter_shadow.html
@@ -0,0 +1,16 @@
+<body>
+<script>
+var canvas, ctx;
+canvas = document.createElement("canvas");
+canvas.width = 100;
+canvas.height = 100;
+document.body.appendChild(canvas);
+
+ctx = canvas.getContext("2d");
+ctx.globalAlpha = 0.5;
+ctx.shadowOffsetX = -canvas.width;
+ctx.shadowColor = 'red';
+ctx.filter = 'sepia(0)';
+ctx.fillRect(canvas.width,0,canvas.width,canvas.height);
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001-ref.htm
new file mode 100644
index 0000000000..70196fb36a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001-ref.htm
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  globalCompositeOperation "destination-over"</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+    </head>
+    <body>
+        <p>Description: If the globalCompositeOperation is set to "destination-over", display the destination image wherever the destination image is opaque.</p>
+        <div><img alt='black rectangle' src="/images/black-rectangle.png"></div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001.htm b/testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001.htm
new file mode 100644
index 0000000000..8d6208eb32
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/compositing/canvas_compositing_globalcompositeoperation_001.htm
@@ -0,0 +1,32 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  globalCompositeOperation "destination-over"</title>
+        <link rel="match" href="canvas_compositing_globalcompositeoperation_001-ref.htm">
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-globalcompositeoperation" />
+        <meta name="assert" content="If the globalCompositeOperation is set to 'destination-over', display the destination image wherever the destination image is opaque." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Source image.
+                ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
+                ctx.fillRect(0, 0, 100, 50);
+
+                // Assign the globalCompositeOperation.
+                ctx.globalCompositeOperation = "destination-over";
+
+                // Destination image.
+                ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
+                ctx.fillRect(0, 0, 100, 50);
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: If the globalCompositeOperation is set to "destination-over", display the destination image wherever the destination image is opaque.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/canvas-with-padding.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/canvas-with-padding.html
new file mode 100644
index 0000000000..5a93ef680a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/canvas-with-padding.html
@@ -0,0 +1,10 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id='c' style="padding-right: 4294967292; border-right: 124px solid black;"></canvas>
+<script>
+    test(function(t) {
+        var canvas = document.getElementById('c');
+        var ctx = canvas.getContext('2d');
+        ctx.getImageData(0, 0, 1, 1);
+    }, '// The test case passes by not crashing.')
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false-ref.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false-ref.html
new file mode 100644
index 0000000000..eccfc4e2cc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, fillRect with semi-transparent color.</title>
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = 'black';
+ctx.fillRect(-1, -1, 102, 102);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false.html
new file mode 100644
index 0000000000..a328fbf97a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/clearRect_alpha_false.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, clearRect</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#concept-canvas-alpha">
+<link rel="match" href="clearRect_alpha_false-ref.html">
+<meta name="assert" content="Canvas pixels remain opaque black when drawing semi-transparent rectangle.">
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d", {alpha: false});
+ctx.fillColor = 'red';
+ctx.fillRect(25, 25, 50, 25);
+ctx.clearRect(24, 24, 52, 52);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false-ref.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false-ref.html
new file mode 100644
index 0000000000..2c9e5620b2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, drawing a transparent image.</title>
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = 'black';
+ctx.fillRect(-1, -1, 102, 102);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false.html
new file mode 100644
index 0000000000..64f38bceb1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/drawImage_alpha_false.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, drawing a transparent image</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#concept-canvas-alpha">
+<link rel="match" href="drawImage_alpha_false-ref.html">
+<meta name="assert" content="Canvas pixels remain opaque black when drawing a transparent image.">
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const source = document.createElement('canvas');
+source.width = source.height = 20;
+const source_ctx = source.getContext("2d"); // leave default transparent content
+
+const ctx = document.getElementById("c").getContext("2d", {alpha: false});
+ctx.globalCompositOperation = 'copy';
+ctx.drawImage(source, 0, 0);
+ctx.globalCompositOperation = 'source-over';
+ctx.drawImage(source, 20, 0);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false-ref.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false-ref.html
new file mode 100644
index 0000000000..eccfc4e2cc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, fillRect with semi-transparent color.</title>
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = 'black';
+ctx.fillRect(-1, -1, 102, 102);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false.html
new file mode 100644
index 0000000000..143756eb0c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fillRect_alpha_false.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, fillRect with semi-transparent color.</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#concept-canvas-alpha">
+<link rel="match" href="fillRect_alpha_false-ref.html">
+<meta name="assert" content="Canvas pixels remain opaque black when drawing semi-transparent rectangle.">
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d", {alpha: false});
+ctx.fillColor = "rgba(0, 0, 0, 0.5)";
+ctx.fillRect(25, 25, 50, 50);
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false-ref.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false-ref.html
new file mode 100644
index 0000000000..03265a656e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, path fill with transparent color and 'copy' composite operation.</title>
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = 'black';
+ctx.fillRect(-1, -1, 102, 102);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false.html
new file mode 100644
index 0000000000..7872a79380
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/fill_alpha_false.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase, path fill with transparent color and 'copy' composite operation.</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#concept-canvas-alpha">
+<link rel="match" href="fill_alpha_false-ref.html">
+<meta name="assert" content="Canvas pixels remain opaque black when filling path with tranparent pixels and 'copy' compisite op.">
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d", {alpha: false});
+ctx.fillColor = 'red';
+ctx.fillRect(25, 25, 50, 25); // will be overwritten.
+ctx.fillColor = "rgba(0, 0, 0, 0.0)";
+ctx.globalCompositeOperation = 'copy';
+ctx.rect(25, 25, 50, 50);
+ctx.fill();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html
new file mode 100644
index 0000000000..47b3d96233
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/getContextAttributes.html
@@ -0,0 +1,46 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<script>
+
+var testScenarios = [
+    {testDescription: "Test default context creation attributes",
+        canvasContextAttributes: {},
+        expectedContextAttributes: {alpha: true, desynchronized: false, willReadFrequently: false}},
+    {testDescription: "Test context creation attributes alpha: true",
+        canvasContextAttributes: {alpha: true},
+        expectedContextAttributes: {alpha: true}},
+    {testDescription: "Test context creation attributes alpha: false",
+        canvasContextAttributes: {alpha: false},
+        expectedContextAttributes: {alpha: false}},
+    {testDescription: "Test context creation attributes desynchronized: false",
+        canvasContextAttributes: {desynchronized: false},
+        expectedContextAttributes: {desynchronized: false}},
+    {testDescription: "Test context creation attributes willReadFrequently: true",
+        canvasContextAttributes: {willReadFrequently: true},
+        expectedContextAttributes: {willReadFrequently: true}},
+];
+
+function runTestScenario(testScenario) {
+    var t = test(function() {
+        var canvas = document. createElement('canvas');
+        var ctx = canvas.getContext('2d', testScenario.canvasContextAttributes);
+        var contextAttributes = ctx.getContextAttributes();
+        if (testScenario.expectedContextAttributes.alpha !== undefined) {
+            assert_equals(contextAttributes.alpha,
+                testScenario.expectedContextAttributes.alpha);
+        }
+        if (testScenario.expectedContextAttributes.desynchronized !== undefined) {
+            assert_equals(contextAttributes.desynchronized,
+                testScenario.expectedContextAttributes.desynchronized);
+        }
+    }, testScenario.testDescription);
+}
+
+function runAllTests() {
+    for (var i = 0; i < testScenarios.length; i++)
+        runTestScenario(testScenarios[i]);
+}
+
+runAllTests();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false-ref.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false-ref.html
new file mode 100644
index 0000000000..b67513c464
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase context creation parameter is initialized with solid black.</title>
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = 'black';
+ctx.fillRect(-1, -1, 102, 102);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false.html
new file mode 100644
index 0000000000..9e86e5ce2c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/initial_color_alpha_false.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase context creation parameter is initialized with solid black.</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#concept-canvas-alpha">
+<link rel="match" href="initial_color_alpha_false-ref.html">
+<meta name="assert" content="Canvas pixels are initialized to opaque black when alpha attribute is false.">
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+document.getElementById("c").getContext("2d", {alpha: false});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false-ref.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false-ref.html
new file mode 100644
index 0000000000..d663131148
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase context creation parameter is re-initialized with solid black.</title>
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const ctx = document.getElementById("c").getContext("2d");
+ctx.fillStyle = 'black';
+ctx.fillRect(-1, -1, 102, 102);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false.html b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false.html
new file mode 100644
index 0000000000..191975e0f4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/context-attributes/reset_color_alpha_false.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext 2D with alpha=flase context creation parameter is re-initialized with solid black.</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<link rel="help" href="https://html.spec.whatwg.org/#concept-canvas-alpha">
+<link rel="match" href="reset_color_alpha_false-ref.html">
+<meta name="assert" content="Canvas pixels are re-initialized to opaque black upon context reset.">
+<p>Test passes if a 100x100 black square is displayed below.</p>
+<canvas id="c" width=100 height=100></canvas>
+<script>
+const canvas = document.getElementById("c");
+const ctx = canvas.getContext("2d", {alpha: false});
+ctx.fillColor = 'red';
+ctx.fillRect(25, 25, 50, 50);
+canvas.width = canvas.width;
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas.html
new file mode 100644
index 0000000000..36bd085136
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas.html
@@ -0,0 +1,203 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceCanvasWidth = sourceCanvasHeight = 50;
+var destCanvasWidth = destCanvasHeight = 100;
+var blueRect = {x: 0, y: 0, w: 50, h: 50};
+var blackRect = {x: 5, y: 5, w: 40, h: 40};
+var redPixel = [255, 0, 0, 255];
+var bluePixel = [0, 0, 255, 255];
+var blackPixel = [0, 0, 0, 255];
+var transparentBlackPixel = [0, 0, 0, 0];
+
+var destCanvas = document.getElementById('dest');
+var destCtx = destCanvas.getContext('2d');
+destCtx.imageSmoothingEnabled = false;
+
+function checkPixel(location, expected) {
+    var actual = destCtx.getImageData(location[0], location[1], 1, 1).data;
+    assert_array_equals(actual, expected);
+}
+
+function PreparePixelTests(blueCheck, blackCheck, redCheck, testDescription) {
+    var pixelTests = [];
+    for (var i = 0; i < blueCheck.length; i++) {
+        var message = testDescription + 'Pixel ' + blueCheck[i][0] + ',' + blueCheck[i][1] + ' should be blue.';
+        pixelTests.push([message, blueCheck[i], bluePixel]);
+    }
+    for (var i = 0; i < blackCheck.length; i++) {
+        var message = testDescription + 'Pixel ' + blackCheck[i][0] + ',' + blackCheck[i][1] + ' should be black.';
+        pixelTests.push([message, blackCheck[i], blackPixel]);
+    }
+    for (var i = 0; i < redCheck.length; i++) {
+        var message = testDescription + 'Pixel ' + redCheck[i][0] + ',' + redCheck[i][1] + ' should be red.';
+        pixelTests.push([message, redCheck[i], redPixel]);
+    }
+    pixelTests.push([testDescription + 'Pixel outside canvas should be transparent black.\n', [100, 100], transparentBlackPixel]);
+    return pixelTests;
+}
+
+function drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription) {
+    destCtx.fillStyle = 'red';
+    destCtx.fillRect(0, 0,  destCanvasWidth, destCanvasHeight);
+
+    var sourceCanvas = document.createElement('canvas');
+    sourceCanvas.width = sourceCanvasWidth;
+    sourceCanvas.height = sourceCanvasHeight;
+    var sourceCtx = sourceCanvas.getContext('2d');
+    sourceCtx.fillStyle = 'blue';
+    sourceCtx.fillRect(blueRect.x, blueRect.y, blueRect.w, blueRect.h);
+    sourceCtx.fillStyle = 'black';
+    sourceCtx.fillRect(blackRect.x, blackRect.y, blackRect.w, blackRect.h);
+    if (typeof sourceRect.x !== 'undefined')
+        destCtx.drawImage(sourceCanvas, sourceRect.x, sourceRect.y, sourceRect.w, sourceRect.h,
+                          destRect.x, destRect.y, destRect.w, destRect.h);
+    else if (typeof destRect.w !== 'undefined')
+        destCtx.drawImage(sourceCanvas, destRect.x, destRect.y, destRect.w, destRect.h);
+    else
+        destCtx.drawImage(sourceCanvas, destRect.x, destRect.y);
+    var pixelTests = PreparePixelTests(blueCheck, blackCheck, redCheck, testDescription);
+    generate_tests(checkPixel, pixelTests);
+}
+
+var testDescription;
+var sourceRect = {}, destRect = {};
+var blueCheck, blackCheck, redCheck;
+
+// 2 arguments, the dest origin is 0,0
+// The source canvas will be copied to the 0,0 position of the destination canvas
+testDescription = 'Test scenario 1: dx = 0, dy = 0 --- ';
+destRect = {x: 0, y: 0};
+blueCheck = [[0,0], [0,49], [49,0], [49,49]];
+blackCheck = [[5,5], [5,44], [44,5], [44,44]];
+redCheck = [[50,0], [0,50], [50,50], [99,99]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// 2 arguments, the dest origin is not 0,0
+// The source canvas will copied to the 25, 25 position of the destination canvas
+testDescription = 'Test scenario 2: dx = 25, dy = 25 --- ';
+destRect = {x: 25, y: 25};
+blueCheck = [[25,25], [25,74], [74,25], [74,74]];
+blackCheck = [[30,30], [30,69], [69,30], [69,69]];
+redCheck = [[24,24], [24,75], [75,24], [75,75]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// 4 arguments, the source origin is not 0,0, the dest size is provided
+// The source canvas will copied to the 50, 50 position of the destination canvas and
+// on an area of 50x50 pixels
+testDescription = 'Test scenario 3: dx = 50, dy = 50, dw = 50, dh = 50 --- ';
+destRect = {x: 50, y: 50, w: 50, h: 50};
+blueCheck = [[50,50], [50,99], [99,50], [99,99]];
+blackCheck = [[55,55], [55,94], [94,55], [94,94]];
+redCheck = [[0,0], [49,49], [49,99], [99,49]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// 4 arguments, the dest origin is not 0,0 and the dest size is provided but
+// does not match the size of the source. The image will be distorted
+// The source canvas will copied to the 50,50 position of the destination canvas
+// and it will be shrunk to a and area of 20x20
+testDescription = 'Test scenario 4: dx = 50, dy = 50, dw = 20, dh = 20 --- ';
+destRect = {x: 50, y: 50, w: 20, h: 20};
+blueCheck = [[50,50], [50,69], [69,50], [69,69]];
+blackCheck = [[52,52], [52,67], [67,52], [67,67]];
+redCheck = [[49,49], [49,70], [70,49], [70,70]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// The source canvas will copied to the 50,50 position of the destination canvas
+// over an area of 50x25 pixels
+// The copied image will be distorted along the x axis
+testDescription = 'Test scenario 5: dx = 50, dy = 50, dw = 50, dh = 20 --- ';
+destRect = {x: 50, y: 50, w: 50, h: 20};
+blueCheck = [[50,50], [50,69], [99,50], [99,69]];
+blackCheck = [[55,52], [55,67], [94,52], [94,67]];
+redCheck = [[49,49], [49, 69], [99,49], [99,70]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// 8 arguments, both destination and source origins are 0, 0
+// An area of 25x25 pixels of the source image will be copied to
+// an area of 25x25 pixels of the destination canvas
+// destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 0, 0, 25, 25);
+testDescription = 'Test scenario 6: sx = 0, sy = 0, sw = 25, sh = 25, dx = 0, dy = 0, dw = 25, dh = 25 --- ';
+sourceRect = {x: 0, y: 0, w: 25, h: 25};
+destRect = {x: 0, y: 0, w: 25, h: 25};
+blueCheck = [[0,0], [4,4], [0,24], [24,0]];
+blackCheck = [[5,5], [5,24], [24,5], [24,24]];
+redCheck = [[25,25], [25, 99], [99,25], [99,99]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// 8 arguments the destination origin is not 0,0
+// An area of 25x25 pixels of the source image will be copied to
+// an area of 25x25 pixels of the destination canvas in the position 25,25
+testDescription = 'Test scenario 7: sx = 0, sy = 0, sw = 25, sh = 25, dx = 25, dy = 25, dw = 25, dh = 25 --- ';
+sourceRect = {x: 0, y: 0, w: 25, h: 25};
+destRect = {x: 25, y: 25, w: 25, h: 25};
+blueCheck = [[25,25], [25,49], [49,25], [29,29]];
+blackCheck = [[30,30], [30,49], [49,30], [49,49]];
+redCheck = [[24,24], [24, 50], [50,24], [50,50]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// The source rectangle overflows the source image
+// The source area is clipped to fit the source image
+// and the destination are is clipped in the same proportion
+testDescription = 'Test scenario 8: sx = 25, sy = 25, sw = 50, sh = 50, dx = 0, dy = 0, dw = 50, dh = 50 --- ';
+sourceRect = {x: 25, y: 25, w: 50, h: 50};
+destRect = {x: 0, y: 0, w: 50, h: 50};
+blueCheck = [[0,20], [20,0], [20,20], [24,24]];
+blackCheck = [[0,0], [0,19], [19,0], [19,19]];
+redCheck = [[0,25], [25, 0], [25,25], [99,99]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// The destination rectangle has negative width and height. When the source
+// rectangle is outside the source image, the source rectangle must be clipped
+// to the source image and the destination rectangle must be clipped in the same
+// proportion.
+testDescription = 'Test scenario 9: sx = 0, sy = 0, sw = 50, sh = 50, dx = 100, dy = 100, dw = -50, dh = -50 --- ';
+sourceRect = {x: 0, y: 0, w: 50, h: 50};
+destRect = {x: 100, y: 100, w: -50, h: -50};
+blueCheck = [[50,50], [50,99], [99,50], [99,99]];
+blackCheck = [[55,55], [55,94], [94,55], [94,94]];
+redCheck = [[0,0], [49,49], [0,99], [99,0]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// The destination rectangle is larger than the destination canvas
+// When the destination rectangle is outside the destination image (the scratch bitmap),
+// the pixels that land outside the scratch bitmap are discarded,
+// as if the destination was an infinite canvas whose rendering was
+// clipped to the dimensions of the scratch bitmap.
+testDescription = 'Test scenario 10: sx = 0, sy = 0, sw = 50, sh = 50, dx = 0, dy = 0, dw = 200, dh = 200 --- ';
+sourceRect = {x: 0, y: 0, w: 50, h: 50};
+destRect = {x: 0, y: 0, w: 200, h: 200};
+blueCheck = [[0,0], [0,99], [99,0], [19,19]];
+blackCheck = [[20,20], [20,99], [99,20], [99,99]];
+redCheck = [];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// The source rectangle is larger than the source canvas
+// The source area is clipped to fit the source image
+// and the destination are is clipped in the same proportion
+testDescription = 'Test scenario 11: sx = 0, sy = 0, sw = 100, sh = 100, dx = 0, dy = 0, dw = 50, dh = 50 --- ';
+sourceRect = {x: 0, y: 0, w: 100, h: 100};
+destRect = {x: 0, y: 0, w: 50, h: 50};
+blueCheck = [[0,0], [1,1], [23,23], [24,24]];
+blackCheck = [[3,3], [3,21], [21,3], [21,21]];
+redCheck = [[0,25], [25, 0], [25,25], [99,99]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+// Negative coordinates of the source rectangle.
+// The source area is clipped to fit the source image and the destination area
+// is clipped in the same proportion. In this specific test:
+// - source is clipped by 20 from top and left.
+// - destination will get proportionally clipped by 50 from top and left as we
+// are scaling the source image 2.5 times.
+// - the rect will be drawn from 70,70 to 100,100.
+testDescription = 'Test scenario 12: sx = -20, sy = -20, sw = 50, sh = 50, dx = 20, dy = 20, dw = 125, dh = 125 --- ';
+sourceRect = {x: -20, y: -20, w: 50, h: 50};
+destRect = {x: 20, y: 20, w: 125, h: 125};
+blueCheck = [[70,70], [70,99], [99,70], [82,82]];
+blackCheck = [[84,84], [84,99], [99,84], [99,99]];
+redCheck = [[0,69], [69, 0], [69,69]];
+drawCanvasOnCanvasUsingDrawImage(sourceRect, destRect, blueCheck, blackCheck, redCheck, testDescription);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self.html
new file mode 100644
index 0000000000..83cf53583c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self.html
@@ -0,0 +1,17 @@
+<link rel="match" href="drawimage_canvas_self_ref.html">
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+var canvasWidth = canvasHeight = 100;
+var destWidth = canvasWidth / 4;
+var destHeight = canvasHeight / 4;
+var destCanvas = document.getElementById('dest');
+var destCtx = destCanvas.getContext('2d');
+
+destCtx.fillStyle = 'red';
+destCtx.fillRect(0, 0,  canvasWidth, canvasHeight);
+destCtx.fillStyle = 'green';
+destCtx.fillRect(0, 0, canvasWidth / 2, canvasHeight / 2);
+destCtx.drawImage(destCanvas,
+                  0, 0, destWidth, destHeight,
+                  canvasWidth / 2, canvasHeight / 2, destWidth, destHeight);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html
new file mode 100644
index 0000000000..9f297cacdc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html
@@ -0,0 +1,11 @@
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+var canvasWidth = canvasHeight = 100;
+var destCanvas = document.getElementById('dest');
+var destCtx = destCanvas.getContext('2d');
+destCtx.fillStyle = 'red';
+destCtx.fillRect(0, 0,  canvasWidth, canvasHeight);
+destCtx.fillStyle = 'green';
+destCtx.fillRect(0, 0, canvasWidth / 2, canvasHeight / 2);
+destCtx.fillRect(canvasWidth / 2, canvasHeight / 2, canvasWidth / 4, canvasHeight / 4);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_crossorigin.sub.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_crossorigin.sub.html
new file mode 100644
index 0000000000..3d57d9f064
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_crossorigin.sub.html
@@ -0,0 +1,61 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+  function draw_and_read_image(img, should_throw) {
+      let c = document.createElement('canvas');
+      document.body.appendChild(c);
+      let ctx = c.getContext('2d');
+      ctx.drawImage(img, 0, 0);
+
+      function get_image_data() {
+          ctx.getImageData(0, 0, 4, 4);
+      }
+
+      if (should_throw) {
+          assert_throws_dom('SecurityError', get_image_data);
+      } else {
+          get_image_data();
+      }
+
+      document.body.removeChild(c);
+  }
+
+  async_test(t => {
+      let img = new Image();
+      img.src = "/images/green.png";
+      img.crossOrigin = "anonymous";
+      img.onload = t.step_func_done(() => {
+          draw_and_read_image(img, false);
+      });
+      img.onerror = t.unreached_func();
+  }, "Can get pixels of canvas with same origin image drawn");
+
+  async_test(t => {
+      let img = new Image();
+      img.src = "http://{{hosts[][www]}}:{{ports[http][0]}}/images/green.png?pipe=header(Access-Control-Allow-Origin,*)";
+      img.crossOrigin = "anonymous";
+      img.onload = t.step_func_done(() => {
+          draw_and_read_image(img, false);
+      });
+      img.onerror = t.unreached_func();
+  }, "Can get pixels of canvas with CORS enabled cross origin image drawn");
+
+  async_test(t => {
+      let img = new Image();
+      img.src = "http://{{hosts[][www]}}:{{ports[http][0]}}/images/green.png?pipe=header(Access-Control-Allow-Origin,*)";
+      img.onload = t.step_func_done(() => {
+          draw_and_read_image(img, true);
+      });
+      img.onerror = t.unreached_func();
+  }, "Can't get pixels of canvas with CORS enabled cross origin image drawn from non-CORS element");
+
+  async_test(t => {
+      let img = new Image();
+      img.src = "http://{{hosts[][www]}}:{{ports[http][0]}}/images/green.png";
+
+      img.onload = t.step_func_done(() => {
+          draw_and_read_image(img, true);
+      });
+      img.onerror = t.unreached_func();
+  }, "Can't get pixels of canvas with non-CORS enabled cross origin image drawn");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html
new file mode 100644
index 0000000000..59a7d64465
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_html_image.html
@@ -0,0 +1,268 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="dest" height="100" width="100"></canvas>
+
+<script>
+var sourceWidth = sourceHeight = 100;
+var destCanvasWidth = destCanvasHeight = 100;
+var redPixel = [255, 0, 0, 255];
+var lightPixel = [253, 140, 245, 255];
+var grayPixel = [41, 122, 115, 255];
+var transparentBlackPixel = [0, 0, 0, 0];
+
+var destCanvas = document.getElementById('dest');
+var sourceImg = document.createElement('img');
+sourceImg.src = '/html/canvas/resources/2x2.png';
+sourceImg.width = sourceWidth;
+sourceImg.height = sourceHeight;
+var destCtx = destCanvas.getContext('2d');
+destCtx.imageSmoothingEnabled = false;
+
+function checkPixel(location, expected) {
+    var actual = destCtx.getImageData(location[0], location[1], 1, 1).data;
+    assert_array_equals(actual, expected);
+}
+
+function PreparePixelTests(lightPixelCheck, grayPixelCheck, redCheck, testDescription) {
+    var pixelTests = [];
+    for (var i = 0; i < lightPixelCheck.length; i++) {
+        var message = testDescription + 'Pixel ' + lightPixelCheck[i][0] + ',' + lightPixelCheck[i][1] + ' should be light purple.';
+        pixelTests.push([message, lightPixelCheck[i], lightPixel]);
+    }
+    for (var i = 0; i < grayPixelCheck.length; i++) {
+        var message = testDescription + 'Pixel ' + grayPixelCheck[i][0] + ',' + grayPixelCheck[i][1] + ' should be gray.';
+        pixelTests.push([message, grayPixelCheck[i], grayPixel]);
+    }
+    for (var i = 0; i < redCheck.length; i++) {
+        var message = testDescription + 'Pixel ' + redCheck[i][0] + ',' + redCheck[i][1] + ' should be red.';
+        pixelTests.push([message, redCheck[i], redPixel]);
+    }
+    pixelTests.push([testDescription + 'Pixel outside canvas should be transparent black.\n', [100, 100], transparentBlackPixel]);
+    return pixelTests;
+}
+
+function drawCustomImageOnCanvas(sourceImage, sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription) {
+    destCtx.fillStyle = 'red';
+    destCtx.fillRect(0, 0,  destCanvasWidth, destCanvasHeight);
+    if (typeof sourceRect.x !== 'undefined')
+        destCtx.drawImage(sourceImage, sourceRect.x, sourceRect.y, sourceRect.w, sourceRect.h,
+                          destRect.x, destRect.y, destRect.w, destRect.h);
+    else if (typeof destRect.w !== 'undefined')
+        destCtx.drawImage(sourceImage, destRect.x, destRect.y, destRect.w, destRect.h);
+    else
+        destCtx.drawImage(sourceImage, destRect.x, destRect.y);
+    var pixelTests = PreparePixelTests(lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+    generate_tests(checkPixel, pixelTests);
+}
+
+function drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription) {
+    drawCustomImageOnCanvas(sourceImg, sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+var testDescription;
+var sourceRect = {}, destRect = {};
+var lightPixelCheck, grayPixelCheck, redCheck;
+
+// 2 arguments, the dest origin is 0,0
+// The source image will copied to the 0,0 position of the destination canvas
+function runDrawImageTest_dX0_dY0() {
+    testDescription = 'Test scenario 1: dx = 0, dy = 0 --- ';
+    destRect = {x: 0, y: 0};
+    lightPixelCheck = [[0,0], [0,99], [99,0], [99,99]];
+    grayPixelCheck = [];
+    redCheck = [];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// 2 arguments, the dest origin is not 0,0
+// The source canvas will copied to the 25,25 position of the destination canvas
+function runDrawImageTest_dX25_dY25() {
+    testDescription = 'Test scenario 2: dx = 25, dy = 25 --- ';
+    destRect = {x: 25, y: 25};
+    lightPixelCheck = [[25,25], [25,99], [99,25], [99,99]];
+    grayPixelCheck = [];
+    redCheck = [[0,0], [24,24], [0,25], [25,0], [0,99], [99,0]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// 4 arguments, the source origin is not 0,0, the dest size is provided
+// The source canvas will copied to the 50, 50 position of the destination canvas and
+// on an area of 50x50 pixels
+function runDrawImageTest_dX50_dY50_dW50_dH50() {
+    testDescription = 'Test scenario 3: dx = 50, dy = 50, dw = 50, dh = 50 --- ';
+    destRect = {x: 50, y: 50, w: 50, h: 50};
+    lightPixelCheck = [[50,50], [99,99]];
+    grayPixelCheck = [[50,99], [99,50]];
+    redCheck = [[0,0], [49,49], [0,50], [50,0], [0,99], [99,0]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// 4 arguments, the dest origin is not 0,0 and the dest size is provided but
+// does not match the size of the source. The image will be distorted
+// The source canvas will copied to the 50,50 position of the destination canvas
+// and it will be shrunk to a and area of 16x16
+function runDrawImageTest_dX50_dY50_dW16_dH16() {
+    testDescription = 'Test scenario 4: dx = 50, dy = 50, dw = 16, dh = 16 --- ';
+    destRect = {x: 50, y: 50, w: 16, h: 16};
+    lightPixelCheck = [[50,50], [65,65]];
+    grayPixelCheck = [[50,65], [65,50]];
+    redCheck = [[0,0], [49,49], [49,66], [66,49], [66,66], [99,99]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// The source canvas will copied to the 50,50 position of the destination canvas
+// over an area of 64x32 pixels
+// The copied image will be distorted along the x axis
+function runDrawImageTest_dX50_dY50_dW64_dH32() {
+    testDescription = 'Test scenario 5: dx = 50, dy = 50, dw = 64, dh = 32 --- ';
+    destRect = {x: 50, y: 50, w: 64, h: 32};
+    lightPixelCheck = [[50,50], [99,81]];
+    grayPixelCheck = [[50,81], [99,50]];
+    redCheck = [[0,0], [49,49], [49,82], [99,49], [99,82], [99,99]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// 8 arguments, both destination and source origins are 0, 0
+// An area of 32x32 pixels of the source image will be copied to
+// an area of 32x32 pixels of the destination canvas
+function runDrawImageTest_sX0_sY0_sW32_sH32_dX0_dY0_dW32_dH32() {
+    testDescription = 'Test scenario 6: sx = 0, sy = 0, sw = 32, sh = 32, dx = 0, dy = 0, dw = 32, dh = 32 --- ';
+    sourceRect = {x: 0, y: 0, w: 32, h: 32};
+    destRect = {x: 0, y: 0, w: 32, h: 32};
+    lightPixelCheck = [[0,0], [0,31], [31,0], [31,31]];
+    grayPixelCheck = [];
+    redCheck = [[0,32], [32,0], [32,32], [99,99]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// 8 arguments the destination origin is not 0,0
+// An area of 32x32 pixels of the source image will be copied to
+// an area of 32x32 pixels of the destination canvas in the position 32,32
+function runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dW32_dH32() {
+    testDescription = 'Test scenario 7: sx = 0, sy = 0, sw = 32, sh = 32, dx = 32, dy = 32, dw = 32, dh = 32 --- ';
+    sourceRect = {x: 0, y: 0, w: 32, h: 32};
+    destRect = {x: 32, y: 32, w: 32, h: 32};
+    lightPixelCheck = [[32,32], [32,63], [63,32], [63,63]];
+    grayPixelCheck = [];
+    redCheck = [[0,0], [31,31], [31,64], [64,31], [64,64], [99,99]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// The source rectangle overflows the source image
+// The source area is clipped to fit the source image
+// and the destination are is clipped in the same proportion
+function runDrawImageTest_sX32_sY32_sW32_sH32_dX0_dY0_dW32_dH32() {
+    testDescription = 'Test scenario 8: sx = 32, sy = 32, sw = 32, sh = 32, dx = 0, dy = 0, dw = 32, dh = 32 --- ';
+    sourceRect = {x: 32, y: 32, w: 32, h: 32};
+    destRect = {x: 0, y: 0, w: 32, h: 32};
+    lightPixelCheck = [[0,0], [0,31], [31,0], [31,31]];
+    grayPixelCheck = [];
+    redCheck = [[0,32], [32,0], [32,32], [99,99]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// The destination rectangle has negative width and height. When the source
+// rectangle is outside the source image, the source rectangle must be clipped
+// to the source image and the destination rectangle must be clipped in the same
+// proportion.
+function runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dWm32_dHm32() {
+    testDescription = 'Test scenario 9: sx = 32, sy = 32, sw = 32, sh = 32, dx = 32, dy = 32, dw = -32, dh = -32 --- ';
+    sourceRect = {x: 32, y: 32, w: 32, h: 32};
+    destRect = {x: 0, y: 0, w: 32, h: 32};
+    lightPixelCheck = [[0,0], [0,31], [31,0], [31,31]];
+    grayPixelCheck = [];
+    redCheck = [[0,32], [32,0], [32,32], [99,99]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// The destination rectangle is larger than the destination canvas.
+// When the destination rectangle is outside the destination image (the scratch bitmap),
+// the pixels that land outside the scratch bitmap are discarded,
+// as if the destination was an infinite canvas
+// whose rendering was clipped to the dimensions of the scratch bitmap.
+function runDrawImageTest_sX0_sY0_sW512_sH512_dX0_dY0_dW256_dH256() {
+    testDescription = 'Test scenario 10: sx = 0, sy = 0, sw = 512, sh = 512, dx = 0, dy = 0, dw = 256, dh = 256 --- ';
+    sourceRect = {x: 0, y: 0, w: 512, h: 512};
+    destRect = {x: 0, y: 0, w: 256, h: 256};
+    lightPixelCheck = [[0,0], [0,99], [99,0], [99,99]];
+    grayPixelCheck = [];
+    redCheck = [];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// The source rectangle is larger than the source canvas
+// The source area is clipped to fit the source image
+// and the destination area is clipped in the same proportion
+function runDrawImageTest_sX0_sY0_sW2048_sH2048_dX0_dY0_dW800_dH800() {
+    testDescription = 'Test scenario 11: sx = 0, sy = 0, sw = 2048, sh = 2048, dx = 0, dy = 0, dw = 800, dh = 800 --- ';
+    sourceRect = {x: 0, y: 0, w: 2048, h: 2048};
+    destRect = {x: 0, y: 0, w: 800, h: 800};
+    lightPixelCheck = [[0,0], [0,99], [99,0], [99,99]];
+    grayPixelCheck = [];
+    redCheck = [];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// Negative coordinates of the source rectangle
+// The source area is clipped to fit the source image
+// and the destination area is clipped in the same proportion
+function runDrawImageTest_sXm20_sYm20_sW50_sH50_dX20_dY20_dW125_dH125() {
+    testDescription = 'Test scenario 12: sx = -20, sy = -20, sw = 50, sh = 50, dx = 20, dy = 20, dw = 125, dh = 125 --- ';
+    sourceRect = {x: -20, y: -20, w: 50, h: 50};
+    destRect = {x: 20, y: 20, w: 125, h: 125};
+    lightPixelCheck = [[70,70], [70,99], [99,70], [99,99]];
+    grayPixelCheck = [];
+    redCheck = [[0,0], [0,99], [99,0], [69,69], [69, 99], [99,69]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// The source Image doesn't have a src url defined.
+// No exception is thrown and nothing is drawn.
+function runDrawImageTestImageWithuotSource() {
+    testDescription = 'Test scenario 13: draw an image element that does not have a source --- ';
+    var sourceImage = document.createElement('img');
+    sourceRect = {x: 0, y: 0, w: 50, h: 50};
+    destRect = {x: 0, y: 0, w: 100, h: 100};
+    lightPixelCheck = [];
+    grayPixelCheck = [];
+    redCheck = [[0,0], [0,99], [99,0], [99,69]];
+    drawCustomImageOnCanvas(sourceImage, sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+// Clipping the source and down scaling to the destination
+function runDrawImageTest_sX64_sY64_sW384_sH384_dX0_dY0_dW32_dH64() {
+    testDescription = 'Test scenario 14: sx = 64, sy = 64, sw = 384, sh = 384, dx = 0, dy = 0, dw = 32, dh = 64 --- ';
+    sourceRect = {x: 64, y: 64, w: 384, h: 384};
+    destRect = {x: 0, y: 0, w: 32, h: 64};
+    lightPixelCheck = [[0,0], [15,31], [17,33], [31,63]];
+    grayPixelCheck = [[16,0], [31,31], [0, 33], [15,63]];
+    redCheck = [[0,64], [32,0], [32,64], [99,99]];
+    drawImageOnCanvas(sourceRect, destRect, lightPixelCheck, grayPixelCheck, redCheck, testDescription);
+}
+
+
+function runDrawImageTests() {
+    runDrawImageTest_dX0_dY0();
+    runDrawImageTest_dX25_dY25();
+    runDrawImageTest_dX50_dY50_dW50_dH50();
+    runDrawImageTest_dX50_dY50_dW16_dH16();
+    runDrawImageTest_dX50_dY50_dW64_dH32();
+    runDrawImageTest_sX0_sY0_sW32_sH32_dX0_dY0_dW32_dH32();
+    runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dW32_dH32();
+    runDrawImageTest_sX32_sY32_sW32_sH32_dX0_dY0_dW32_dH32();
+    runDrawImageTest_sX0_sY0_sW32_sH32_dX32_dY32_dWm32_dHm32();
+    runDrawImageTest_sX0_sY0_sW512_sH512_dX0_dY0_dW256_dH256();
+    runDrawImageTest_sX0_sY0_sW2048_sH2048_dX0_dY0_dW800_dH800();
+    runDrawImageTest_sXm20_sYm20_sW50_sH50_dX20_dY20_dW125_dH125();
+    runDrawImageTestImageWithuotSource();
+    runDrawImageTest_sX64_sY64_sW384_sH384_dX0_dY0_dW32_dH64();
+}
+
+async_test(t => {
+        window.onload = function() {
+            t.step(runDrawImageTests);
+            t.done();
+        }
+}, 'Draw 100x100 image to 100x100 canvas at 0,0.');
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html
new file mode 100644
index 0000000000..ea3300bef2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_1.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Load a 100x100 image to a SVG image and draw it to a 100x100 canvas.</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<div id="log"></div>
+<canvas id="dest" height="100" width="100"></canvas>
+<script>
+async_test(t => {
+  var sourceImg = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+  sourceImg.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '/html/canvas/resources/2x2.png');
+  sourceImg.width = 100;
+  sourceImg.height = 100;
+
+  window.onload = t.step_func_done(() => {
+    var destCanvas = document.getElementById('dest');
+    var destCtx = destCanvas.getContext('2d');
+    destCtx.fillStyle = "#FF0000";
+    destCtx.fillRect(0, 0,  destCanvas.width, destCanvas.height);
+    destCtx.imageSmoothingEnabled = false;
+    // 2 arguments, the dest origin is 0,0
+    // The source canvas will copied to the 0,0 position of the destination canvas
+    destCtx.drawImage(sourceImg, 0, 0);
+    _assertPixel(destCanvas, 0, 0, 253, 140, 245, 255);
+    _assertPixel(destCanvas, 0, 99, 253, 140, 245, 255);
+    _assertPixel(destCanvas, 99, 0, 253, 140, 245, 255);
+    _assertPixel(destCanvas, 99, 99, 253, 140, 245, 255);
+  });
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_with_foreign_object_does_not_taint.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_with_foreign_object_does_not_taint.html
new file mode 100644
index 0000000000..f29b2bf5a8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/drawimage_svg_image_with_foreign_object_does_not_taint.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Draw an SVG image with a foreignObject to a canvas</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function loadImage(url) {
+  return new Promise(resolve => {
+    const image = new window.Image();
+    image.onload = () => {
+      resolve(image);
+    };
+    image.src = url;
+  });
+}
+
+promise_test(async (t) => {
+  // Load a data URL for an SVG image with a foreign object.
+  const url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject></foreignObject></svg>';
+  const image = await loadImage(url);
+
+  // Draw the image to a canvas.
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  canvas.width = image.width;
+  canvas.height = image.height;
+  context.drawImage(image, 0, 0);
+
+  // The canvas should not be tainted, so the following shouldn't throw.
+  assert_true(canvas.toDataURL().length > 0);
+}, 'Canvas should not be tainted after drawing SVG including <foreignObject>');
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none-ref.html
new file mode 100644
index 0000000000..320a9b8108
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference for drawImage from a createImageBitmap source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none.tentative.html
new file mode 100644
index 0000000000..39ed4a25dc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-orientation-none.tentative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-bitmap-orientation-none-ref.html">
+  <script>
+    image = new Image();
+    image.src = "/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg";
+
+    let imageLoadPromise = new Promise(resolve => {
+      image.onload = resolve;
+    });
+    let contentLoadedPromise = new Promise(resolve => {
+      window.addEventListener('DOMContentLoaded', resolve);
+    });
+    Promise.all([imageLoadPromise, contentLoadedPromise]).then( function() {
+      const can = document.getElementById('bitmap-canvas');
+      can.height = 50;
+      can.width = 100;
+      can.getContext('2d').drawImage(image, 0, 0);
+    })
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-ref.html
new file mode 100644
index 0000000000..261d6a0b7c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference for drawImage from a createImageBitmap source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none-ref.html
new file mode 100644
index 0000000000..3a78aad068
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference for drawImage from a createImageBitmap source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none.tentative.html
new file mode 100644
index 0000000000..3b16241c97
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-orientation-none.tentative.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-bitmap-swap-width-height-orientation-none-ref.html">
+  <script>
+    image = new Image();
+    image.src = "/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg";
+
+    let imageLoadPromise = new Promise(resolve => {
+      image.onload = resolve;
+    });
+    let contentLoadedPromise = new Promise(resolve => {
+      window.addEventListener('DOMContentLoaded', resolve);
+    });
+    Promise.all([imageLoadPromise, contentLoadedPromise]).then( async function() {
+      const bitmap = await createImageBitmap(image);
+      const can = document.getElementById('bitmap-canvas');
+      can.height = 50;
+      can.width = 100;
+      can.getContext('2d').drawImage(bitmap, 0, 0);
+    })
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-ref.html
new file mode 100644
index 0000000000..247d7f4049
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference for drawImage from a createImageBitmap source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html
new file mode 100644
index 0000000000..744ca54f47
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap-swap-width-height.tentative.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-bitmap-swap-width-height-ref.html">
+  <script>
+    image = new Image();
+    image.src = "/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg";
+
+    let imageLoadPromise = new Promise(resolve => {
+      image.onload = resolve;
+    });
+    let contentLoadedPromise = new Promise(resolve => {
+      window.addEventListener('DOMContentLoaded', resolve);
+    });
+    Promise.all([imageLoadPromise, contentLoadedPromise]).then( async function() {
+      const bitmap = await createImageBitmap(image);
+      const can = document.getElementById('bitmap-canvas');
+      can.height = 100;
+      can.width = 50;
+      can.getContext('2d').drawImage(bitmap, 0, 0);
+    })
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <canvas id="bitmap-canvas"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html
new file mode 100644
index 0000000000..632a170b88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-bitmap.tentative.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-bitmap-ref.html">
+  <script>
+    image = new Image();
+    image.src = "/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg";
+
+    let imageLoadPromise = new Promise(resolve => {
+      image.onload = resolve;
+    });
+    let contentLoadedPromise = new Promise(resolve => {
+      window.addEventListener('DOMContentLoaded', resolve);
+    });
+    Promise.all([imageLoadPromise, contentLoadedPromise]).then( function() {
+      const can = document.getElementById('bitmap-canvas');
+      can.height = 50;
+      can.width = 100;
+      can.getContext('2d').drawImage(image, 0, 0);
+    })
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <canvas id="bitmap-canvas"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob-ref.html
new file mode 100644
index 0000000000..2bd6037835
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from a blob with image orientation: from-image, reference</title>
+</head>
+<body>
+  <img id="img-element" style="width: 150px; height: 300px;" src="/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob.tentative.html
new file mode 100644
index 0000000000..330b3cbfe5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-blob.tentative.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from a blob with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-blob-ref.html">
+  <script>
+  function makeBlob() {
+    return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/css/css-images/image-orientation/support/exif-orientation-8-llo.jpg');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+          resolve(xhr.response);
+        };
+    });
+  }
+
+  window.onload = function() {
+    var cfb = document.getElementById("canvasWithFileBitmap");
+    makeBlob().then(function(blob){createImageBitmap(blob).then(bitmap => {
+        cfb.getContext("2d").drawImage(bitmap, 0, 0, 150, 150 * bitmap.height / bitmap.width);
+        window.requestAnimationFrame(() => {
+          document.documentElement.removeAttribute("class");
+        });
+      });
+    });
+  }
+</script>
+</head>
+<body>
+  <canvas id="canvasWithFileBitmap" width="150" height="300"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none-ref.html
new file mode 100644
index 0000000000..b847b9eb73
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference for drawImage from an element source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none.tentative.html
new file mode 100644
index 0000000000..61563da738
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-orientation-none.tentative.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-element-orientation-none-ref.html">
+  <script>
+    window.onload = () => {
+      const img = document.getElementById('img-element');
+
+      const can = document.getElementById('bitmap-canvas');
+      can.height = img.height;
+      can.width = img.width;
+      can.getContext('2d').drawImage(img, 0, 0);
+    };
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-ref.html
new file mode 100644
index 0000000000..3f4d1e5ff4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference for drawImage from an element source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none-ref.html
new file mode 100644
index 0000000000..b26154b40a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference drawImage from an element source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <img id="img-element" style="image-orientation: none;" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none.tentative.html
new file mode 100644
index 0000000000..290d7acf3a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-orientation-none.tentative.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: none</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-element-swap-width-height-orientation-none-ref.html">
+  <script>
+    window.onload = () => {
+      const img = document.getElementById('img-element');
+
+      const can = document.getElementById('bitmap-canvas');
+      can.height = 50;
+      can.width = 100;
+      can.getContext('2d').drawImage(img, 0, 0);
+    };
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <canvas id="bitmap-canvas" style="image-orientation: none;"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-ref.html
new file mode 100644
index 0000000000..21f0f88b88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference drawImage from an element source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html
new file mode 100644
index 0000000000..20d59358b4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element-swap-width-height.tentative.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-element-swap-width-height-ref.html">
+  <script>
+    window.onload = () => {
+      const img = document.getElementById('img-element');
+
+      const can = document.getElementById('bitmap-canvas');
+      can.height = 100;
+      can.width = 50;
+      can.getContext('2d').drawImage(img, 0, 0);
+    };
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-7-rl.jpg">
+  <canvas id="bitmap-canvas"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html
new file mode 100644
index 0000000000..62cdf20c79
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-from-element.tentative.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>createImageBitmap and drawImage from an element source with image orientation: from-image</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-from-element-ref.html">
+  <script>
+    window.onload = () => {
+      const img = document.getElementById('img-element');
+
+      const can = document.getElementById('bitmap-canvas');
+      can.height = img.height;
+      can.width = img.width;
+      can.getContext('2d').drawImage(img, 0, 0);
+    };
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <canvas id="bitmap-canvas"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect-ref.html
new file mode 100644
index 0000000000..19ffcc39c9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>reference for drawImage with image orientation: from-image and a sub-image source rect</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+  <script>
+    window.onload = () => {
+      const img = document.getElementById('img-element');
+
+      const can = document.getElementById('bitmap-canvas');
+      can.height = img.height;
+      can.width = img.width;
+      can.getContext('2d').drawImage(img, 40, 20, 50, 25, 0, 0, can.width, can.height);
+    };
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr-pre-rotated.jpg">
+  <canvas id="bitmap-canvas"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect.tentative.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect.tentative.html
new file mode 100644
index 0000000000..d889e39302
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-images-to-the-canvas/image-orientation/drawImage-with-src-rect.tentative.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>drawImage with image orientation: from-image and a sub-image source rect</title>
+<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-images-3/#propdef-image-orientation">
+<link rel="match" href="drawImage-with-src-rect-ref.html">
+<meta name=fuzzy content="0-3;0-200">
+  <script>
+    window.onload = () => {
+      const img = document.getElementById('img-element');
+
+      const can = document.getElementById('bitmap-canvas');
+      can.height = img.height;
+      can.width = img.width;
+      can.getContext('2d').drawImage(img, 40, 20, 50, 25, 0, 0, can.width, can.height);
+    };
+  </script>
+</head>
+<body>
+  <img id="img-element" src="/css/css-images/image-orientation/support/exif-orientation-3-lr.jpg">
+  <canvas id="bitmap-canvas"></canvas>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_complexshapes_ispointInpath_001.htm b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_complexshapes_ispointInpath_001.htm
new file mode 100644
index 0000000000..18c3c9afb9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_complexshapes_ispointInpath_001.htm
@@ -0,0 +1,31 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  isPointInPath() unaffected by the current transformation matrix</title>
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-ispointinpath" />
+        <meta name="assert" content="isPointInPath must check the point (x, y) as coordinates unaffected by the current transformation matrix." />
+        <script type="text/javascript">
+            async_test(function(t) {
+              window.addEventListener("load", t.step_func_done(function runTest() {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Create a path that is transformed by a translation transformation matrix.
+                ctx.translate(100, 50);
+                ctx.rect(0, 0, 100, 50);
+
+                // Ensure that the coordinates passed to isPointInPath are unaffected by the current transformation matrix.
+                assert_true(ctx.isPointInPath(125, 75), "isPointInPath(125, 75)");
+                assert_false(ctx.isPointInPath(25, 25), "!isPointInPath(25, 25)");
+              }));
+            }, "isPointInPath unaffected by transformation matrix");
+        </script>
+    </head>
+    <body>
+        <p>Description: isPointInPath must check the point (x, y) as coordinates unaffected by the current transformation matrix.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html
new file mode 100644
index 0000000000..bf38fa68b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/canvas_focus_drawFocusIfNeeded_AAPI_001-manual.html
@@ -0,0 +1,50 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>drawFocusIfNeeded() - AAPI test</title>
+    <link rel="author" title="Mark Sadecki" href="mark@w3.org">
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
+
+  </head>
+  <body>
+    <h1>Description</h1>
+    <p>This manual test can be used to verify that drawFocusIfNeeded actually updates the accessible location information (i.e. UIAutomation's CurrentBoundingRectangle) in the Accessibility API.  To perform this test, you will need an <a href="http://www.w3.org/WAI/PF/wiki/ARIA_Test_Plan#Test_tools">accessibility API inspector</a>.  To perform this test, use the <code>tab</code> key to move from the first focusable element to through to the fourth.  This test passes if the first parameter of the bounding rectangle increases by 100 when focus is moved from the gray square to the orange square.</p>
+    <p><a href="http://www.w3.org">First focusable element</a></p>
+    <canvas height=100 width=200 id=canvas>
+      <a href='http://www.w3.org' id='button1'>Second focusable element</a>
+      <a href='http://www.w3.org' id='button2'>Third focusable element</a>
+    </canvas>
+    <p><a href="http://www.w3.org">Fourth focusable element</a></p>
+
+    <script>
+        var button1 = document.getElementById('button1');
+        var button2 = document.getElementById('button2');
+        var canvas = document.getElementById('canvas');
+        var buttons = canvas.getElementsByTagName('a');
+
+        for (var i = 0; i < buttons.length; i++) {
+          buttons[i].addEventListener('focus', drawCanvas, false);
+          buttons[i].addEventListener('blur', drawCanvas, false);
+        }
+
+        function drawRect(context, color, element) {
+          context.beginPath();
+          context.rect(10, 10, 80, 80);
+          context.fillStyle = color;
+          context.fill();
+          context.drawFocusIfNeeded(element);
+        }
+
+        function drawCanvas() {
+          var canvas = document.getElementById('canvas');
+          var context = canvas.getContext('2d');
+          context.clearRect (0, 0, 200, 100);
+
+          drawRect(context, "gray", button1);
+          context.translate(100,0);
+          drawRect(context, "orange", button2);
+        }
+        drawCanvas();
+    </script>
+  </body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_001.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_001.html
new file mode 100644
index 0000000000..6daf32a2af
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_001.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>drawFocusIfNeeded()</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="author" title="W3C">
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
+  </head>
+  <body>
+    <h1>Description</h1>
+    <p>This test uses drawFocusIfNeeded to draw a focus ring in the canvas, then compare the ImageData before and after the invocation of the method to check that the focus ring was actually drawn.</p>
+    <div>
+      <p>Before:</p>
+      <canvas height=100 width=100 id='original'>
+      </canvas>
+      <p>After:</p>
+      <canvas height=100 width=100 id=canvas>
+        <label><a href='http://www.w3.org' id='element'>Focus</a></label>
+      </canvas>
+    </div>
+    <script>
+      test(function() {
+          var canvas = document.getElementById('canvas');
+          var context = canvas.getContext('2d');
+          var element = document.getElementById('element');
+          element.focus();
+          context.fillStyle = 'white';
+          context.fillRect(0, 0, 100, 100);
+          context.beginPath();
+          context.strokeStyle = 'black';
+          context.rect(10, 10, 80, 80);
+          context.stroke();
+          context.save();
+          var refImage = context.getImageData(0, 0, 100, 100);
+
+          assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
+
+          var original = document.getElementById('original');
+          var o_context = original.getContext('2d');
+          o_context.fillStyle = 'white';
+          o_context.fillRect(0, 0, 100, 100);
+          o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
+
+          context.rect(5, 5, 90, 90);
+          context.drawFocusIfNeeded(element);
+
+          var ringImage = context.getImageData(0, 0, 100, 100);
+          assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
+
+          // make sure refImage and ringImage are different
+          var length = 40000;
+          var index = length;
+          var identical = true;
+          while (--index > 0) {
+            if (refImage.data[index] != ringImage.data[index]) identical = false;
+          }
+
+          assert_false(identical, "The focus ring must appear in the canvas");
+
+
+      }, 'drawFocusIfNeeded draws a focus ring.');
+    </script>
+    <div id="log"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_002.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_002.html
new file mode 100644
index 0000000000..ec0a4ef427
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_002.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>drawFocusIfNeeded()</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="author" title="W3C">
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
+  </head>
+  <body>
+    <h1>Description</h1>
+    <p>This test uses drawFocusIfNeeded does nothing if the element is not in focus but comparing ImageData from before and after.</p>
+    <div>
+      <p>Before:</p>
+      <canvas height=100 width=100 id='original'>
+      </canvas>
+      <p>After:</p>
+      <canvas height=100 width=100 id=canvas>
+        <label><a href='http://www.w3.org' id='element'>Focus</a></label>
+      </canvas>
+    </div>
+    <script>
+      test(function() {
+          var canvas = document.getElementById('canvas');
+          var context = canvas.getContext('2d');
+          var element = document.getElementById('element');
+          context.fillStyle = 'white';
+          context.fillRect(0, 0, 100, 100);
+          context.beginPath();
+          context.strokeStyle = 'black';
+          context.rect(10, 10, 80, 80);
+          context.stroke();
+          context.save();
+          var refImage = context.getImageData(0, 0, 100, 100);
+
+          assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
+
+          var original = document.getElementById('original');
+          var o_context = original.getContext('2d');
+          o_context.fillStyle = 'white';
+          o_context.fillRect(0, 0, 100, 100);
+          o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
+
+
+
+          context.strokeStyle = 'blue';
+          context.rect(5, 5, 90, 90);
+          context.drawFocusIfNeeded(element);
+
+          var ringImage = context.getImageData(0, 0, 100, 100);
+          assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
+
+          // make sure refImage and ringImage are different
+          var length = 40000;
+          var index = length;
+          var identical = true;
+          while (--index > 0) {
+            if (refImage.data[index] != ringImage.data[index]) identical = false;
+          }
+
+          assert_true(identical, "No focus ring appears in the canvas");
+
+
+      }, 'drawFocusIfNeeded does not draw a focus ring if the element is not in focus.');
+    </script>
+    <div id="log"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_003.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_003.html
new file mode 100644
index 0000000000..b62c0641f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_003.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>drawFocusIfNeeded()</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="author" title="W3C">
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
+  </head>
+  <body>
+    <h1>Description</h1>
+    <p>This test uses drawFocusIfNeeded does nothing if the element is not a descendant but comparing ImageData from before and after.</p>
+    <div>
+      <p>Before:</p>
+      <canvas height=100 width=100 id='original'>
+        <label><a href='http://www.w3.org' id='element'>Focus</a></label>
+      </canvas>
+      <p>After:</p>
+      <canvas height=100 width=100 id=canvas>
+      </canvas>
+    </div>
+    <script>
+      test(function() {
+          var canvas = document.getElementById('canvas');
+          var context = canvas.getContext('2d');
+          var element = document.getElementById('element');
+          element.focus();
+          context.fillStyle = 'white';
+          context.fillRect(0, 0, 100, 100);
+          context.beginPath();
+          context.strokeStyle = 'black';
+          context.rect(10, 10, 80, 80);
+          context.stroke();
+          context.save();
+          var refImage = context.getImageData(0, 0, 100, 100);
+
+          assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
+
+          var original = document.getElementById('original');
+          var o_context = original.getContext('2d');
+          o_context.fillStyle = 'white';
+          o_context.fillRect(0, 0, 100, 100);
+          o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
+
+
+
+          context.strokeStyle = 'blue';
+          context.rect(5, 5, 90, 90);
+          context.drawFocusIfNeeded(element);
+
+          var ringImage = context.getImageData(0, 0, 100, 100);
+          assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
+
+          // make sure refImage and ringImage are different
+          var length = 40000;
+          var index = length;
+          var identical = true;
+          while (--index > 0) {
+            if (refImage.data[index] != ringImage.data[index]) identical = false;
+          }
+
+          assert_true(identical, "No focus ring appears in the canvas");
+
+
+      }, 'drawFocusIfNeeded does not draw a focus ring if the element is not a descendant of the context.');
+    </script>
+    <div id="log"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_004.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_004.html
new file mode 100644
index 0000000000..326db0daa8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_004.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>drawFocusIfNeeded()</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="author" title="W3C">
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
+  </head>
+  <body>
+    <h1>Description</h1>
+    <p>This test uses drawFocusIfNeeded to draw a complex path focus then compare ImageData from before and after.</p>
+    <div>
+      <p>Before:</p>
+      <canvas height=100 width=100 id='original'>
+      </canvas>
+      <p>After:</p>
+      <canvas height=100 width=100 id=canvas>
+        <label><a href='http://www.w3.org' id='element'>Focus</a></label>
+      </canvas>
+    </div>
+    <script>
+      test(function() {
+          var canvas = document.getElementById('canvas');
+          var context = canvas.getContext('2d');
+          var element = document.getElementById('element');
+          element.focus();
+          context.fillStyle = 'white';
+          context.fillRect(0, 0, 100, 100);
+          context.beginPath();
+          context.strokeStyle = 'black';
+
+          context.moveTo(10, 40);
+          context.lineTo(50, 10);
+          context.lineTo(90, 40);
+          context.lineTo(70, 40);
+          context.lineTo(70, 90);
+          context.lineTo(30, 90);
+          context.lineTo(30, 40);
+          context.closePath();
+
+          context.stroke();
+          context.save();
+          var refImage = context.getImageData(0, 0, 100, 100);
+
+          assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
+
+          var original = document.getElementById('original');
+          var o_context = original.getContext('2d');
+          o_context.fillStyle = 'white';
+          o_context.fillRect(0, 0, 100, 100);
+          o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
+
+
+
+          context.beginPath();
+          context.moveTo(5, 40);
+          context.lineTo(50, 5);
+          context.lineTo(95, 40);
+          context.lineTo(95, 45);
+          context.lineTo(75, 45);
+          context.lineTo(75, 95);
+          context.lineTo(25, 95);
+          context.lineTo(25, 45);
+          context.lineTo(5, 45);
+          context.closePath();
+
+          context.drawFocusIfNeeded(element);
+
+          var ringImage = context.getImageData(0, 0, 100, 100);
+          assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
+
+          // make sure refImage and ringImage are different
+          var length = 40000;
+          var index = length;
+          var identical = true;
+          while (--index > 0) {
+            if (refImage.data[index] != ringImage.data[index]) identical = false;
+          }
+
+          assert_false(identical, "A focus ring appears in the canvas");
+
+
+      }, 'drawFocusIfNeeded does draw a focus ring if the element is in focus.');
+    </script>
+    <div id="log"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_005.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_005.html
new file mode 100644
index 0000000000..96a4e3fd5d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-paths-to-the-canvas/drawFocusIfNeeded_005.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>drawFocusIfNeeded()</title>
+    <script src="/resources/testharness.js"></script>
+    <script src="/resources/testharnessreport.js"></script>
+    <link rel="author" title="W3C">
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-drawFocusIfNeeded">
+  </head>
+  <body>
+    <h1>Description</h1>
+    <p>This test uses drawFocusIfNeeded to draw a complex path focus then compare ImageData from before and after.</p>
+    <div>
+      <p>Before:</p>
+      <canvas height=100 width=100 id='original'>
+      </canvas>
+      <p>After:</p>
+      <canvas height=100 width=100 id=canvas>
+        <p id='element' tabindex='1'>This is text.</p>
+      </canvas>
+    </div>
+    <script>
+    test(function() {
+          var canvas = document.getElementById('canvas');
+          var context = canvas.getContext('2d');
+          var element = document.getElementById('element');
+          element.focus();
+          context.fillStyle = 'white';
+          context.fillRect(0, 0, 100, 100);
+          context.beginPath();
+          context.strokeStyle = 'black';
+
+          context.moveTo(10, 40);
+          context.lineTo(50, 10);
+          context.lineTo(90, 40);
+          context.lineTo(70, 40);
+          context.lineTo(70, 90);
+          context.lineTo(30, 90);
+          context.lineTo(30, 40);
+          context.closePath();
+
+          context.stroke();
+          context.save();
+          var refImage = context.getImageData(0, 0, 100, 100);
+
+          assert_equals(40000, refImage.data.length, "ImageData.data.length is 40000");
+
+          var original = document.getElementById('original');
+          var o_context = original.getContext('2d');
+          o_context.fillStyle = 'white';
+          o_context.fillRect(0, 0, 100, 100);
+          o_context.putImageData(refImage, 0, 0, 0, 0, 100, 100);
+
+
+
+          context.beginPath();
+          context.moveTo(5, 40);
+          context.lineTo(50, 5);
+          context.lineTo(95, 40);
+          context.lineTo(95, 45);
+          context.lineTo(75, 45);
+          context.lineTo(75, 95);
+          context.lineTo(25, 95);
+          context.lineTo(25, 45);
+          context.lineTo(5, 45);
+          context.closePath();
+
+          context.drawFocusIfNeeded(element);
+
+          var ringImage = context.getImageData(0, 0, 100, 100);
+          assert_equals(40000, ringImage.data.length, "ImageData.data.length is 40000");
+
+          // make sure refImage and ringImage are different
+          var length = 40000;
+          var index = length;
+          var identical = true;
+          while (--index > 0) {
+            if (refImage.data[index] != ringImage.data[index]) identical = false;
+          }
+
+          assert_false(identical, "A focus ring appears in the canvas");
+
+
+      }, 'drawFocusIfNeeded does draw a focus ring if the element is in focus and the user activated a particular focus ring.');
+    </script>
+    <div id="log"></div>
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math-ref.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math-ref.html
new file mode 100644
index 0000000000..6c5dab9f41
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>font-size: math treated as medium in disconnected canvas (reference)</title>
+<body>
+</body>
+<script>
+var d = new Document();
+var c = d.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+var ctx = c.getContext("2d");
+ctx.font = `medium serif`;
+ctx.fillText("Hello World!", 5, c.height / 2);
+c.toBlob((blob) => {
+  var img = document.createElement("img");
+  const url = URL.createObjectURL(blob);
+  img.src = url;
+  img.style.border = "3px solid cyan";
+  document.body.appendChild(img);
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math.html b/testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math.html
new file mode 100644
index 0000000000..2cecff68f1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/drawing-text-to-the-canvas/canvas.2d.disconnected-font-size-math.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>font-size: math treated as medium in disconnected canvas</title>
+<link rel="match" href="canvas.2d.disconnected-font-size-math-ref.html">
+<body>
+</body>
+<script>
+var d = new Document();
+var c = d.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+var ctx = c.getContext("2d");
+ctx.font = `math serif`;
+ctx.fillText("Hello World!", 5, c.height / 2);
+c.toBlob((blob) => {
+  var img = document.createElement("img");
+  const url = URL.createObjectURL(blob);
+  img.src = url;
+  img.style.border = "3px solid cyan";
+  document.body.appendChild(img);
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/2d.fillStyle.parse.current.notrendered.html b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/2d.fillStyle.parse.current.notrendered.html
new file mode 100644
index 0000000000..37701bacee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/2d.fillStyle.parse.current.notrendered.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.fillStyle.parse.current.notrendered</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 even when element is not rendered");
+_addTest(function(canvas, ctx) {
+
+canvas.setAttribute('style', 'color: #0f0;');
+canvas.style.display = 'none';
+canvas.offsetTop;
+ctx.fillStyle = 'currentColor';
+canvas.style.display = 'inline';
+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/manual/fill-and-stroke-styles/canvas_colorsandstyles_createlineargradient_001.htm b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/canvas_colorsandstyles_createlineargradient_001.htm
new file mode 100644
index 0000000000..5b77c98de7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/canvas_colorsandstyles_createlineargradient_001.htm
@@ -0,0 +1,59 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  createlinearGradient() with two points same</title>
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-createlineargradient" />
+        <meta name="assert" content="If the two points in a linear gradient have identical x,y coordinates, the canvas must paint nothing." />
+        <script type="text/javascript">
+            async_test(function(t) {
+              window.addEventListener("load", t.step_func_done(function runTest() {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+                var width = canvas.width;
+                var height = canvas.height;
+
+                // Start by drawing a left to right, green-to-blue linear gradient.
+                var lingrad = ctx.createLinearGradient(0, 50, 100, 50);
+                lingrad.addColorStop(0, "rgba(0, 255, 0, 1.0)");
+                lingrad.addColorStop(1, "rgba(0, 0, 255, 1.0)");
+                ctx.fillStyle = lingrad;
+                ctx.fillRect(0, 0, 100, 50);
+
+                // Get the current state of the canvas
+                var initial = ctx.getImageData(0, 0, width, height);
+
+                // Nothing must be drawn if the two points in the linear gradient are the same.
+                lingrad = ctx.createLinearGradient(100, 100, 100, 100);
+                lingrad.addColorStop(0, "rgba(255, 0, 0, 1.0)");
+                lingrad.addColorStop(1, "rgba(255, 0, 0, 1.0)");
+                ctx.fillStyle = lingrad;
+                ctx.fillRect(0, 0, 300, 150);
+
+                // Check that nothing is drawn.
+                var after = ctx.getImageData(0, 0, width, height);
+
+                // Asserts
+                assert_equals(initial.width, after.width, "widths are equal");
+                assert_equals(initial.height, after.height, "heights are equal");
+                assert_array_equals(initial.data, after.data, "data are equal");
+
+                for (var i = 0; i < after.data.length; i += 4) {
+                  var r = after.data[i];
+                  var g = after.data[i+1];
+                  var b = after.data[i+2];
+                  var a = after.data[i+3];
+                  assert_false(r == 0xFF && g == 0 && b == 0 && a == 0xFF, "no red");
+                }
+              }));
+            }, "linear gradient from point to self draws nothing");
+        </script>
+    </head>
+    <body>
+        <p>Description: If the two points in a linear gradient have identical x,y coordinates, the canvas must paint nothing.</p>
+        <p>Test passes if there is one left-to-right, green-to-blue linear gradient seen on the page and no red is seen on the page.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-expected.html b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-expected.html
new file mode 100644
index 0000000000..f347abc9d3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-expected.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+  <style type="text/css">
+    div {
+      width: 300px;
+      height: 150px;
+      background: conic-gradient(
+        from 90deg at 100px 50px,
+        red 0.2turn,
+        orange 0.2turn 0.4turn,
+        yellow 0.4turn 0.6turn,
+        green 0.6turn 0.8turn,
+        blue 0.8turn 1.0turn
+      );
+  </style>
+</head>
+<body>
+  <div id="output"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation-expected.html b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation-expected.html
new file mode 100644
index 0000000000..68d750f462
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation-expected.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+  <style type="text/css">
+    div {
+      width: 300px;
+      height: 150px;
+      background: conic-gradient(
+        from 180deg at 100px 50px,
+        red 0.2turn,
+        orange 0.2turn 0.4turn,
+        yellow 0.4turn 0.6turn,
+        green 0.6turn 0.8turn,
+        blue 0.8turn 1.0turn
+      );
+  </style>
+</head>
+<body>
+  <div id="output"></div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation.html b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation.html
new file mode 100644
index 0000000000..e8b213b3d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient-rotation.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Conic gradient</title>
+  <link rel="match" href="conic-gradient-rotation-expected.html"/>
+</head>
+<body>
+  <canvas id="c"></canvas>
+  <script type="text/javascript">
+    const canvas = document.getElementById('c');
+    const ctx = canvas.getContext('2d');
+
+    const grad = ctx.createConicGradient(2.5*Math.PI, 100, 50);
+
+    grad.addColorStop(0, "red");
+    grad.addColorStop(0.2, "red");
+    grad.addColorStop(0.2, "orange");
+    grad.addColorStop(0.4, "orange");
+    grad.addColorStop(0.4, "yellow");
+    grad.addColorStop(0.6, "yellow");
+    grad.addColorStop(0.6, "green");
+    grad.addColorStop(0.8, "green");
+    grad.addColorStop(0.8, "blue");
+
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient.html b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient.html
new file mode 100644
index 0000000000..73fcf6c23e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/fill-and-stroke-styles/conic-gradient.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Conic gradient</title>
+  <link rel="match" href="conic-gradient-expected.html"/>
+</head>
+<body>
+  <canvas id="c"></canvas>
+  <script type="text/javascript">
+    const canvas = document.getElementById('c');
+    const ctx = canvas.getContext('2d');
+
+    const grad = ctx.createConicGradient(0, 100, 50);
+
+    grad.addColorStop(0, "red");
+    grad.addColorStop(0.2, "red");
+    grad.addColorStop(0.2, "orange");
+    grad.addColorStop(0.4, "orange");
+    grad.addColorStop(0.4, "yellow");
+    grad.addColorStop(0.6, "yellow");
+    grad.addColorStop(0.6, "green");
+    grad.addColorStop(0.8, "green");
+    grad.addColorStop(0.8, "blue");
+
+    ctx.fillStyle = grad;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  </script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-fillStyle-opacity.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-fillStyle-opacity.html
new file mode 100644
index 0000000000..b5f9d98b89
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-fillStyle-opacity.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-opacity-expected.html"/>
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-14000">
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'rgba(0, 128, 128, 0.75)';
+  ctx.fillRect(10, 10, 50, 50);
+  ctx.fillStyle = 'rgba(255, 0, 255, 0.5)';
+  ctx.fillRect(70, 10, 50, 50);
+  ctx.fillStyle = 'rgba(255, 165, 0, 0.25)';
+  ctx.fillRect(10, 70, 50, 50);
+  ctx.fillStyle = 'rgba(210, 105, 30, 0)';
+  ctx.fillRect(70, 70, 50, 50);
+
+  ctx.fillStyle = 'rgba(0, 255, 255, 0.8)';
+  ctx.fillRect(10, 150, 50, 50);
+  ctx.fillStyle = 'rgba(255, 0, 0, 0.6)';
+  ctx.fillRect(20, 150, 50, 50);
+  ctx.fillStyle = 'rgba(255, 255, 0, 0.4)';
+  ctx.fillRect(30, 150, 50, 50);
+  ctx.fillStyle = 'rgba(0, 128, 0, 0.2)';
+  ctx.fillRect(40, 150, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle-expected.html
new file mode 100644
index 0000000000..f87794f0b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle-expected.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<body>
+  <div id="sq-1"></div>
+  <div id="sq-2"></div>
+  <div id="sq-3"></div>
+  <div id="sq-4"></div>
+</body>
+<style>
+  /*The expected behavior when setting the opacity through different methods
+  is that the opacity of the resulting drawn element is the product of the opacity
+  value set by each of the methods.*/
+  div{
+    width: 50px;
+    height: 50px;
+    position: absolute;
+  }
+  #sq-1{
+    background-color: black;
+    left:  18px;
+    top:  18px;
+    opacity: 0.125;
+  }
+  #sq-2{
+    background-color: black;
+    left:  78px;
+    top:  18px;
+    opacity: 0.03125;
+  }
+  #sq-3{
+    background-color: black;
+    left:  18px;
+    top:  78px;
+    opacity: 0.1875;
+  }
+  #sq-4{
+    background-color: black;
+    left:  78px;
+    top:  78px;
+    opacity: 0.016;
+  }
+</style>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle.html
new file mode 100644
index 0000000000..24c97d62ec
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity-alpha-and-fillStyle.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-filter-opacity-alpha-and-fillStyle-expected.html"/>
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-10000">
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  /*
+  The expected behavior when setting the opacity through different methods
+  is that the opacity of the resulting drawn element is the product of the opacity
+  value set by each of the methods.
+  */
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  ctx.globalAlpha = 0.5;
+  ctx.fillStyle = 'rgba(0,0,0,0.5)';
+  ctx.filter = 'opacity(50%)';
+  ctx.fillRect(10, 10, 50, 50);
+
+  ctx.globalAlpha = 0.5;
+  ctx.fillStyle = 'rgba(0,0,0,0.25)';
+  ctx.filter = 'opacity(25%)';
+  ctx.fillRect(70, 10, 50, 50);
+
+  ctx.globalAlpha = 0.75;
+  ctx.fillStyle = 'rgba(0,0,0,0.5)';
+  ctx.filter = 'opacity(50%)';
+  ctx.fillRect(10, 70, 50, 50);
+
+  ctx.globalAlpha = 0.8;
+  ctx.fillStyle = 'rgba(0,0,0,0.2)';
+  ctx.filter = 'opacity(10%)';
+  ctx.fillRect(70, 70, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity.html
new file mode 100644
index 0000000000..cb2fc018af
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-opacity.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-opacity-expected.html"/>
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-14000">
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.filter = 'opacity(75%)';
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(10, 10, 50, 50);
+  ctx.filter = 'opacity(50%)';
+  ctx.fillStyle = 'magenta';
+  ctx.fillRect(70, 10, 50, 50);
+  ctx.filter = 'opacity(25%)';
+  ctx.fillStyle = 'orange';
+  ctx.fillRect(10, 70, 50, 50);
+  ctx.filter = 'opacity(0%)';
+  ctx.fillStyle = 'chocolate';
+  ctx.fillRect(70, 70, 50, 50);
+
+  ctx.filter = 'opacity(80%)';
+  ctx.fillStyle = 'cyan';
+  ctx.fillRect(10, 150, 50, 50);
+  ctx.filter = 'opacity(60%)';
+  ctx.fillStyle = 'red';
+  ctx.fillRect(20, 150, 50, 50);
+  ctx.filter = 'opacity(40%)';
+  ctx.fillStyle = 'yellow';
+  ctx.fillRect(30, 150, 50, 50);
+  ctx.filter = 'opacity(20%)';
+  ctx.fillStyle = 'green';
+  ctx.fillRect(40, 150, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur-expected.html
new file mode 100644
index 0000000000..1f218b4bd2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur-expected.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  /*
+  The shadow and shadow blur effects should be the same regardless if they were
+  defined with filters or properties. The blur parameter is set as double when
+  using the shadowBlur property since its uses havlf of the value set as the
+  standard deviation for the gaussian blur (https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-shadowblur-dev)
+  while the filter parameter is used directly as the standard deviation
+  (https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow). The
+  fuzziness is defined with a maxDifference of 13 as to be the 5% of 256, since
+  the CSS spec defines the expected behavior in relation to an ideal Gaussian blur
+   with a tolerance of 5%. See: https://drafts.csswg.org/css-backgrounds-3/#shadow-blur.
+  */
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.shadowOffsetX = 10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowBlur = 4;
+  ctx.shadowColor = 'red';
+  ctx.fillRect(20, 20, 50, 50);
+  ctx.shadowBlur = 8;
+  ctx.shadowColor = 'blue';
+  ctx.fillRect(100, 20, 50, 50);
+  ctx.shadowBlur = 20;
+  ctx.shadowColor = 'yellow';
+  ctx.fillRect(20, 100, 50, 50);
+  ctx.shadowBlur = 30;
+  ctx.shadowColor = 'cyan';
+  ctx.fillRect(100, 100, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur.html
new file mode 100644
index 0000000000..ab3699906d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-blur.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-filter-shadow-and-properties-blur-expected.html"/>
+<meta name="fuzzy" content="maxDifference=0-13; totalPixels=0-25600">
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  /*
+  The shadow and shadow blur effects should be the same regardless if they were
+  defined with filters or properties. The blur parameter is set as double when
+  using the shadowBlur property since its uses havlf of the value set as the
+  standard deviation for the gaussian blur (https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-shadowblur-dev)
+  while the filter parameter is used directly as the standard deviation
+  (https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow). The
+  fuzziness is defined with a maxDifference of 13 as to be the 5% of 256, since
+  the CSS spec defines the expected behavior in relation to an ideal Gaussian blur
+   with a tolerance of 5%. See: https://drafts.csswg.org/css-backgrounds-3/#shadow-blur.
+  */
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.filter = 'drop-shadow(10px 10px 2px red)';
+  ctx.fillRect(20, 20, 50, 50);
+  ctx.filter = 'drop-shadow(10px 10px 4px blue)';
+  ctx.fillRect(100, 20, 50, 50);
+  ctx.filter = 'drop-shadow(10px 10px 10px yellow)';
+  ctx.fillRect(20, 100, 50, 50);
+  ctx.filter = 'drop-shadow(10px 10px 15px cyan)';
+  ctx.fillRect(100, 100, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-expected.html
new file mode 100644
index 0000000000..294a219b70
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties-expected.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  /*
+  The expected behavior when both shadow properties and filters are used at the
+  same time is that the filter is applied to the elements drawn and the shadow
+  properties create another shadow that includes even shadows of the
+   filter-generated shadows.
+  */
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'cyan';
+  ctx.fillRect(40, 40, 50, 50);
+  ctx.fillRect(30, 30, 50, 50);
+  ctx.fillStyle = 'red';
+  ctx.fillRect(20, 20, 50, 50);
+  ctx.fillStyle = 'black';
+  ctx.fillRect(10, 10, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties.html
new file mode 100644
index 0000000000..2057b95c3e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-and-properties.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-filter-shadow-and-properties-expected.html"/>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  /*
+  The expected behavior when both shadow properties and filters are used at the
+  same time is that the filter is applied to the elements drawn and the shadow
+  properties create another shadow that includes even shadows of the
+   filter-generated shadows.
+  */
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.shadowColor = 'cyan';
+  ctx.shadowOffsetX = 20;
+  ctx.shadowOffsetY = 20;
+  ctx.filter = 'drop-shadow(10px 10px 0 red)';
+  ctx.fillRect(10, 10, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-expected.html
new file mode 100644
index 0000000000..04bc6392cc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow-expected.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  /*
+  The expected behavior of filter-generated shadows is tested against
+  a drawing using only rectangles that draws the shadows manually.
+  */
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'red';
+  ctx.fillRect(20, 20, 50, 50);
+  ctx.fillStyle = 'black';
+  ctx.fillRect(10, 10, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow.html
new file mode 100644
index 0000000000..ddc6c89ee5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-filter-shadow.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-filter-shadow-expected.html"/>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  /*
+  The expected behavior of filter-generated shadows is tested against
+  a drawing using only rectangles that draws the shadows manually.
+  */
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.filter = 'drop-shadow(10px 10px 0 red)';
+  ctx.fillRect(10, 10, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-globalAlpha.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-globalAlpha.html
new file mode 100644
index 0000000000..6d7bbcd03d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-globalAlpha.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-opacity-expected.html"/>
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-14000">
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.globalAlpha = 0.75;
+  ctx.fillStyle = 'teal';
+  ctx.fillRect(10, 10, 50, 50);
+  ctx.globalAlpha = 0.5;
+  ctx.fillStyle = 'magenta';
+  ctx.fillRect(70, 10, 50, 50);
+  ctx.globalAlpha = 0.25;
+  ctx.fillStyle = 'orange';
+  ctx.fillRect(10, 70, 50, 50);
+  ctx.globalAlpha = 0;
+  ctx.fillStyle = 'chocolate';
+  ctx.fillRect(70, 70, 50, 50);
+
+  ctx.globalAlpha = 0.8;
+  ctx.fillStyle = 'cyan';
+  ctx.fillRect(10, 150, 50, 50);
+  ctx.globalAlpha = 0.6;
+  ctx.fillStyle = 'red';
+  ctx.fillRect(20, 150, 50, 50);
+  ctx.globalAlpha = 0.4;
+  ctx.fillStyle = 'yellow';
+  ctx.fillRect(30, 150, 50, 50);
+  ctx.globalAlpha = 0.2;
+  ctx.fillStyle = 'green';
+  ctx.fillRect(40, 150, 50, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes-expected.html
new file mode 100644
index 0000000000..3eb7581981
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes-expected.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<body>
+</body>
+<script>
+  /*
+  Compare how the opacity is handled in different blend modes when setting its
+  value with filters or with properties.
+  */
+
+  function drawSquares(canvasId, x, y, compositeOperation) {
+    var canvas = document.getElementById(canvasId);
+    var ctx = canvas.getContext('2d');
+    canvas.style.position = 'absolute';
+    canvas.style.left = `${x}px`;
+    canvas.style.top = `${y}px`;
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.globalAlpha = 1.0;
+    ctx.fillStyle = 'green';
+    ctx.fillRect(0, 0, 200, 60);
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.globalAlpha = 0.7;
+    ctx.fillStyle = 'red';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.globalCompositeOperation = compositeOperation;
+    ctx.globalAlpha = 0.5;
+    ctx.fillStyle = 'yellow';
+    ctx.fillRect(25, 25, 50, 50);
+  }
+
+  // Fomatted in the same matrix as the drawn elements.
+  var compositeOperations =
+    ['source-over', 'source-in', 'source-out', 'source-atop','destination-over',
+    'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy',
+    'xor', 'multiply', 'screen', 'overlay', 'darken',
+    'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+    'difference', 'exclusion', 'hue', 'saturation', 'color',
+    'luminosity'];
+
+  for (var i = 0; i < compositeOperations.length; i++){
+    var canvas = document.createElement('canvas');
+    canvas.id = `canvas-${i}`;
+    document.body.appendChild(canvas);
+    drawSquares(canvas.id, (i%5)*300, Math.floor(i/5)*300,
+      compositeOperations[i]);
+  }
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html
new file mode 100644
index 0000000000..a2d513eb62
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-blend-modes.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<link rel="match" href="canvas-opacity-blend-modes-expected.html"/>
+<meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-390000">
+<body>
+</body>
+<script>
+  /*
+  Compare how the opacity is handled in different blend modes when setting its
+  value with filters or with properties.
+  */
+
+  function drawSquares(canvasId, x, y, compositeOperation) {
+    var canvas = document.getElementById(canvasId);
+    var ctx = canvas.getContext('2d');
+    canvas.style.position = 'absolute';
+    canvas.style.left = `${x}px`;
+    canvas.style.top = `${y}px`;
+
+    ctx.globalCompositeOperation = 'source-over';
+    ctx.filter = 'opacity(100%)';
+    ctx.fillStyle = 'green';
+    ctx.fillRect(0, 0, 200, 60);
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(0, 0, 50, 50);
+    ctx.filter = 'opacity(70%)';
+    ctx.fillStyle = 'red';
+    ctx.fillRect(50, 0, 50, 50);
+    ctx.globalCompositeOperation = compositeOperation;
+    ctx.filter = 'opacity(50%)';
+    ctx.fillStyle = 'yellow';
+    ctx.fillRect(25, 25, 50, 50);
+  }
+
+  // Fomatted in the same matrix as the drawn elements.
+  var compositeOperations =
+    ['source-over', 'source-in', 'source-out', 'source-atop','destination-over',
+    'destination-in', 'destination-out', 'destination-atop', 'lighter', 'copy',
+    'xor', 'multiply', 'screen', 'overlay', 'darken',
+    'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
+    'difference', 'exclusion', 'hue', 'saturation', 'color',
+    'luminosity'];
+
+  for (var i = 0; i < compositeOperations.length; i++){
+    var canvas = document.createElement('canvas');
+    canvas.id = `canvas-${i}`;
+    document.body.appendChild(canvas);
+    drawSquares(canvas.id, (i%5)*300, Math.floor(i/5)*300,
+      compositeOperations[i]);
+  }
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-expected.html
new file mode 100644
index 0000000000..caf6b53ce3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/canvas-opacity-expected.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<body>
+  <div id="sq-1"></div>
+  <div id="sq-2"></div>
+  <div id="sq-3"></div>
+  <div id="sq-4"></div>
+  <div id="sq-5"></div>
+  <div id="sq-6"></div>
+  <div id="sq-7"></div>
+  <div id="sq-8"></div>
+</body>
+<style>
+  div{
+    width: 50px;
+    height: 50px;
+    position: absolute;
+  }
+  #sq-1{
+    background-color: teal;
+    left:  18px;
+    top:  18px;
+    opacity: 0.75;
+  }
+  #sq-2{
+    background-color: magenta;
+    left:  78px;
+    top:  18px;
+    opacity: 0.5;
+  }
+  #sq-3{
+    background-color: orange;
+    left:  18px;
+    top:  78px;
+    opacity: 0.25;
+  }
+  #sq-4{
+    background-color: chocolate;
+    left:  78px;
+    top:  78px;
+    opacity: 0;
+  }
+  #sq-5{
+    background-color: cyan;
+    left:  18px;
+    top:  158px;
+    opacity: 0.8;
+  }
+  #sq-6{
+    background-color: red;
+    left:  28px;
+    top:  158px;
+    opacity: 0.6;
+  }
+  #sq-7{
+    background-color: yellow;
+    left:  38px;
+    top:  158px;
+    opacity: 0.4;
+  }
+  #sq-8{
+    background-color: green;
+    left:  48px;
+    top:  158px;
+    opacity: 0.2;
+  }
+</style>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-crash.html b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-crash.html
new file mode 100644
index 0000000000..f64379c792
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/svg-filter-crash.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<script>
+  document.addEventListener('DOMContentLoaded', async () => {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    const filter = document.createElementNS('http://www.w3.org/2000/svg', 'filter')
+    filter.setAttribute('id', 'id_0')
+    svg.appendChild(filter)
+    document.documentElement.appendChild(svg)
+    const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas')
+    const context = canvas.getContext('2d')
+    context.filter = 'url(#id_0) url(#id_0) sepia() url(#id_0)'
+    svg.setAttribute('style', 'display: inline-block;')
+  })
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur-expected.html
new file mode 100644
index 0000000000..ae8911b2de
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur-expected.html
@@ -0,0 +1,19 @@
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.filter = 'blur(2px)';
+  ctx.fillStyle = 'yellow';
+  ctx.fillRect(10,10,100,100);
+  ctx.filter = 'blur(5px)';
+  ctx.fillStyle = 'magenta';
+  ctx.fillRect(120, 10, 100, 100);
+  ctx.filter = 'blur(5px) blur(10px)';
+  ctx.fillStyle = 'cyan';
+  ctx.fillRect(10, 120, 100, 100);
+  ctx.filter = 'none';
+  ctx.fillStyle = 'black';
+  ctx.fillRect(120, 120, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur.html
new file mode 100644
index 0000000000..9fe7ef120c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-blur.html
@@ -0,0 +1,24 @@
+<head>
+    <link rel="match" href="canvas-filter-object-blur-expected.html">
+</head>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.filter = new CanvasFilter({name: "gaussianBlur", stdDeviation: 2});
+  ctx.fillStyle = 'yellow';
+  ctx.fillRect(10,10,100,100);
+  ctx.filter = new CanvasFilter({name: "gaussianBlur", stdDeviation: 5});
+  ctx.fillStyle = 'magenta';
+  ctx.fillRect(120, 10, 100, 100);
+  ctx.filter = new CanvasFilter([
+    {name: "gaussianBlur", stdDeviation: 5},
+    {name: "gaussianBlur", stdDeviation: 10}]);
+  ctx.fillStyle = 'cyan';
+  ctx.fillRect(10, 120, 100, 100);
+  ctx.filter = 'none';
+  ctx.fillStyle = 'black';
+  ctx.fillRect(120, 120, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer-expected.html
new file mode 100644
index 0000000000..a2351cbcf2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer-expected.html
@@ -0,0 +1,65 @@
+<body>
+  <canvas id="canvas" width="500" height="100"></canvas>
+  <svg width="0", height="0">
+    <defs>
+      <filter color-interpolation-filters='sRGB' id="Identity" filterUnits="objectBoundingBox"
+              x="0%" y="0%" width="100%" height="100%">
+        <feComponentTransfer>
+          <feFuncR type="identity"/>
+          <feFuncG type="identity"/>
+          <feFuncB type="identity"/>
+          <feFuncA type="identity"/>
+        </feComponentTransfer>
+      </filter>
+      <filter color-interpolation-filters='sRGB' id="Table">
+        <feComponentTransfer>
+          <feFuncR type="table" tableValues="0 2 0.5 1"/>
+          <feFuncG type="table" tableValues="1 -1 5 0"/>
+          <feFuncB type="table" tableValues="0 1 1 0"/>
+        </feComponentTransfer>
+      </filter>
+      <filter color-interpolation-filters='sRGB' id="Discrete">
+        <feComponentTransfer>
+          <feFuncR type="discrete" tableValues="0 2 0.5 1"/>
+          <feFuncG type="discrete" tableValues="1 -1 5 0"/>
+          <feFuncB type="discrete" tableValues="0 1 1 0"/>
+        </feComponentTransfer>
+      </filter>
+      <filter color-interpolation-filters='sRGB' id="Linear">
+        <feComponentTransfer>
+          <feFuncR type="linear" slope=".5" intercept=".25"/>
+          <feFuncG type="linear" slope="1.5" intercept="0"/>
+          <feFuncB type="linear" slope="-0.5" intercept=".5"/>
+        </feComponentTransfer>
+      </filter>
+      <filter color-interpolation-filters='sRGB' id="Gamma">
+        <feComponentTransfer>
+          <feFuncR type="gamma" amplitude="2" exponent="5" offset="-0.5"/>
+          <feFuncG type="gamma" amplitude="0.9" exponent="3" offset="0.3"/>
+          <feFuncB type="gamma" amplitude="1.1" exponent="1" offset="0.1"/>
+        </feComponentTransfer>
+      </filter>
+    </defs>
+  </svg>
+</body>
+<script type="text/javascript">
+  const ctx = document.getElementById("canvas").getContext("2d");
+
+  const grad = ctx.createLinearGradient(10, 0, 490, 0);
+  grad.addColorStop(0, "#f00");
+  grad.addColorStop(0.33, "#0f0");
+  grad.addColorStop(0.67, "#00f");
+  grad.addColorStop(1, "#000");
+  ctx.fillStyle = grad;
+
+  ctx.filter = "url('#Identity')";
+  ctx.fillRect(10, 10, 480, 10);
+  ctx.filter = "url('#Table')";
+  ctx.fillRect(10, 30, 480, 10);
+  ctx.filter = "url('#Discrete')";
+  ctx.fillRect(10, 50, 480, 10);
+  ctx.filter = "url('#Linear')";
+  ctx.fillRect(10, 70, 480, 10);
+  ctx.filter = "url('#Gamma')";
+  ctx.fillRect(10, 90, 480, 10);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html
new file mode 100644
index 0000000000..47889c0db2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-component-transfer.html
@@ -0,0 +1,62 @@
+<head>
+    <link rel="match" href="canvas-filter-object-component-transfer-expected.html">
+</head>
+<body>
+  <canvas id="canvas" width="500" height="100"></canvas>
+</body>
+<script>
+  const ctx = document.getElementById("canvas").getContext("2d");
+
+  const grad = ctx.createLinearGradient(10, 0, 490, 0);
+  grad.addColorStop(0, "#f00");
+  grad.addColorStop(0.33, "#0f0");
+  grad.addColorStop(0.67, "#00f");
+  grad.addColorStop(1, "#000");
+  ctx.fillStyle = grad;
+
+  const identityFilter = new CanvasFilter({
+    name: "componentTransfer",
+    funcR: {type: "identity"},
+    funcG: {type: "identity"},
+    funcB: {type: "identity"},
+    funcA: {type: "identity"},
+  });
+  ctx.filter = identityFilter;
+  ctx.fillRect(10, 10, 480, 10);
+
+  const tableFilter = new CanvasFilter({
+    name: "componentTransfer",
+    funcR: {type: "table", tableValues: [0, 2, 0.5, 1]},
+    funcG: {type: "table", tableValues: [1, -1, 5, 0]},
+    funcB: {type: "table", tableValues: [0, 1, 1, 0]},
+  });
+  ctx.filter = tableFilter;
+  ctx.fillRect(10, 30, 480, 10);
+
+  const discreteFilter = new CanvasFilter({
+    name: "componentTransfer",
+    funcR: {type: "discrete", tableValues: [0, 2, 0.5, 1]},
+    funcG: {type: "discrete", tableValues: [1, -1, 5, 0]},
+    funcB: {type: "discrete", tableValues: [0, 1, 1, 0]},
+  });
+  ctx.filter = discreteFilter;
+  ctx.fillRect(10, 50, 480, 10);
+
+  const linearFilter = new CanvasFilter({
+    name: "componentTransfer",
+    funcR: {type: "linear", slope: 0.5, intercept: 0.25},
+    funcG: {type: "linear", slope: 1.5, intercept: 0},
+    funcB: {type: "linear", slope: -0.5, intercept: 0.5},
+  });
+  ctx.filter = linearFilter;
+  ctx.fillRect(10, 70, 480, 10);
+
+  const gammaFilter = new CanvasFilter({
+    name: "componentTransfer",
+    funcR: {type: "gamma", amplitude: 2, exponent: 5, offset: -0.5},
+    funcG: {type: "gamma", amplitude: 0.9, exponent: 3, offset: 0.3},
+    funcB: {type: "gamma", amplitude: 1.1, exponent: 1, offset: 0.1},
+  });
+  ctx.filter = gammaFilter;
+  ctx.fillRect(10, 90, 480, 10);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix-expected.html
new file mode 100644
index 0000000000..896a93542e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix-expected.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<style type="text/css">
+  canvas {
+    margin: 5px;
+  }
+</style>
+<body>
+  <svg width="0" height="0">
+    <filter color-interpolation-filters='sRGB' id="justKernel">
+      <feConvolveMatrix
+          kernelMatrix="3 0 0 0 0 0 0 0 -3"/>
+    </filter>
+    <filter color-interpolation-filters='sRGB' id="preserveAlpha">
+      <feConvolveMatrix
+          kernelMatrix="3 0 0 0 0 0 0 0 -3"
+          preserveAlpha="true"/>
+    </filter>
+    <filter color-interpolation-filters='sRGB' id="target">
+      <feConvolveMatrix
+          kernelMatrix="3 0 0 0 0 0 0 0 -3"
+          targetX="2" targetY="2"/>
+    </filter>
+    <filter color-interpolation-filters='sRGB' id="divisor">
+      <feConvolveMatrix
+          kernelMatrix="3 0 0 0 0 0 0 0 -3"
+          divisor="3"/>
+    </filter>
+    <filter color-interpolation-filters='sRGB' id="bias">
+      <feConvolveMatrix
+          kernelMatrix="3 0 0 0 0 0 0 0 -3"
+          bias="0.5"/>
+    </filter>
+    <filter color-interpolation-filters='sRGB' id="edgeMode">
+      <feConvolveMatrix
+          kernelMatrix="3 0 0 0 0 0 0 0 -3"
+          edgeMode="wrap"/>
+    </filter>
+  </svg>
+</body>
+<script type="text/javascript">
+
+const filters = [
+  "url('#justKernel')",
+  "url('#preserveAlpha')",
+  "url('#target')",
+  "url('#divisor')",
+  "url('#bias')",
+  "url('#edgeMode')",
+];
+
+function draw(ctx) {
+  ctx.fillRect(0, 20, 120, 100);
+
+  ctx.beginPath();
+  ctx.arc(150, 70, 50, 0, 2*Math.PI);
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.moveTo(220, 20);
+  ctx.lineTo(170, 120);
+  ctx.lineTo(270, 120);
+  ctx.lineTo(220, 20);
+  ctx.fill();
+}
+
+for (f of filters) {
+  const canvas = document.createElement("canvas");
+  document.body.prepend(canvas);
+  const ctx = canvas.getContext("2d");
+  ctx.filter = "blur(0px)";
+  ctx.fillStyle = "rgba(0,255,0,0.5)";
+  draw(ctx);
+  ctx.fillStyle = "rgba(255,0,255,0.5)";
+  ctx.filter = f;
+  draw(ctx);
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix.html
new file mode 100644
index 0000000000..1dfd602d13
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-convolve-matrix.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<head>
+    <link rel="match" href="canvas-filter-object-convolve-matrix-expected.html">
+    <style type="text/css">
+      canvas {
+        margin: 5px;
+      }
+    </style>
+</head>
+<body>
+</body>
+<script>
+function makeConvolveFilter(options) {
+  const KERNEL_MATRIX = [
+    [3, 0, 0],
+    [0, 0, 0],
+    [0, 0, -3],
+  ];
+
+  options = Object.assign(options, {
+    kernelMatrix: KERNEL_MATRIX, name: "convolveMatrix"});
+  return new CanvasFilter(options);
+}
+
+const test_cases = [
+  {},
+  {preserveAlpha: true},
+  {targetX: 2, targetY: 2},
+  {divisor: 3},
+  {bias: 0.5},
+  {edgeMode: "wrap"}
+];
+
+function draw(ctx) {
+  ctx.fillRect(0, 20, 120, 100);
+
+  ctx.beginPath();
+  ctx.arc(150, 70, 50, 0, 2*Math.PI);
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.moveTo(220, 20);
+  ctx.lineTo(170, 120);
+  ctx.lineTo(270, 120);
+  ctx.lineTo(220, 20);
+  ctx.fill();
+}
+
+for (tc of test_cases) {
+  const canvas = document.createElement("canvas");
+  document.body.prepend(canvas);
+  const ctx = canvas.getContext("2d");
+  ctx.filter = "blur(0px)";
+  ctx.fillStyle = "rgba(0,255,0,0.5)";
+  draw(ctx);
+  ctx.fillStyle = "rgba(255,0,255,0.5)";
+  ctx.filter = makeConvolveFilter(tc);
+  draw(ctx);
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence-expected.html
new file mode 100644
index 0000000000..ff0eebe2e0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence-expected.html
@@ -0,0 +1,37 @@
+<body>
+  <svg style="display:none">>
+    <filter id="base">
+      <feTurbulence baseFrequency="0.025"/>
+    </filter>
+    <filter id="base2d">
+      <feTurbulence baseFrequency="0.025, 0.1"/>
+    </filter>
+    <filter id="highFrequency">
+      <feTurbulence baseFrequency="0.05"/>
+    </filter>
+    <filter id="seed">
+      <feTurbulence baseFrequency="0.025" seed="100"/>
+    </filter>
+    <filter id="numOctaves">
+      <feTurbulence baseFrequency="0.025" numOctaves="2"/>
+    </filter>
+    <filter id="empty">
+      <feTurbulence/>
+    </filter>
+    <filter id="fractalNoise">
+      <feTurbulence baseFrequency="0.025" type="fractalNoise"/>
+    </filter>
+    <filter id="stitchTiles">
+      <feTurbulence baseFrequency="0.025" stitchTiles="noStitch"/>
+    </filter>
+</body>
+<script>
+  testCases = document.getElementsByTagName("filter");
+  for (tc of testCases) {
+    const canvas = document.createElement("canvas");
+    document.body.appendChild(canvas);
+    const ctx = canvas.getContext("2d");
+    ctx.filter = `url(#${tc.id})`;
+    ctx.fillRect(0, 0, 1, 1);
+  }
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence.html
new file mode 100644
index 0000000000..b5b494825e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/canvas-filter-object-turbulence.html
@@ -0,0 +1,26 @@
+<head>
+    <link rel="match" href="canvas-filter-object-blur-expected.html">
+</head>
+<body>
+</body>
+<script>
+  const testCases = [
+    {baseFrequency: 0.025},
+    {baseFrequency: [0.025, 0.1]},
+    {baseFrequency: 0.05},
+    {baseFrequency: 0.025, seed: 100},
+    {baseFrequency: 0.025, numOctaves: 2},
+    {},
+    {baseFrequency: 0.025, type: "fractalNoise"},
+    {baseFrequency: 0.025, stitchTiles: "stitch"},
+  ]
+
+  for (tc of testCases) {
+    const canvas = document.createElement("canvas");
+    document.body.appendChild(canvas);
+    const ctx = canvas.getContext("2d");
+    const filterOptions = {...{name: "turbulence"}, ...tc};
+    ctx.filter = new CanvasFilter(filterOptions);
+    ctx.fillRect(0, 0, 1, 1);
+  }
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion-expected.html
new file mode 100644
index 0000000000..f043b0e762
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion-expected.html
@@ -0,0 +1,30 @@
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // preserveAlpha for convolveMatrix is the only boolean so far implemented
+  function drawWithConvolveFilter(x, y, preserveAlphaValue) {
+    ctx.filter = new CanvasFilter({
+      name: "convolveMatrix",
+      kernelMatrix: [[1, 0], [0, 1]],
+      preserveAlpha: preserveAlphaValue,
+    });
+    ctx.fillRect(x, y, 30, 30);
+  }
+
+  ctx.fillStyle = "rgba(255,0,255,0.5)";
+  let x = 10;
+  let y = 10;
+  for (var i = 0; i < 6; i++) {
+    drawWithConvolveFilter(x, y, true);
+    x += 40;
+  }
+  y = 50;
+  x = 10;
+  for (var i = 0; i < 5; i++) {
+    drawWithConvolveFilter(x, y, false);
+    x += 40;
+  }
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion.html
new file mode 100644
index 0000000000..97ade79f37
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-boolean-conversion.html
@@ -0,0 +1,58 @@
+<head>
+    <link rel="match" href="canvas-filter-boolean-conversion-expected.html">
+</head>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  // Test the built-in ECMAScript types Undefined, Null, Boolean, String, Number, and Object
+  // as input to the CanvasFilter resolver when a bool is the intended result.
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // preserveAlpha for convolveMatrix is the only boolean so far implemented
+  function drawWithConvolveFilter(x, y, preserveAlphaValue) {
+    ctx.filter = new CanvasFilter({
+      name: "convolveMatrix",
+      kernelMatrix: [[1, 0], [0, 1]],
+      preserveAlpha: preserveAlphaValue,
+    });
+    ctx.fillRect(x, y, 30, 30);
+  }
+
+  const trueTestCases = [
+    true,
+    { valueOf() { return false; }},
+    "foo",
+    1,
+    {},
+    []
+  ];
+
+  const falseTestCases = [
+    false,
+    "",
+    0,
+    null,
+    undefined,
+  ];
+
+  ctx.fillStyle = "rgba(255,0,255,0.5)";
+  let x = 10;
+  let y = 10;
+  for (tc of trueTestCases) {
+    drawWithConvolveFilter(x, y, tc);
+    x += 40;
+  }
+  y = 50;
+  x = 10;
+  for (tc of falseTestCases) {
+    drawWithConvolveFilter(x, y, tc);
+    x += 40;
+  }
+
+  ctx.filter = new CanvasFilter({
+    name: "componentTransfer",
+    funcR: {type: "discrete", tableValues: 0.5},
+  });
+  ctx.fillRect(10, 10, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion-expected.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion-expected.html
new file mode 100644
index 0000000000..8b4262ed04
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion-expected.html
@@ -0,0 +1,26 @@
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  var ctx = document.getElementById('canvas').getContext('2d');
+  // Null and False both evaluate to zero
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 0});
+  ctx.fillRect(10, 10, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 0});
+  ctx.fillRect(50, 10, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 0});
+  ctx.fillRect(90, 10, 30, 30);
+  // True evaluates to one
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 1});
+  ctx.fillRect(130, 10, 30, 30);
+  // String, Number and Object should all work
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+  ctx.fillRect(10, 50, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+  ctx.fillRect(50, 50, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+  ctx.fillRect(90, 50, 30, 30);
+  // Valid sequence
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+  ctx.fillRect(130, 50, 30, 30);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion.html
new file mode 100644
index 0000000000..c742633224
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-long-conversion.html
@@ -0,0 +1,35 @@
+<head>
+    <link rel="match" href="canvas-filter-long-conversion-expected.html">
+</head>
+<body>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+  // Test the built-in ECMAScript types Undefined, Null, Boolean, String, Number, and Object
+  // as input to the CanvasFilter resolver when a long is the intended result.
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // Null, False and [] evaluate to zero
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: null});
+  ctx.fillRect(10, 10, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: false});
+  ctx.fillRect(50, 10, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: []});
+  ctx.fillRect(90, 10, 30, 30);
+  // True evaluates to one
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: true});
+  ctx.fillRect(130, 10, 30, 30);
+  // String, Number and Object should all work
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: "5"});
+  ctx.fillRect(10, 50, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: 5});
+  ctx.fillRect(50, 50, 30, 30);
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: { valueOf() { return 5; }}});
+  ctx.fillRect(90, 50, 30, 30);
+  // Valid sequence
+  ctx.filter  = new CanvasFilter({filter: "gaussianBlur", stdDeviation: [5]});
+  ctx.fillRect(130, 50, 30, 30);
+
+  // Undefined and other inputs that throw exceptions are tested in:
+  // html/canvas/element/filters/2d.filter.canvasFilterObject.blur.exceptions.html
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-sequence-conversion.html b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-sequence-conversion.html
new file mode 100644
index 0000000000..d48627867e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/filters/tentative/idl-conversions/canvas-filter-sequence-conversion.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<title>Canvas test: canvas-filter-sequence-conversion</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>canvas-filter-sequence-conversion</h1>
+<p class="desc">Test converting types into sequences</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("Test pixels on CanvasFilter() various inputs to tableValues (which is a sequence)");
+_addTest(function(canvas, ctx) {
+
+  // Inputs to parameters that are expecting sequence<long>. Results are either the value of the
+  // red pixel drawing using the resultant filter or that we expect this input to throw an error.
+  const testCases = [
+    {input: [], result: 0},
+    {input: [0.5], result: 127},
+    {input: ["0.5"], result: 127},
+    {input: 1, result: "throws"},
+    {input: {}, result: "throws"},
+    {input: false, result: "throws"},
+    {input: true, result: "throws"},
+    {input: NaN, result: "throws"},
+    {input: { valueOf() { return [1]; }}, result: "throws"},
+  ];
+
+  // A simple filter that just overrides the red channel if successful.
+  function makeFilter(value) {
+    return new CanvasFilter({
+      name: "componentTransfer",
+      funcR: {type: "table", tableValues: value}
+    });
+  }
+
+  for (const tc of testCases) {
+    if (tc.result === "throws") {
+      assert_throws_js(TypeError, function(){ makeFilter(tc.input) });
+    } else {
+      ctx.reset();
+      ctx.filter = makeFilter(tc.input);
+      ctx.fillRect(0, 0, 100, 100);
+      _assertPixelApprox(canvas, 5, 5, tc.result,0,0,255, 2);
+    }
+  }
+  t.done();
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/image-smoothing/imagesmoothing.html b/testing/web-platform/tests/html/canvas/element/manual/image-smoothing/imagesmoothing.html
new file mode 100644
index 0000000000..1a86a8f201
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/image-smoothing/imagesmoothing.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext2D imageSmoothingEnabled test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#image-smoothing">
+<script>
+function createTestImage() {
+  var image = document.createElement('canvas');
+  var imgctx = image.getContext('2d');
+  imgctx.fillStyle = "#F00";
+  imgctx.fillRect(0, 0, 2, 2);
+  imgctx.fillStyle = "#0F0";
+  imgctx.fillRect(0, 0, 1, 1);
+  return image;
+}
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  assert_true(ctx.imageSmoothingEnabled);
+}, "When the canvas context is created, imageSmoothingEnabled must be set to true.");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  ctx.imageSmoothingEnabled = false;
+  assert_false(ctx.imageSmoothingEnabled);
+}, "On getting imageSmoothingEnabled, the user agent must return the last value it was set to.");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  var image = createTestImage();
+  ctx.scale(10, 10);
+  ctx.drawImage(image, 0, 0);
+  var pixels = ctx.getImageData(9, 9, 1, 1).data;
+  assert_not_equals(pixels[0], 0);
+  assert_not_equals(pixels[1], 255);
+}, "Test that image smoothing is actually on by default and just the attribute value.");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  ctx.imageSmoothingEnabled = true;
+  var image = createTestImage();
+  ctx.scale(10, 10);
+  ctx.drawImage(image, 0, 0);
+  var pixels = ctx.getImageData(9, 9, 1, 1).data;
+  assert_not_equals(pixels[0], 0);
+  assert_not_equals(pixels[1], 255);
+}, "Test that image smoothing works when imageSmoothingEnabled is set to true");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  var image = createTestImage();
+  ctx.imageSmoothingEnabled = false;
+  ctx.scale(10, 10);
+  ctx.drawImage(image, 0, 0);
+  var pixels = ctx.getImageData(9, 9, 1, 1).data;
+  assert_array_equals(pixels, [0, 255, 0, 255]);
+}, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with drawImage().");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  var image = createTestImage();
+  ctx.imageSmoothingEnabled = false;
+  ctx.scale(10, 10);
+  ctx.fillStyle = ctx.createPattern(image, 'repeat');
+  ctx.fillRect(0, 0, 10, 10);
+  var pixels = ctx.getImageData(9, 9, 1, 1).data;
+  assert_array_equals(pixels, [0, 255, 0, 255]);
+}, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with fillRect and createPattern().");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  var image = createTestImage();
+  ctx.imageSmoothingEnabled = false;
+  ctx.fillStyle = ctx.createPattern(image, 'repeat');
+  ctx.scale(10, 10);
+  ctx.rect(0, 0, 10, 10);
+  ctx.fill();
+  var pixels = ctx.getImageData(9, 9, 1, 1).data;
+  assert_array_equals(pixels, [0, 255, 0, 255]);
+}, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with fill() and createPattern().");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  var image = createTestImage();
+  ctx.strokeStyle = ctx.createPattern(image, 'repeat');
+  ctx.lineWidth = 5;
+  ctx.imageSmoothingEnabled = false;
+  ctx.scale(10, 10);
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(10, 10);
+  ctx.stroke();
+  var pixels = ctx.getImageData(9, 9, 1, 1).data;
+  assert_array_equals(pixels, [0, 255, 0, 255]);
+}, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) works with stroke() and createPattern().");
+
+test(function() {
+  var repaints = 5;
+  var ctx = document.createElement('canvas').getContext('2d');
+
+  function draw() {
+    ctx.clearRect(0, 0, 10, 10);
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    var image = createTestImage();
+    ctx.imageSmoothingEnabled = false;
+    ctx.scale(10, 10);
+    ctx.drawImage(image, 0, 0);
+    var pixels = ctx.getImageData(9, 9, 1, 1).data;
+    assert_array_equals(pixels, [0, 255, 0, 255]);
+  }
+
+  while (repaints > 0) {
+    draw();
+    repaints = repaints - 1;
+  }
+
+}, "Test that imageSmoothingEnabled = false (nearest-neighbor interpolation) still works after repaints.");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-ImageBitmap-close.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-ImageBitmap-close.html
new file mode 100644
index 0000000000..fca8274528
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-ImageBitmap-close.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<body>
+    <p>Tests that the close method of ImageBitmap does dispose the image data.</p>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+
+promise_test(function(t) {
+    var worker = new Worker('worker-onmessage-noop.js');
+
+    var imgHeight = 10;
+    var imgWidth = 10;
+    var imageData = new ImageData(10, 10);
+    var bitmap;
+    var ctx;
+    return createImageBitmap(imageData).then(imageBitmap => {
+        bitmap = imageBitmap;
+        assert_equals(bitmap.width, imgWidth, "bitmap.width = 10");
+        assert_equals(bitmap.height, imgWidth, "bitmap.height = 10");
+
+        // Apply structured clone to the bitmap, nothing should be changed
+        worker.postMessage({data: bitmap});
+        assert_equals(bitmap.width, imgWidth, "bitmap.width = 10");
+        assert_equals(bitmap.height, imgWidth, "bitmap.height = 10");
+
+        // After calling close, the image data associated with the bitmap should no longer exist
+        bitmap.close();
+        assert_equals(bitmap.width, 0, "bitmap.width = 0");
+        assert_equals(bitmap.height, 0, "bitmap.height = 0");
+
+        var canvas = document.createElement("canvas");
+        canvas.width = imgWidth;
+        canvas.height = imgHeight;
+        ctx = canvas.getContext("2d");
+        assert_throws_dom("InvalidStateError", function() { ctx.drawImage(bitmap, 0, 0); });
+
+        // Try to apply structured clone to an already closed bitmap
+        try {
+            worker.postMessage({data: bitmap});
+            throw new Error("Apply clone to an closed bitmap should be rejected");
+        }
+        catch(ex) {
+             // Apply structured clone to an already closed bitmap is rejected as expected.
+        }
+
+        // Try to apply transferring to an already closed bitmap
+        try {
+            worker.postMessage({data: bitmap}, [bitmap]);
+            throw new Error("Apply transferring to an closed bitmap should be rejected");
+        } catch(ex) {
+             // Apply structured clone to an already closed bitmap is rejected as expected.
+        }
+
+        // Calling createImageBitmap from a closed bitmap should be rejected
+        return createImageBitmap(bitmap).then(function() {
+           throw new Error("createImageBitmap from a closed bitmap should be rejected");
+        }, ex => {
+            // Calling createImageBitmap from a closed ImageBitmap is rejected as expected.
+        });
+    }).then(() => {
+        // Call close to a already closed bitmap should be noop.
+        bitmap.close();
+        assert_equals(bitmap.width, 0, "bitmap.height = 0");
+        assert_equals(bitmap.height, 0, "bitmap.height = 0");
+
+        return createImageBitmap(imageData).then(imageBitmap => {
+            bitmap = imageBitmap;
+            assert_equals(bitmap.width, imgWidth, "bitmap.width = 10");
+            assert_equals(bitmap.height, imgWidth, "bitmap.height = 10");
+
+            // Transfer the bitmap to a worker
+            worker.postMessage({data: bitmap}, [bitmap]);
+
+            // After transferring, the bitmap is neutered.
+            assert_equals(bitmap.width, 0, "bitmap.height = 0");
+            assert_equals(bitmap.height, 0, "bitmap.height = 0");
+
+            // Calling close to a neutered bitmap should be noop.
+            bitmap.close();
+            assert_equals(bitmap.width, 0, "bitmap.height = 0");
+            assert_equals(bitmap.height, 0, "bitmap.height = 0");
+
+        });
+    }).catch(function(ex) {
+        throw new Error("No exception should be thrown.");
+    })
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-resize.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-resize.html
new file mode 100644
index 0000000000..782c7e130c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-resize.html
@@ -0,0 +1,170 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+function checkNoCrop(imageBitmap)
+{
+    var canvas = document.createElement("canvas");
+    canvas.width = 50;
+    canvas.height = 50;
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(imageBitmap, 0, 0);
+    var d = ctx.getImageData(0, 0, 1, 1).data;
+    assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red.");
+    d = ctx.getImageData(39, 0, 1, 1).data;
+    assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green.");
+    d = ctx.getImageData(0, 39, 1, 1).data;
+    assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue.");
+    d = ctx.getImageData(39, 39, 1, 1).data;
+    assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black.");
+    d = ctx.getImageData(41, 41, 1, 1).data;
+    assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black.");
+}
+
+function checkCrop(imageBitmap)
+{
+    var canvas = document.createElement("canvas");
+    canvas.width = 50;
+    canvas.height = 50;
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.drawImage(imageBitmap, 0, 0);
+    var d = ctx.getImageData(0, 0, 1, 1).data;
+    assert_array_equals(d, [255, 0, 0, 255], "This pixel should be red.");
+    d = ctx.getImageData(19, 0, 1, 1).data;
+    assert_array_equals(d, [0, 255, 0, 255], "This pixel should be green.");
+    d = ctx.getImageData(0, 19, 1, 1).data;
+    assert_array_equals(d, [0, 0, 255, 255], "This pixel should be blue.");
+    d = ctx.getImageData(19, 19, 1, 1).data;
+    assert_array_equals(d, [0, 0, 0, 255], "This pixel should be black.");
+    d = ctx.getImageData(21, 21, 1, 1).data;
+    assert_array_equals(d, [0, 0, 0, 0], "This pixel should be transparent black.");
+}
+
+function compareBitmaps(bitmap1, bitmap2)
+{
+    var canvas1 = document.createElement("canvas");
+    var canvas2 = document.createElement("canvas");
+    canvas1.width = 50;
+    canvas1.height = 50;
+    canvas2.width = 50;
+    canvas2.height = 50;
+    var ctx1 = canvas1.getContext("2d");
+    var ctx2 = canvas2.getContext("2d");
+    ctx1.clearRect(0, 0, canvas1.width, canvas1.height);
+    ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
+    ctx1.drawImage(bitmap1, 0, 0);
+    ctx2.drawImage(bitmap2, 0, 0);
+    var data1 = ctx1.getImageData(0, 0, 50, 50).data;
+    var data2 = ctx2.getImageData(0, 0, 50, 50).data;
+    var dataMatched = true;
+    for (var i = 0; i < data1.length; i++) {
+        if (data1[i] != data2[i]) {
+            dataMatched = false;
+            break;
+        }
+    }
+    assert_false(dataMatched);
+}
+
+function testImageBitmap(source)
+{
+    return Promise.all([
+        createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: "high"}),
+        createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: "medium"}),
+        createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: "low"}),
+        createImageBitmap(source, {resizeWidth: 40, resizeHeight: 40, resizeQuality: "pixelated"}),
+        createImageBitmap(source, 5, 5, 10, 10, {resizeWidth: 20, resizeHeight: 20, resizeQuality: "high"}),
+        createImageBitmap(source, 5, 5, 10, 10, {resizeWidth: 20, resizeHeight: 20, resizeQuality: "medium"}),
+        createImageBitmap(source, 5, 5, 10, 10, {resizeWidth: 20, resizeHeight: 20, resizeQuality: "low"}),
+        createImageBitmap(source, 5, 5, 10, 10, {resizeWidth: 20, resizeHeight: 20, resizeQuality: "pixelated"}),
+    ]).then(([noCropHigh, noCropMedium, noCropLow, noCropPixelated, cropHigh, cropMedium, cropLow, cropPixelated]) => {
+        checkNoCrop(noCropHigh);
+        checkNoCrop(noCropMedium);
+        checkNoCrop(noCropLow);
+        checkNoCrop(noCropPixelated);
+        checkCrop(cropHigh);
+        checkCrop(cropMedium);
+        checkCrop(cropLow);
+        checkCrop(cropPixelated);
+        // Brute-force comparison among all bitmaps is too expensive
+        compareBitmaps(noCropHigh, noCropMedium);
+        compareBitmaps(noCropLow, noCropPixelated);
+        compareBitmaps(cropHigh, cropMedium);
+        compareBitmaps(cropLow, cropPixelated);
+    });
+}
+
+function initializeTestCanvas()
+{
+    var testCanvas = document.createElement("canvas");
+    testCanvas.width = 20;
+    testCanvas.height = 20;
+    var testCtx = testCanvas.getContext("2d");
+    testCtx.fillStyle = "rgb(255, 0, 0)";
+    testCtx.fillRect(0, 0, 10, 10);
+    testCtx.fillStyle = "rgb(0, 255, 0)";
+    testCtx.fillRect(10, 0, 10, 10);
+    testCtx.fillStyle = "rgb(0, 0, 255)";
+    testCtx.fillRect(0, 10, 10, 10);
+    testCtx.fillStyle = "rgb(0, 0, 0)";
+    testCtx.fillRect(10, 10, 10, 10);
+    return testCanvas;
+}
+
+// Blob
+promise_test(function() {
+    return new Promise((resolve, reject) => {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/pattern.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    }).then(testImageBitmap);
+}, 'createImageBitmap from a Blob with resize option.');
+
+// HTMLCanvasElement
+promise_test(function() {
+    var testCanvas = initializeTestCanvas();
+    return testImageBitmap(testCanvas);
+}, 'createImageBitmap from a HTMLCanvasElement with resize option.');
+
+// HTMLImageElement
+promise_test(function() {
+    return new Promise((resolve, reject) => {
+        var image = new Image();
+        image.onload = function() {
+            resolve(image);
+        }
+        image.src = '/images/pattern.png'
+    }).then(testImageBitmap);
+}, 'createImageBitmap from a HTMLImageElement with resize option.');
+
+// HTMLImageElement of svg with no specified size
+promise_test(function() {
+    return new Promise((resolve, reject) => {
+        var image = new Image();
+        image.onload = function() {
+            resolve(image);
+        }
+        image.src = '/images/pattern-nosize.svg'
+    }).then(testImageBitmap);
+}, 'createImageBitmap from a HTMLImageElement of svg with no specified size with resize option.');
+
+// ImageBitmap
+promise_test(function() {
+    var testCanvas = initializeTestCanvas();
+    return createImageBitmap(testCanvas).then(testImageBitmap);
+}, 'createImageBitmap from an ImageBitmap with resize option.');
+
+// ImageData
+promise_test(function() {
+    var canvas = initializeTestCanvas();
+    var ctx = canvas.getContext("2d");
+    var data = ctx.getImageData(0, 0, 20, 20);
+    return testImageBitmap(data);
+}, 'createImageBitmap from an ImageData with resize option.');
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-video-resize.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-video-resize.html
new file mode 100644
index 0000000000..d48d9e80ca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/canvas-createImageBitmap-video-resize.html
@@ -0,0 +1,62 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/media.js"></script>
+<script>
+function createNewCanvas(width, height)
+{
+    var canvas = document.createElement("canvas");
+    canvas.width = width;
+    canvas.height = height;
+    var ctx = canvas.getContext("2d");
+    ctx.clearRect(0, 0, width, height);
+    return ctx;
+}
+
+function checkLowResult(imageBitmap, bw, bh, video, sx, sy, sw, sh)
+{
+    var ctx1 = createNewCanvas(bw, bh);
+    var ctx2 = createNewCanvas(bw, bh);
+    ctx1.drawImage(imageBitmap, 0, 0);
+    ctx2.drawImage(video, sx, sy, sw, sh, 0, 0, bw, bh);
+    var data1 = ctx1.getImageData(0, 0, bw, bh).data;
+    var data2 = ctx2.getImageData(0, 0, bw, bh).data;
+    var dataMatched = true;
+    for (var i = 0; i < data1.length; i++) {
+        // data1[i] is strictly the same as data2[i] on software rendering.
+        // But on GPU, the difference could be quite significant.
+        if (Math.abs(data1[i] - data2[i]) > 33) {
+            dataMatched = false;
+            break;
+        }
+    }
+    assert_true(dataMatched);
+}
+
+function generateTest()
+{
+    bitmapWidth = video.videoWidth/2;
+    bitmapHeight = video.videoHeight/2;
+    return Promise.all([
+        createImageBitmap(video, {resizeWidth: bitmapWidth, resizeHeight: bitmapHeight, resizeQuality: "low"}),
+        createImageBitmap(video, 10, 10, bitmapWidth, bitmapHeight, {resizeWidth: bitmapWidth, resizeHeight: bitmapHeight, resizeQuality: "low"}),
+    ]).then(t.step_func_done(([noCropLow, cropLow]) => {
+        checkLowResult(noCropLow, bitmapWidth, bitmapHeight, video, 0, 0, video.videoWidth, video.videoHeight);
+        checkLowResult(cropLow, bitmapWidth, bitmapHeight, video, 10, 10, bitmapWidth, bitmapHeight);
+    }), t.step_func_done(function() {
+        assert_true(false, 'Promise rejected');
+    }));
+}
+
+var t = async_test('createImageBitmap(HTMLVideoElement) with resize option');
+
+// HTMLVideoElement
+var video = document.createElement("video");
+video.preload = "auto";
+if (video.requestVideoFrameCallback) {
+    video.requestVideoFrameCallback(t.step_func(() => generateTest()));
+} else {
+    video.oncanplaythrough = t.step_func(() => generateTest());
+}
+video.src = getVideoURI("/media/counting");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/common.sub.js b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/common.sub.js
new file mode 100644
index 0000000000..1889035202
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/common.sub.js
@@ -0,0 +1,168 @@
+function makeCanvas() {
+    return new Promise(resolve => {
+        var testCanvas = document.createElement("canvas");
+        testCanvas.width = 20;
+        testCanvas.height = 20;
+        var testCtx = testCanvas.getContext("2d");
+        testCtx.fillStyle = "rgb(255, 0, 0)";
+        testCtx.fillRect(0, 0, 10, 10);
+        testCtx.fillStyle = "rgb(0, 255, 0)";
+        testCtx.fillRect(10, 0, 10, 10);
+        testCtx.fillStyle = "rgb(0, 0, 255)";
+        testCtx.fillRect(0, 10, 10, 10);
+        testCtx.fillStyle = "rgb(0, 0, 0)";
+        testCtx.fillRect(10, 10, 10, 10);
+        resolve(testCanvas);
+    });
+}
+
+function makeOffscreenCanvas() {
+    return new Promise(resolve => {
+        let canvas = new OffscreenCanvas(20, 20);
+        var testCtx = canvas.getContext("2d");
+        testCtx.fillStyle = "rgb(255, 0, 0)";
+        testCtx.fillRect(0, 0, 10, 10);
+        testCtx.fillStyle = "rgb(0, 255, 0)";
+        testCtx.fillRect(10, 0, 10, 10);
+        testCtx.fillStyle = "rgb(0, 0, 255)";
+        testCtx.fillRect(0, 10, 10, 10);
+        testCtx.fillStyle = "rgb(0, 0, 0)";
+        testCtx.fillRect(10, 10, 10, 10);
+        resolve(canvas);
+    });
+}
+
+var imageBitmapVideoPromise = new Promise(function(resolve, reject) {
+    var video = document.createElement("video");
+    video.oncanplaythrough = function() {
+        resolve(video);
+    };
+    video.onerror = reject;
+
+    // preload=auto is required to ensure a frame is available once
+    // canplaythrough is fired. The default of preload=metadata does not
+    // gaurantee this.
+    video.preload = "auto";
+    video.src = getVideoURI("/images/pattern");
+
+    // Prevent WebKit from garbage collecting event handlers.
+    window._video = video;
+});
+
+function makeVideo() {
+    return imageBitmapVideoPromise;
+}
+
+var imageBitmapDataUrlVideoPromise = fetch(getVideoURI("/images/pattern"))
+    .then(response => Promise.all([response.headers.get("Content-Type"), response.arrayBuffer()]))
+    .then(([type, data]) => {
+        return new Promise(function(resolve, reject) {
+            var video = document.createElement("video");
+            video.oncanplaythrough = function() {
+                resolve(video);
+            };
+            video.onerror = reject;
+
+            var encoded = btoa(String.fromCodePoint(...new Uint8Array(data)));
+            var dataUrl = `data:${type};base64,${encoded}`;
+
+            // preload=auto is required to ensure a frame is available once
+            // canplaythrough is fired. The default of preload=metadata does not
+            // gaurantee this.
+            video.preload = "auto";
+            video.src = dataUrl;
+
+            // Prevent WebKit from garbage collecting event handlers.
+            window._dataVideo = video;
+        });
+    });
+
+function makeDataUrlVideo() {
+    return imageBitmapDataUrlVideoPromise;
+}
+
+function makeMakeHTMLImage(src) {
+    return function() {
+        return new Promise((resolve, reject) => {
+            var img = new Image();
+            img.onload = function() {
+                resolve(img);
+            };
+            img.onerror = reject;
+            img.src = src;
+        });
+    }
+}
+
+function makeMakeSVGImage(src) {
+    return function() {
+        return new Promise((resolve, reject) => {
+            var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
+            image.onload = () => resolve(image);
+            image.onerror = reject;
+            image.setAttribute("externalResourcesRequired", "true");
+            image.setAttributeNS("http://www.w3.org/1999/xlink", 'xlink:href', src);
+            document.body.appendChild(image);
+        });
+    }
+}
+
+function makeImageData() {
+    return new Promise(function(resolve, reject) {
+        var width = 20, height = 20;
+        var imgData = new ImageData(width, height);
+        for (var i = 0; i < width * height * 4; i += 4) {
+            imgData.data[i] = 0;
+            imgData.data[i + 1] = 0;
+            imgData.data[i + 2] = 0;
+            imgData.data[i + 3] = 255; //alpha channel: 255
+        }
+        var halfWidth = width / 2;
+        var halfHeight = height / 2;
+        // initialize to R, G, B, Black, with each one 10*10 pixels
+        for (var i = 0; i < halfHeight; i++)
+            for (var j = 0; j < halfWidth; j++)
+                imgData.data[i * width * 4 + j * 4] = 255;
+        for (var i = 0; i < halfHeight; i++)
+            for (var j = halfWidth; j < width; j++)
+                imgData.data[i * width * 4 + j * 4 + 1] = 255;
+        for (var i = halfHeight; i < height; i++)
+            for (var j = 0; j < halfWidth; j++)
+                imgData.data[i * width * 4 + j * 4 + 2] = 255;
+        resolve(imgData);
+    });
+}
+
+function makeImageBitmap() {
+    return makeCanvas().then(canvas => {
+        return createImageBitmap(canvas);
+    });
+}
+
+function makeBlob(src) {
+    return function () {
+        return new Promise(function(resolve, reject) {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", src);
+            xhr.responseType = 'blob';
+            xhr.send();
+            xhr.onload = function() {
+                resolve(xhr.response);
+            };
+        });
+    }
+}
+
+var imageSourceTypes = [
+    { name: 'an HTMLCanvasElement', factory: makeCanvas },
+    { name: 'an HTMLVideoElement',  factory: makeVideo },
+    { name: 'an HTMLVideoElement from a data URL', factory: makeDataUrlVideo },
+    { name: 'a bitmap HTMLImageElement', factory: makeMakeHTMLImage("/images/pattern.png") },
+    { name: 'a vector HTMLImageElement', factory: makeMakeHTMLImage("/images/pattern.svg") },
+    { name: 'a bitmap SVGImageElement', factory: makeMakeSVGImage("/images/pattern.png") },
+    { name: 'a vector SVGImageElement', factory: makeMakeSVGImage("/images/pattern.svg") },
+    { name: 'an OffscreenCanvas',   factory: makeOffscreenCanvas },
+    { name: 'an ImageData',         factory: makeImageData },
+    { name: 'an ImageBitmap',       factory: makeImageBitmap },
+    { name: 'a Blob',               factory: makeBlob("/images/pattern.png") },
+];
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-blob-invalidtype.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-blob-invalidtype.html
new file mode 100644
index 0000000000..23af96408a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-blob-invalidtype.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<title>createImageBitmap: blob with wrong mime type</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<script>
+promise_test(t => {
+  // Source: https://commons.wikimedia.org/wiki/File:1x1.png (Public Domain)
+  const IMAGE = atob("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAA" +
+                     "ACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII=");
+
+  let bytes = new Array(IMAGE.length);
+  for (let i = 0; i < IMAGE.length; i++) {
+    bytes[i] = IMAGE.charCodeAt(i);
+  }
+
+  let blob = new Blob([new Uint8Array(bytes)], { type: "text/html"});
+
+  return window.createImageBitmap(blob)
+    .then(imageBitmap => {
+      assert_true(true, "Image created!");
+      assert_equals(imageBitmap.width, 1, "Image is 1x1");
+      assert_equals(imageBitmap.height, 1, "Image is 1x1");
+    });
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-bounds.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-bounds.html
new file mode 100644
index 0000000000..a2dcf0cc0b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-bounds.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<title>createImageBitmap: clipping to the bitmap</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<div id="results"></div>
+<script>
+const color = 204;
+function testClip( name, sx, sy, sw, sh, expectedColors, expectedWidth, expectedHeight ) {
+    promise_test(function(t) {
+        return new Promise(function(resolve, reject) {
+            const image = new Image();
+            image.onload = function() { resolve(image); };
+            image.onerror = function() { reject(); };
+            image.src = "/images/green-16x16.png";
+        }).then(function(image) {
+            return createImageBitmap(image, sx, sy, sw, sh);
+        }).then(function(imageBitmap) {
+
+            assert_equals(imageBitmap.width, expectedWidth);
+            assert_equals(imageBitmap.height, expectedHeight);
+
+            const canvas = document.createElement("canvas");
+            canvas.width = 16;
+            canvas.height = 16;
+
+            // debug
+            document.getElementById("results").append(canvas);
+            canvas.setAttribute("style", "width: 100px; height: 100px;");
+
+            const ctx = canvas.getContext("2d");
+            ctx.fillStyle = `rgb(${color}, ${color}, ${color})`;
+            ctx.fillRect(0, 0, 20, 20);
+            ctx.drawImage(imageBitmap, 0, 0);
+
+            for (let [x, y, r, g, b, a] of expectedColors) {
+                _assertPixel(canvas, x,y, r,g,b,a);
+            }
+        });
+    }, name);
+}
+testClip( "simple clip inside",
+    8, 8, 8, 8, [
+        [ 4,  4, 0,255,0,255],           [12,  4, color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
+    ], 8, 8
+);
+testClip( "clip outside negative",
+    -8, -8, 16, 16, [
+        [ 4,  4, color,color,color,255], [12, 4,  color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, 0,255,0,255]
+    ], 16, 16
+);
+testClip( "clip outside positive",
+    8, 8, 16, 16, [
+        [ 4,  4, 0,255,0,255],           [12,  4, color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
+    ], 16, 16
+);
+testClip( "clip inside using negative width and height",
+    24, 24, -16, -16, [
+        [ 4,  4, 0,255,0,255],           [12,  4, color,color,color,255],
+        [ 4, 12, color,color,color,255], [12, 12, color,color,color,255]
+    ], 16, 16
+);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-colorSpaceConversion.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-colorSpaceConversion.html
new file mode 100644
index 0000000000..2ddf3648f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-colorSpaceConversion.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<title>Test colorSpaceConversion option for createImageBitmap</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<script src="/common/media.js"></script>
+<script src="common.sub.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body>
+<script>
+function testCanvasDisplayingPattern(canvas, width, height)
+{
+    var tolerance = 10; // high tolerance for differing color management results
+    const check = (x, y, r, g, b, a) =>
+        _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance);
+
+    check(1 * width / 4, 1 * height / 4, 124,0,27,255);
+    check(3 * width / 4, 1 * height / 4, 0,124,46,255);
+    check(1 * width / 4, 3 * height / 4, 60,0,123,255);
+    check(3 * width / 4, 3 * height / 4, 0,0,0,255);
+}
+
+function testDrawImageBitmap(source, options)
+{
+    var canvas = document.createElement("canvas");
+    canvas.width = 20;
+    canvas.height = 20;
+    var ctx = canvas.getContext("2d");
+    return createImageBitmap(source, options).then(imageBitmap => {
+        ctx.drawImage(imageBitmap, 0, 0);
+        testCanvasDisplayingPattern(canvas, 20, 20);
+    });
+}
+
+var wideGamutImageSourceTypes = [
+    {name: 'a bitmap HTMLImageElement', factory: makeMakeHTMLImage("/images/wide-gamut-pattern.png")},
+    {name: 'a Blob',                    factory: makeBlob("/images/wide-gamut-pattern.png")},
+];
+
+for (let { name, factory } of wideGamutImageSourceTypes) {
+    promise_test(function() {
+        return factory().then(function(img) {
+            return testDrawImageBitmap(img, {colorSpaceConversion: "none"});
+        });
+    }, `createImageBitmap from ${name}, and drawImage on the created ImageBitmap with colorSpaceConversion: none`);
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage-closed.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage-closed.html
new file mode 100644
index 0000000000..3b8644cff5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage-closed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<title>attempt to draw a closed ImageBitmap to a 2d canvas throws INVALID_STATE_ERR</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<script>
+promise_test(function(t) {
+    return new Promise(function(resolve, reject) {
+        const image = new Image();
+        image.onload = function() { resolve(image); };
+        image.onerror = function() { reject(); };
+        image.src = "/images/green-16x16.png";
+    }).then(function(image) {
+        return createImageBitmap(image, 0, 0, 16, 16);
+    }).then(function(imageBitmap) {
+        imageBitmap.close();
+
+        const canvas = document.createElement("canvas");
+        canvas.width = 16;
+        canvas.height = 16;
+
+        const ctx = canvas.getContext("2d");
+        assert_throws_dom("InvalidStateError", function() { ctx.drawImage(imageBitmap, 0, 0); });
+    });
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html
new file mode 100644
index 0000000000..5b5698813a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-drawImage.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+<title>createImageBitmap + drawImage test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<script src="/common/media.js"></script>
+<script src="common.sub.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body>
+<script>
+function testCanvasDisplayingPattern(canvas, width, height, sourceIsVideo)
+{
+    var tolerance = 3;
+    let topLeft = [255, 0, 0, 255];
+    let topRight = [0, 255, 0, 255];
+    let bottomLeft = [0, 0, 255, 255];
+    let bottomRight = [0, 0, 0, 255];
+    if (sourceIsVideo) {
+        // The source video uses colors in the Rec.601 color space whose
+        // values are close to full red, full green, full blue, and black,
+        // but when converted to sRGB, are somewhat different.
+        topLeft = [247, 37, 0, 255];
+        topRight = [63, 251, 0, 255];
+        bottomLeft = [28, 35, 255, 255];
+        bottomRight = [5, 0, 2, 255];
+    }
+    const check = (x, y, [r, g, b, a]) =>
+        _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance);
+    check(1 * width / 4, 1 * height / 4, topLeft);
+    check(3 * width / 4, 1 * height / 4, topRight);
+    check(1 * width / 4, 3 * height / 4, bottomLeft);
+    check(3 * width / 4, 3 * height / 4, bottomRight);
+}
+
+function testDrawImageBitmap(source, args = [], { resizeWidth = 20, resizeHeight = 20 } = {})
+{
+    let sourceIsVideo = source instanceof HTMLVideoElement;
+    var canvas = document.createElement("canvas");
+    canvas.width = resizeWidth;
+    canvas.height = resizeHeight;
+    var ctx = canvas.getContext("2d");
+    return createImageBitmap(source, ...args).then(imageBitmap => {
+        assert_equals(imageBitmap.width, resizeWidth);
+        assert_equals(imageBitmap.height, resizeHeight);
+        ctx.drawImage(imageBitmap, 0, 0);
+        testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight, sourceIsVideo);
+    });
+}
+
+for (let { name, factory } of imageSourceTypes) {
+    promise_test(function() {
+        return factory().then(function(img) {
+            return testDrawImageBitmap(img);
+        });
+    }, `createImageBitmap from ${name}, and drawImage on the created ImageBitmap`);
+
+    promise_test(function() {
+        return factory().then(function(img) {
+            const options = { resizeWidth: 10, resizeHeight: 10 };
+            return testDrawImageBitmap(img, [options], options);
+        });
+    }, `createImageBitmap from ${name} scaled down, and drawImage on the created ImageBitmap`);
+
+    promise_test(function() {
+        return factory().then(function(img) {
+            const options = { resizeWidth: 40, resizeHeight: 40 };
+            return testDrawImageBitmap(img, [options], options);
+        });
+    }, `createImageBitmap from ${name} scaled up, and drawImage on the created ImageBitmap`);
+
+    promise_test(function() {
+        return factory().then(function(img) {
+            const options = { resizeWidth: 10, resizeHeight: 40 };
+            return testDrawImageBitmap(img, [options], options);
+        });
+    }, `createImageBitmap from ${name} resized, and drawImage on the created ImageBitmap`);
+
+    promise_test(function() {
+        return factory().then(function(img) {
+            return testDrawImageBitmap(img, [20, 20, -20, -20]);
+        });
+    }, `createImageBitmap from ${name} with negative sw/sh, and drawImage on the created ImageBitmap`);
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html
new file mode 100644
index 0000000000..8b2a33e85b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<title>Test that createImageBitmap honors EXIF orientation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>canvas { outline: 1px solid black; margin-right: 1em; }</style>
+<body>
+<script>
+function loadImage(src) {
+    return new Promise(function(resolve) {
+        const image = new Image();
+        image.addEventListener("load", () => resolve(image), { once: true });
+        image.src = src;
+    });
+}
+
+function checkColors(ctx, w, h, expectedColors) {
+    let data = ctx.getImageData(0, 0, w, h).data;
+    for (let [row, col, r, g, b, a] of expectedColors) {
+        let x = col * 80 + 40;
+        let y = row * 80 + 40;
+        let i = (x + y * w) * 4;
+
+        let expected = [r, g, b, a];
+        let actual = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+
+        assert_array_approx_equals(actual, expected, 1, `Pixel value at (${x},${y}) ${expected} =~ ${actual}.`);
+    }
+}
+
+async_test(function(t) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 320;
+    canvas.height = 160;
+    document.body.append(canvas);
+
+    const ctx = canvas.getContext("2d");
+    loadImage("resources/squares_6.jpg")
+        .then((image) => createImageBitmap(image))
+        .then(t.step_func_done(function(imageBitmap) {
+            ctx.drawImage(imageBitmap, 0, 0);
+            checkColors(ctx, canvas.width, canvas.height, [
+                // row, col, r, g, b, a
+                [0, 0, 255, 0, 0, 255],
+                [0, 1, 0, 255, 0, 255],
+                [0, 2, 0, 0, 255, 255],
+                [0, 3, 0, 0, 0, 255],
+                [1, 0, 255, 128, 128, 255],
+                [1, 1, 128, 255, 128, 255],
+                [1, 2, 128, 128, 255, 255],
+                [1, 3, 128, 128, 128, 255],
+            ]);
+        }));
+}, "createImageBitmap with EXIF rotation, imageOrientation from-image, and no cropping");
+
+async_test(function(t) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 320;
+    canvas.height = 160;
+    document.body.append(canvas);
+
+    const ctx = canvas.getContext("2d");
+    loadImage("resources/squares_6.jpg")
+        .then((image) => createImageBitmap(image, { imageOrientation: "flipY" }))
+        .then(t.step_func_done(function(imageBitmap) {
+            ctx.drawImage(imageBitmap, 0, 0);
+            checkColors(ctx, canvas.width, canvas.height, [
+                // row, col, r, g, b, a
+                [0, 0, 255, 128, 128, 255],
+                [0, 1, 128, 255, 128, 255],
+                [0, 2, 128, 128, 255, 255],
+                [0, 3, 128, 128, 128, 255],
+                [1, 0, 255, 0, 0, 255],
+                [1, 1, 0, 255, 0, 255],
+                [1, 2, 0, 0, 255, 255],
+                [1, 3, 0, 0, 0, 255],
+            ]);
+        }));
+}, "createImageBitmap with EXIF rotation, imageOrientation flipY, and no cropping");
+
+async_test(function(t) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 160;
+    canvas.height = 160;
+    document.body.append(canvas);
+
+    const ctx = canvas.getContext("2d");
+    loadImage("resources/squares_6.jpg")
+        .then(image => createImageBitmap(image, 80, 0, 160, 160))
+        .then(t.step_func_done(function(imageBitmap) {
+            ctx.drawImage(imageBitmap, 0, 0);
+            checkColors(ctx, canvas.width, canvas.height, [
+                // row, col, r, g, b, a
+                [0, 0, 0, 255, 0, 255],
+                [0, 1, 0, 0, 255, 255],
+                [1, 0, 128, 255, 128, 255],
+                [1, 1, 128, 128, 255, 255],
+            ]);
+        }));
+}, "createImageBitmap with EXIF rotation, imageOrientation from-image, and cropping");
+
+async_test(function(t) {
+    const canvas = document.createElement("canvas");
+    canvas.width = 160;
+    canvas.height = 160;
+    document.body.append(canvas);
+
+    const ctx = canvas.getContext("2d");
+    loadImage("resources/squares_6.jpg")
+        .then(image => createImageBitmap(image, 80, 0, 160, 160, { imageOrientation: "flipY" }))
+        .then(t.step_func_done(function(imageBitmap) {
+            ctx.drawImage(imageBitmap, 0, 0);
+            checkColors(ctx, canvas.width, canvas.height, [
+                // row, col, r, g, b, a
+                [0, 0, 128, 255, 128, 255],
+                [0, 1, 128, 128, 255, 255],
+                [1, 0, 0, 255, 0, 255],
+                [1, 1, 0, 0, 255, 255],
+            ]);
+        }));
+}, "createImageBitmap with EXIF rotation, imageOrientation flipY, and cropping");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation_none.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation_none.html
new file mode 100644
index 0000000000..807925b88a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-exif-orientation_none.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<title>Test that createImageBitmap honors EXIF orientation</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>canvas { outline: 1px solid black; margin-right: 1em; }</style>
+<body>
+<script>
+function loadImage(src) {
+    return new Promise(function(resolve) {
+        const image = new Image();
+        image.addEventListener("load", () => resolve(image), { once: true });
+        image.src = src;
+    });
+}
+
+function checkColors(ctx, w, h, is_verticle, expectedColors) {
+    let data = ctx.getImageData(0, 0, w, h).data;
+    row_width = 80;
+    col_width = 80;
+
+    for (let [row, col, r, g, b, a] of expectedColors) {
+        let x = col * row_width + 10;
+        let y = row * col_width + 10;
+        let i = (x + y * w) * 4;
+
+        let expected = [r, g, b, a];
+        let actual = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+
+        assert_array_approx_equals(actual, expected, 1, `Pixel value at (${x},${y}) ${expected} =~ ${actual}.`);
+    }
+}
+
+for (let orientation of [1, 2, 3, 4, 5, 6, 7, 8]) {
+    async_test(function(t) {
+        const canvas = document.createElement("canvas");
+        canvas.width = 160;
+        canvas.height = 320;
+        document.body.append(canvas);
+
+        const ctx = canvas.getContext("2d");
+        loadImage(`resources/squares_${orientation}.jpg`)
+            .then((image) => createImageBitmap(image, { imageOrientation: "none" }))
+            .then(t.step_func_done(function(imageBitmap) {
+                ctx.drawImage(imageBitmap, 0, 0, 160, 320);
+
+                checkColors(ctx, canvas.width, canvas.height, false, [
+                    // row, col, r, g, b, a
+                    [0, 0, 0, 0, 0, 255],
+                    [0, 1, 128, 128, 128, 255],
+                    [1, 0, 0, 0, 255, 255],
+                    [1, 1, 128, 128, 255, 255],
+                    [2, 0, 0, 255, 0, 255],
+                    [2, 1, 128, 255, 128, 255],
+                    [3, 0, 255, 0, 0, 255],
+                    [3, 1, 255, 128, 128, 255],
+                ]);
+            }));
+    }, `createImageBitmap with Orientation ${orientation}`);
+}
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-flipY.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-flipY.html
new file mode 100644
index 0000000000..9b0d2dfb79
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-flipY.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<title>createImageBitmap + drawImage test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<script src="/common/media.js"></script>
+<script src="common.sub.js"></script>
+<link rel="stylesheet" href="/html/canvas/resources/canvas-tests.css">
+<body>
+<script>
+function testCanvasDisplayingPattern(canvas, width, height, sourceIsVideo, flipped)
+{
+    var tolerance = 3;
+    let topLeft = [255, 0, 0, 255];
+    let topRight = [0, 255, 0, 255];
+    let bottomLeft = [0, 0, 255, 255];
+    let bottomRight = [0, 0, 0, 255];
+    if (sourceIsVideo) {
+        // The source video uses colors in the Rec.601 color space whose
+        // values are close to full red, full green, full blue, and black,
+        // but when converted to sRGB, are somewhat different.
+        topLeft = [247, 37, 0, 255];
+        topRight = [63, 251, 0, 255];
+        bottomLeft = [28, 35, 255, 255];
+        bottomRight = [5, 0, 2, 255];
+    }
+    if (flipped) {
+        [topLeft, bottomLeft] = [bottomLeft, topLeft];
+        [topRight, bottomRight] = [bottomRight, topRight];
+    }
+    const check = (x, y, [r, g, b, a]) =>
+        _assertPixelApprox(canvas, x,y, r,g,b,a, tolerance);
+    check(1 * width / 4, 1 * height / 4, topLeft);
+    check(3 * width / 4, 1 * height / 4, topRight);
+    check(1 * width / 4, 3 * height / 4, bottomLeft);
+    check(3 * width / 4, 3 * height / 4, bottomRight);
+}
+
+function testDrawImageBitmap(source, args = [], flipped, { resizeWidth = 20, resizeHeight = 20 } = {})
+{
+    let sourceIsVideo = source instanceof HTMLVideoElement;
+    var canvas = document.createElement("canvas");
+    canvas.width = resizeWidth;
+    canvas.height = resizeHeight;
+    var ctx = canvas.getContext("2d");
+    return createImageBitmap(source, ...args).then(imageBitmap => {
+        assert_equals(imageBitmap.width, resizeWidth);
+        assert_equals(imageBitmap.height, resizeHeight);
+        ctx.drawImage(imageBitmap, 0, 0);
+        testCanvasDisplayingPattern(canvas, resizeWidth, resizeHeight, sourceIsVideo, flipped);
+    });
+}
+
+for (let { name, factory } of imageSourceTypes) {
+    promise_test(function() {
+        return factory().then(function(img) {
+            const options = { imageOrientation: 'from-image' };
+            return testDrawImageBitmap(img, [options], false);
+        });
+    }, `createImageBitmap from ${name} imageOrientation: "from-image", and drawImage on the created ImageBitmap`);
+
+    promise_test(function() {
+        return factory().then(function(img) {
+            const options = { imageOrientation: 'flipY' };
+            return testDrawImageBitmap(img, [options], true);
+        });
+    }, `createImageBitmap from ${name} imageOrientation: "flipY", and drawImage on the created ImageBitmap`);
+
+}
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-in-worker-transfer.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-in-worker-transfer.html
new file mode 100644
index 0000000000..727a8a4978
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-in-worker-transfer.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>createImageBitmap in worker and transfer</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id=log></div>
+<script>
+promise_test(function(t) {
+    return new Promise(function(resolve, reject) {
+        var worker = new Worker("createImageBitmap-worker.js");
+        worker.addEventListener("message", function(evt) {
+            var bitmap = evt.data;
+            assert_equals(bitmap.width, 20);
+            assert_equals(bitmap.height, 20);
+            resolve();
+        });
+        worker.postMessage('test');
+    });
+}, 'Transfer ImageBitmap created in worker');
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html
new file mode 100644
index 0000000000..3cae3523ef
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-invalid-args.html
@@ -0,0 +1,239 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/media.js"></script>
+<script src="common.sub.js"></script>
+<script>
+
+function makeOversizedCanvas() {
+
+  return new Promise(resolve => {
+    let canvas = document.createElement('canvas');
+    canvas.setAttribute('width', '100000000');
+    canvas.setAttribute('height', '100000000');
+    resolve(canvas);
+  });
+}
+
+function makeOversizedOffscreenCanvas() {
+  return new Promise(resolve =>{
+    let canvas = new OffscreenCanvas(100000000, 100000000);
+    resolve(canvas);
+  });
+}
+
+function makeInvalidBlob() {
+  return new Promise(resolve => {
+    resolve(new Blob()); // Blob with no data cannot be decoded.
+  });
+}
+
+function makeBrokenImage() {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = "data:,x";
+    image.onload = reject;
+    image.onerror = () => resolve(image);
+  });
+}
+
+function makeAvailableButBrokenImage(path) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.src = path;
+    image.onload = () => resolve(image);
+    image.onerror = reject;
+  });
+}
+
+testCases = [
+  {
+    description: 'createImageBitmap with <sourceType> source and sw set to 0',
+    promiseTestFunction:
+      (source, t) => {
+        return promise_rejects_js(t, RangeError,
+            createImageBitmap(source, 0, 0, 0, 10));
+      }
+  },
+  {
+    description: 'createImageBitmap with <sourceType> source and sh set to 0',
+    promiseTestFunction:
+      (source, t) => {
+        return promise_rejects_js(t, RangeError,
+            createImageBitmap(source, 0, 0, 10, 0));
+      }
+  },
+  {
+    description: 'createImageBitmap with <sourceType> source and oversized ' +
+        '(unallocatable) crop region',
+    promiseTestFunction:
+      (source, t) => {
+        return createImageBitmap(source, 0, 0, 100000000, 100000000)
+          .then(i => {
+            assert_equals(i.width, 100000000);
+            assert_equals(i.height, 100000000);
+          })
+          .catch(e => {
+            // This case is not explicitly documented in the specification for
+            // createImageBitmap, but it is expected that internal failures
+            // cause InvalidStateError.
+            //
+            // Note: https://bugs.chromium.org/p/chromium/issues/detail?id=799025
+            assert_throws_dom("InvalidStateError", () => { throw e });
+          });
+      }
+  },
+  {
+    description: 'createImageBitmap with <sourceType> source and ' +
+        'a value of 0 int resizeWidth',
+    promiseTestFunction:
+      (source, t) => {
+        return createImageBitmap(source, {resizeWidth:0, resizeHeight:10})
+          .catch(e => {
+            assert_throws_dom("InvalidStateError", () => { throw e });
+          });
+      }
+  },
+  {
+    description: 'createImageBitmap with <sourceType> source and ' +
+        'a value of 0 in resizeHeight',
+    promiseTestFunction:
+      (source, t) => {
+        return createImageBitmap(source, {resizeWidth:10, resizeHeight:0})
+          .catch(e => {
+            assert_throws_dom("InvalidStateError", () => { throw e });
+          });
+      }
+  },
+  {
+    description: 'createImageBitmap with <sourceType> source and ' +
+        'a value between 0 and 1 in resizeWidth',
+    promiseTestFunction:
+      (source, t) => {
+        return createImageBitmap(source, {resizeWidth:0.5, resizeHeight:10})
+          .catch(e => {
+            assert_throws_dom("InvalidStateError", () => { throw e });
+          });
+      }
+  },
+  {
+    description: 'createImageBitmap with <sourceType> source and ' +
+        'a value between 0 and 1 in resizeHeight',
+    promiseTestFunction:
+      (source, t) => {
+        return createImageBitmap(source, {resizeWidth:10, resizeHeight:0.5})
+          .catch(e => {
+            assert_throws_dom("InvalidStateError", () => { throw e });
+          });
+      }
+  },
+];
+
+// Generate the test matrix for each sourceType + testCase combo.
+imageSourceTypes.forEach(imageSourceType => {
+  testCases.forEach(testCase => {
+    let description = testCase.description.replace('<sourceType>',
+        imageSourceType.name);
+    promise_test( t => {
+      return imageSourceType.factory().then(source => {
+        return testCase.promiseTestFunction(source, t);
+      });
+    }, description);
+  });
+});
+
+promise_test( t => {
+  return promise_rejects_js(t, TypeError, createImageBitmap(undefined));
+}, "createImageBitmap with undefined image source.");
+
+promise_test( t => {
+  return promise_rejects_js(t, TypeError, createImageBitmap(null));
+}, "createImageBitmap with null image source.");
+
+promise_test( t => {
+  var context = document.createElement("canvas").getContext("2d");
+  return promise_rejects_js(t, TypeError, createImageBitmap(context));
+}, "createImageBitmap with CanvasRenderingContext2D image source.");
+
+promise_test( t => {
+  var context = document.createElement("canvas").getContext("webgl");
+  return promise_rejects_js(t, TypeError, createImageBitmap(context));
+}, "createImageBitmap with WebGLRenderingContext image source.");
+
+promise_test( t => {
+  var buffer = new Uint8Array();
+  return promise_rejects_js(t, TypeError, createImageBitmap(buffer));
+}, "createImageBitmap with Uint8Array image source.");
+
+promise_test( t => {
+  var buffer = new ArrayBuffer(8);
+  return promise_rejects_js(t, TypeError, createImageBitmap(buffer));
+}, "createImageBitmap with ArrayBuffer image source.");
+
+promise_test( t => {
+  return promise_rejects_dom(t, "InvalidStateError",
+    createImageBitmap(new Image()));
+}, "createImageBitmap with empty image source.");
+
+promise_test( t => {
+  return promise_rejects_dom(t, "InvalidStateError",
+    createImageBitmap(document.createElement('video')));
+}, "createImageBitmap with empty video source.");
+
+promise_test( t => {
+  return makeOversizedCanvas().then(canvas => {
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(canvas));
+  });
+}, "createImageBitmap with an oversized canvas source.");
+
+promise_test( t => {
+  return makeOversizedOffscreenCanvas().then(offscreenCanvas => {
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(offscreenCanvas));
+  });
+}, "createImageBitmap with an invalid OffscreenCanvas source.");
+
+promise_test( t => {
+  return makeInvalidBlob().then(blob => {
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(blob));
+  });
+}, "createImageBitmap with an undecodable blob source.");
+
+promise_test( t => {
+  return makeBrokenImage().then(image => {
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(image));
+  });
+}, "createImageBitmap with a broken image source.");
+
+promise_test( t => {
+  return makeAvailableButBrokenImage("/images/undecodable.png").then(image => {
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(image));
+  });
+}, "createImageBitmap with an available but undecodable image source.");
+
+promise_test( t => {
+  return makeAvailableButBrokenImage("/images/red-zeroheight.svg").then(image => {
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(image));
+  });
+}, "createImageBitmap with an available but zero height image source.");
+
+promise_test( t => {
+  return makeAvailableButBrokenImage("/images/red-zerowidth.svg").then(image => {
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(image));
+  });
+}, "createImageBitmap with an available but zero width image source.");
+
+promise_test( t => {
+  return makeImageBitmap().then(bitmap => {
+    bitmap.close()
+    return promise_rejects_dom(t, "InvalidStateError",
+        createImageBitmap(bitmap));
+  });
+}, "createImageBitmap with a closed ImageBitmap.");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-origin.sub.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-origin.sub.html
new file mode 100644
index 0000000000..ae3d23cfbc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-origin.sub.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>createImageBitmap: origin-clean flag</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<script src="/common/media.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<div id=log></div>
+<script>
+
+function assert_origin_unclean_getImageData(bitmap) {
+  const context = document.createElement("canvas").getContext("2d");
+  context.drawImage(bitmap, 0, 0);
+  assert_throws_dom("SecurityError", () => {
+    context.getImageData(0, 0, 1, 1);
+  });
+}
+
+function assert_origin_unclean_drawImage(bitmap) {
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  ctx.drawImage(bitmap, 0, 0);
+  assert_throws_dom('SecurityError', () => canvas.toDataURL());
+}
+
+function assert_origin_unclean_transferFromImageBitmap(bitmap) {
+  var canvas = document.createElement('canvas');
+  var ctx = canvas.getContext('bitmaprenderer');
+  ctx.transferFromImageBitmap(bitmap);
+  assert_throws_dom('SecurityError', () => canvas.toDataURL());
+}
+
+forEachCanvasSource(get_host_info().HTTP_REMOTE_ORIGIN,
+                    get_host_info().HTTP_ORIGIN,
+                    (name, factory) => {
+  promise_test(function() {
+    return factory().then(createImageBitmap).then(assert_origin_unclean_getImageData);
+  }, `${name}: origin unclear getImageData`);
+  promise_test(function() {
+    return factory().then(createImageBitmap).then(assert_origin_unclean_drawImage);
+  }, `${name}: origin unclear 2dContext.drawImage`);
+  promise_test(function() {
+    return factory().then(createImageBitmap).then(assert_origin_unclean_transferFromImageBitmap);
+  }, `${name}: origin unclear bitmaprenderer.transferFromImageBitmap`);
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-serializable.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-serializable.html
new file mode 100644
index 0000000000..c185cd9cbd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-serializable.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>createImageBitmap serialize test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/namespaces.js"></script>
+<script src="/common/media.js"></script>
+<script src="common.sub.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<div id=log></div>
+<script>
+let worker, continuations = {};
+setup(function() {
+    worker = new Worker("transfer-worker.js");
+    worker.addEventListener("message", function(event) {
+        let { name, bitmap } = event.data;
+        if (continuations.hasOwnProperty(name)) {
+            continuations[name](bitmap);
+        }
+    });
+});
+
+for (let { name, factory } of imageSourceTypes) {
+    promise_test(function(t) {
+        return factory().then(createImageBitmap).then(function(bitmap) {
+            assert_equals(bitmap.width, 20);
+            assert_equals(bitmap.height, 20);
+
+            worker.postMessage({ name: t.name, bitmap: bitmap });
+
+            assert_equals(bitmap.width, 20);
+            assert_equals(bitmap.height, 20);
+
+            return new Promise(function(resolve) {
+                continuations[t.name] = resolve;
+            });
+        }).then(function(bitmap) {
+            assert_class_string(bitmap, "ImageBitmap");
+            assert_equals(bitmap.width, 20);
+            assert_equals(bitmap.height, 20);
+        });
+    }, `Serialize ImageBitmap created from ${name}`);
+}
+
+promise_test(async (t) => {
+  const url = get_host_info().REMOTE_ORIGIN + '/images/pattern.png';
+  const image = await makeMakeHTMLImage(url)();
+  const bitmap = await createImageBitmap(image);
+
+  assert_throws_dom('DataCloneError', () => worker.postMessage(bitmap));
+}, 'Serializing a non-origin-clean ImageBitmap throws.');
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-sizeOverflow.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-sizeOverflow.html
new file mode 100644
index 0000000000..25c1fb6885
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-sizeOverflow.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<title>createImageBitmap with size overflow</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+promise_test(function() {
+    var imgData = new ImageData(20, 20);
+    return createImageBitmap(imgData, 4294967400, 10, 10, 10);
+}, "createImageBitmap does not crash or reject the promise when passing very large sx");
+
+promise_test(function() {
+    var imgData = new ImageData(20, 20);
+    return createImageBitmap(imgData, 10, 4294967400, 10, 10);
+}, "createImageBitmap does not crash or reject the promise when passing very large sy");
+
+promise_test(function() {
+    var imgData = new ImageData(20, 20);
+    return createImageBitmap(imgData, 10, 10, 4294967400, 10);
+}, "createImageBitmap does not crash or reject the promise when passing very large sw");
+
+promise_test(function() {
+    var imgData = new ImageData(20, 20);
+    return createImageBitmap(imgData, 10, 10, 10, 4294967400);
+}, "createImageBitmap does not crash or reject the promise when passing very large sh");
+
+promise_test(function() {
+    var imgData = new ImageData(20, 20);
+    return createImageBitmap(imgData, 4294967400, 4294967400, 4294967400, 4294967400);
+}, "createImageBitmap does not crash or reject the promise when passing very large sx, sy, sw and sh");
+
+promise_test(function(t) {
+    var imgData = new ImageData(20, 20);
+    var imageBitmapOptions = {imageOrientation:'from-image', premultiplyAlpha:'default',
+                              colorSpaceConversion:'none', resizeHeight:2122252543, resizeQuality:'high'};
+    return createImageBitmap(imgData, 0, 0, 4294967295, 64)
+        .then(imageBitmap => promise_rejects_dom(t, "InvalidStateError",
+            createImageBitmap(imageBitmap, imageBitmapOptions)));
+}, "createImageBitmap throws an InvalidStateError error with big imageBitmap scaled up in big height");
+
+promise_test(function(t) {
+    var imgData = new ImageData(20, 20);
+    var imageBitmapOptions = {imageOrientation:'from-image', premultiplyAlpha:'default',
+                              colorSpaceConversion:'none', resizeWidth:2122252543, resizeQuality:'high'};
+    return createImageBitmap(imgData, 0, 0, 4294967295, 64)
+        .then(imageBitmap => promise_rejects_dom(t, "InvalidStateError",
+            createImageBitmap(imageBitmap, imageBitmapOptions)));
+}, "createImageBitmap throws an InvalidStateError error with big imageBitmap scaled up in big width");
+</script>
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-transfer.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-transfer.html
new file mode 100644
index 0000000000..3ec02fcbf4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-transfer.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>createImageBitmap transferring test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/media.js"></script>
+<script src="common.sub.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<div id=log></div>
+<script>
+let worker, continuations = {};
+setup(function() {
+    worker = new Worker("transfer-worker.js");
+    worker.addEventListener("message", function(event) {
+        let { name, bitmap } = event.data;
+        if (continuations.hasOwnProperty(name)) {
+            continuations[name](bitmap);
+        }
+    });
+});
+
+for (let { name, factory } of imageSourceTypes) {
+    promise_test(function(t) {
+        return factory().then(createImageBitmap).then(function(bitmap) {
+            assert_equals(bitmap.width, 20);
+            assert_equals(bitmap.height, 20);
+
+            worker.postMessage({ name: t.name, bitmap: bitmap }, [bitmap]);
+
+            assert_equals(bitmap.width, 0);
+            assert_equals(bitmap.height, 0);
+
+            return new Promise(function(resolve) {
+                continuations[t.name] = resolve;
+            });
+        }).then(function(bitmap) {
+            assert_class_string(bitmap, "ImageBitmap");
+            assert_equals(bitmap.width, 20);
+            assert_equals(bitmap.height, 20);
+        });
+    }, `Transfer ImageBitmap created from ${name}`);
+}
+
+promise_test(async (t) => {
+  const url = get_host_info().REMOTE_ORIGIN + '/images/pattern.png';
+  const image = await makeMakeHTMLImage(url)();
+  const bitmap = await createImageBitmap(image);
+
+  assert_throws_dom('DataCloneError',
+                    () => worker.postMessage(bitmap, [bitmap]));
+}, 'Transferring a non-origin-clean ImageBitmap throws.');
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-worker.js b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-worker.js
new file mode 100644
index 0000000000..67a0904e47
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/createImageBitmap-worker.js
@@ -0,0 +1,17 @@
+function makeBlob() {
+    return new Promise(function(resolve, reject) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", '/images/pattern.png');
+        xhr.responseType = 'blob';
+        xhr.send();
+        xhr.onload = function() {
+            resolve(xhr.response);
+        };
+    });
+}
+
+addEventListener("message", () => {
+    makeBlob().then(createImageBitmap).then(bitmap => {
+        postMessage(bitmap, [bitmap]);
+    });
+});
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation-expected.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation-expected.html
new file mode 100644
index 0000000000..64b1791afe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation-expected.html
@@ -0,0 +1,18 @@
+<html>
+<body>
+  <canvas id="myCanvas" width="400" height="400"></canvas>
+</body>>
+<script>
+var canvas = document.getElementById('myCanvas');
+ctx = canvas.getContext('2d');
+image = document.createElement("img");
+image.src = "../../../resources/black_white.png"
+image.onload = function() {
+  Promise.all([
+    createImageBitmap(image, { imageOrientation: 'flipY' }),
+    ]).then(function(sprites) {
+  // Draw image onto the canvas
+  ctx.drawImage(sprites[0], 0, 0);
+});
+}
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation.html
new file mode 100644
index 0000000000..e93c17c8e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmap-from-imageData-no-image-rotation.html
@@ -0,0 +1,26 @@
+<html>
+  <link rel="match" href="imageBitmap-from-imageData-no-image-rotation-expected.html" />
+  <style type="text/css">
+    canvas {
+      image-orientation: none;
+    }
+  </style>
+<body>
+  <canvas id="myCanvas" width="400" height="400"></canvas>
+</body>>
+<script>
+var canvas = document.getElementById('myCanvas');
+ctx = canvas.getContext('2d');
+image = document.createElement("img");
+image.src = "../../../resources/black_white.png"
+image.onload = function() {
+  Promise.all([
+    // The image should be flipped and ignoring "image-orientation" setting
+    // in css style.
+    createImageBitmap(image, { imageOrientation: 'flipY' }),
+    ]).then(function(sprites) {
+  // Draw image onto the canvas
+  ctx.drawImage(sprites[0], 0, 0);
+});
+}
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-expected.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-expected.html
new file mode 100644
index 0000000000..bababda44c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-expected.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<body>
+  <p>Test whether the imageOrientation "from-image" works when creating an ImageBitmap from the ImageData of a canvas, and then transfered to an ImageBitmapRenderingContext.</p>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+
+function drawSquares(ctx) {
+  ctx.fillStyle = 'red';
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = 'green';
+  ctx.fillRect(150,0,300,150);
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(0,150,150,300);
+}
+
+async function runTest() {
+  const canvas = document.getElementById('canvas');
+  canvas.width = 300;
+  canvas.height = 300;
+  const ctx = canvas.getContext('2d');
+  drawSquares(ctx);
+}
+
+runTest();
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped-expected.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped-expected.html
new file mode 100644
index 0000000000..5e21671973
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped-expected.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<body>
+  <p>Test whether the imageOrientation "flipY" works when creating an ImageBitmap from the ImageData of a canvas, and then transfered to an ImageBitmapRenderingContext.</p>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+
+function drawSquares(ctx) {
+  ctx.fillStyle = 'red';
+  ctx.fillRect(0,150,150,150);
+  ctx.fillStyle = 'green';
+  ctx.fillRect(150,150,300,150);
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(0,0,150,150);
+}
+
+async function runTest() {
+  const canvas = document.getElementById('canvas');
+  canvas.width = 300;
+  canvas.height = 300;
+  const ctx = canvas.getContext('2d');
+  drawSquares(ctx);
+}
+
+runTest();
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped.html
new file mode 100644
index 0000000000..02e0690876
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-flipped.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="match" href="imageBitmapRendering-transferFromImageBitmap-flipped-expected.html" />
+<body>
+  <p>Test whether the imageOrientation "flipY" works when creating an ImageBitmap from the ImageData of a canvas, and then transfered to an ImageBitmapRenderingContext.</p>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+
+function drawSquares(ctx) {
+  ctx.fillStyle = 'red';
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = 'green';
+  ctx.fillRect(150,0,300,150);
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(0,150,150,300);
+}
+
+async function runTest() {
+  const canvas_temp = document.createElement('canvas');
+  canvas_temp.width = 300;
+  canvas_temp.height = 300;
+  const ctx_temp = canvas_temp.getContext('2d');
+  drawSquares(ctx_temp);
+  const imageSource = ctx_temp.getImageData(0, 0, 300, 300);
+  const imageOrientation = 'flipY';
+  imageIDFlipped =  await createImageBitmap(imageSource, 0, 0, 300, 300, { imageOrientation });
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('bitmaprenderer');
+  ctx.transferFromImageBitmap(imageIDFlipped);
+}
+
+runTest();
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl-expected.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl-expected.html
new file mode 100644
index 0000000000..4f155316f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl-expected.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+<body>
+  <p>
+    Test creating an ImageBitmap from the transferToImageBitmap of a webgl OffscreenCanvas, and then
+    transferred to an ImageBitmapRenderingContext.
+  </p>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+
+  function drawSquares(ctx) {
+    ctx.enable(ctx.SCISSOR_TEST);
+    ctx.scissor(0, 150, 150, 150);
+    ctx.clearColor(1, 0, 0, 1);
+    ctx.clear(ctx.COLOR_BUFFER_BIT);
+    ctx.scissor(150, 150, 300, 150);
+    ctx.clearColor(0, 1, 0, 1);
+    ctx.clear(ctx.COLOR_BUFFER_BIT);
+    ctx.scissor(0, 0, 150, 150);
+    ctx.clearColor(0, 0, 1, 1);
+    ctx.clear(ctx.COLOR_BUFFER_BIT);
+  }
+
+  async function runTest() {
+    const canvas = document.getElementById('canvas');
+    canvas.width = 300;
+    canvas.height = 300;
+    const ctx = canvas.getContext('webgl');
+    drawSquares(ctx);
+  }
+
+  runTest();
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl.html
new file mode 100644
index 0000000000..049a3822cd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap-webgl.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<link rel="match" href="imageBitmapRendering-transferFromImageBitmap-webgl-expected.html" />
+
+<body>
+  <p>
+    Test creating an ImageBitmap from the transferToImageBitmap of a webgl OffscreenCanvas, and then
+    transferred to an ImageBitmapRenderingContext.
+  </p>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+
+  function drawSquares(ctx) {
+    ctx.enable(ctx.SCISSOR_TEST);
+    ctx.scissor(0, 150, 150, 150);
+    ctx.clearColor(1, 0, 0, 1);
+    ctx.clear(ctx.COLOR_BUFFER_BIT);
+    ctx.scissor(150, 150, 300, 150);
+    ctx.clearColor(0, 1, 0, 1);
+    ctx.clear(ctx.COLOR_BUFFER_BIT);
+    ctx.scissor(0, 0, 150, 150);
+    ctx.clearColor(0, 0, 1, 1);
+    ctx.clear(ctx.COLOR_BUFFER_BIT);
+  }
+
+  async function runTest() {
+    const offscreen = new OffscreenCanvas(300, 300);
+    const ctxOffscreen = offscreen.getContext('webgl');
+    drawSquares(ctxOffscreen);
+    const image = offscreen.transferToImageBitmap();
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('bitmaprenderer');
+    ctx.transferFromImageBitmap(image);
+  }
+
+  runTest();
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap.html
new file mode 100644
index 0000000000..6d3d886759
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imageBitmapRendering-transferFromImageBitmap.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="match" href="imageBitmapRendering-transferFromImageBitmap-expected.html" />
+<body>
+  <p>Test whether the imageOrientation "from-image" works when creating an ImageBitmap from the ImageData of a canvas, and then transfered to an ImageBitmapRenderingContext.</p>
+  <canvas id="canvas" width="300" height="300"></canvas>
+</body>
+<script>
+
+function drawSquares(ctx) {
+  ctx.fillStyle = 'red';
+  ctx.fillRect(0,0,150,150);
+  ctx.fillStyle = 'green';
+  ctx.fillRect(150,0,300,150);
+  ctx.fillStyle = 'blue';
+  ctx.fillRect(0,150,150,300);
+}
+
+async function runTest() {
+  const canvas_temp = document.createElement('canvas');
+  canvas_temp.width = 300;
+  canvas_temp.height = 300;
+  const ctx_temp = canvas_temp.getContext('2d');
+  drawSquares(ctx_temp);
+  const imageSource = ctx_temp.getImageData(0, 0, 300, 300);
+  const imageOrientation = 'from-image';
+  imageIDFlipped =  await createImageBitmap(imageSource, 0, 0, 300, 300, { imageOrientation });
+  const canvas = document.getElementById('canvas');
+  const ctx = canvas.getContext('bitmaprenderer');
+  ctx.transferFromImageBitmap(imageIDFlipped);
+}
+
+runTest();
+
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imagebitmap-replication-exif-orientation.html b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imagebitmap-replication-exif-orientation.html
new file mode 100644
index 0000000000..ab4331adef
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/imagebitmap-replication-exif-orientation.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Verify that image orientation is propagated when ImageBitmap objects are replicated.</title>
+<link rel="author" title="Justin Novosad" href="mailto:junov@chromium.org">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+</head>
+
+<body>
+<script>
+// This test is most relevant for browser implementations that apply EXIF image
+// orientation lazily. That is to say that the transform is applied at rasterization
+// time rather than at image decode time. This implies that image orientation metadata
+// is stored internally in the decoded image's data structure.  This test ensures
+// that the orientation metadata is correctly carried over when ImageBitmap objects
+// are replicated (serialized/deserialized, copied or transferred).
+
+function checkImageBitmapRotated(bitmap) {
+    assert_equals(bitmap.width, 320, 'Bitmap width');
+    assert_equals(bitmap.height, 160, 'Bitmap height');
+
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+
+    const expected_colors = [
+        // row, col, r, g, b, a
+        [0, 0, 255, 0, 0, 255],
+        [0, 1, 0, 255, 0, 255],
+        [0, 2, 0, 0, 255, 255],
+        [0, 3, 0, 0, 0, 255],
+        [1, 0, 255, 128, 128, 255],
+        [1, 1, 128, 255, 128, 255],
+        [1, 2, 128, 128, 255, 255],
+        [1, 3, 128, 128, 128, 255],
+    ];
+
+    canvas.width = bitmap.width;
+    canvas.height = bitmap.height;
+    ctx.drawImage(bitmap, 0, 0);
+
+    let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    for (let [row, col, r, g, b, a] of expected_colors) {
+        let x = col * 80 + 40;
+        let y = row * 80 + 40;
+        let i = (x + y * canvas.width) * 4;
+        let expected = [r, g, b, a];
+        let actual = [data[i], data[i + 1], data[i + 2], data[i + 3]];
+        assert_array_approx_equals(actual, expected, 1, `Pixel value at (${x},${y}) ${expected} =~ ${actual}.`);
+    }
+}
+
+promise_test(async t => {
+    const response = await fetch("resources/squares_6.jpg");
+    const blob = await response.blob();
+    const image = await createImageBitmap(blob)
+    const image_copy = structuredClone(image);
+    checkImageBitmapRotated(image_copy);
+}, "ImageBitmap from file with EXIF rotation, duplicated via structuredClone");
+
+promise_test(async t => {
+    const image = new Image();
+    image.src = "resources/squares_6.jpg"
+    await new Promise(resolve => image.onload = resolve);
+    const image_copy = await createImageBitmap(image);
+    checkImageBitmapRotated(image_copy);
+}, "ImageBitmap from file with EXIF rotation, loaded via <img>");
+
+promise_test(async t => {
+    const image = new Image();
+    image.src = "resources/squares_6.jpg"
+    // The following has no effect because the image's style is not
+    // processed unless the element is connected to the DOM.
+    image.style.imageOrientation = "none";
+    await new Promise(resolve => image.onload = resolve);
+    const image_copy = await createImageBitmap(image);
+    checkImageBitmapRotated(image_copy);
+}, "ImageBitmap from file with EXIF rotation, loaded via <img> not in DOM, imageOrientation = none");
+
+promise_test(async t => {
+    const image = new Image();
+    document.body.appendChild(image);
+    image.src = "resources/squares_6.jpg"
+    // The style is being processed in this case, but the imageOrientation
+    // CSS property must still have no effect because createImageBitmap
+    // accesses the element's underlying media directly, without being
+    // affected by the image's style (unlike drawImage).
+    image.style.imageOrientation = "none";
+    await new Promise(resolve => image.onload = resolve);
+    const image_copy = await createImageBitmap(image);
+    checkImageBitmapRotated(image_copy);
+}, "ImageBitmap from file with EXIF rotation, loaded via <img> in DOM, imageOrientation = none");
+
+
+promise_test(async t => {
+    const response = await fetch("resources/squares_6.jpg");
+    const blob = await response.blob();
+    const image = await createImageBitmap(blob);
+    const image_copy = await createImageBitmap(image);
+    checkImageBitmapRotated(image_copy);
+}, "ImageBitmap from file with EXIF rotation, duplicated via createImageBitmap");
+
+promise_test(async t => {
+    const worker = new Worker("serialize-worker.js");
+    const response = await fetch("resources/squares_6.jpg");
+    const blob = await response.blob()
+    const image = await createImageBitmap(blob);
+    worker.postMessage({bitmap: image});
+    const bitmap = (await new Promise(resolve => {worker.addEventListener("message", resolve)})).data.bitmap;
+    checkImageBitmapRotated(bitmap);
+}, "ImageBitmap from file with EXIF rotation, duplicated via worker serialization round-trip");
+
+promise_test(async t => {
+    const worker = new Worker("transfer-worker.js");
+    let response = await fetch("resources/squares_6.jpg");
+    let blob = await response.blob();
+    let image = await createImageBitmap(blob);
+    worker.postMessage({bitmap: image}, [image]);
+    const bitmap = (await new Promise(resolve => {worker.addEventListener("message", resolve)})).data.bitmap;
+    checkImageBitmapRotated(bitmap);
+}, "ImageBitmap from file with EXIF rotation, duplicated via worker transfer round-trip");
+
+promise_test(async t => {
+    // This test variant ensures additional code coverage.
+    // By creating a canvas pattern, a reference to the ImageBitmap's
+    // underlying pixel data is held in the source realm.  This forces
+    // implementations that do lazy copying to duplicate the pixel
+    // data at transfer time. This test verifies that the lazy
+    // duplication code path (if applicable) carries over the image
+    // orientation metadata.
+    const worker = new Worker("transfer-worker.js");
+    let response = await fetch("resources/squares_6.jpg");
+    let blob = await response.blob();
+    let image = await createImageBitmap(blob);
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const pattern = ctx.createPattern(image, 'repeat');
+    worker.postMessage({bitmap: image}, [image]);
+    const bitmap = (await new Promise(resolve => {worker.addEventListener("message", resolve)})).data.bitmap;
+    checkImageBitmapRotated(bitmap);
+}, "ImageBitmap from file with EXIF rotation, duplicated via worker transfer round-trip, while referenced by a CanvasPattern");
+
+
+</script>
+</body>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_1.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_1.jpg
new file mode 100644
index 0000000000..0f0e8866b4
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_1.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_2.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_2.jpg
new file mode 100644
index 0000000000..526f7a6c82
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_2.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_3.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_3.jpg
new file mode 100644
index 0000000000..a21e521c2d
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_3.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_4.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_4.jpg
new file mode 100644
index 0000000000..c4380b1e67
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_4.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_5.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_5.jpg
new file mode 100644
index 0000000000..0bdd89aa1b
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_5.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_6.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_6.jpg
new file mode 100644
index 0000000000..f197760a11
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_6.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_7.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_7.jpg
new file mode 100644
index 0000000000..9b1a346888
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_7.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_8.jpg b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_8.jpg
new file mode 100644
index 0000000000..41d2fbe7f0
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/resources/squares_8.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/serialize-worker.js b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/serialize-worker.js
new file mode 100644
index 0000000000..a76537cc9e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/serialize-worker.js
@@ -0,0 +1,3 @@
+addEventListener('message', evt => {
+    postMessage(evt.data);
+});
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/transfer-worker.js b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/transfer-worker.js
new file mode 100644
index 0000000000..55465a899c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/transfer-worker.js
@@ -0,0 +1,3 @@
+addEventListener('message', evt => {
+    postMessage(evt.data, [evt.data.bitmap]);
+});
diff --git a/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/worker-onmessage-noop.js b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/worker-onmessage-noop.js
new file mode 100644
index 0000000000..c0a352b4d9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/imagebitmap/worker-onmessage-noop.js
@@ -0,0 +1,3 @@
+self.onmessage = function(e) {
+};
+
diff --git a/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers-expected.html b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers-expected.html
new file mode 100644
index 0000000000..873869ea72
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Canvas test: unclosed-layers</title>
+<h1>unclosed-layers</h1>
+<p class="desc">Check that unclosed layers aren't rendered.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'purple';
+  ctx.fillRect(60, 60, 75, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers.html b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers.html
new file mode 100644
index 0000000000..afb53cfbeb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-layers.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<link rel="match" href="unclosed-layers-expected.html">
+<title>Canvas test: unclosed-layers</title>
+<h1>unclosed-layers</h1>
+<p class="desc">Check that unclosed layers aren't rendered.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'purple';
+  ctx.fillRect(60, 60, 75, 50);
+
+  ctx.beginLayer({filter: {name: 'dropShadow', dx: -2, dy: 2}});
+  ctx.fillRect(40, 40, 75, 50);
+  ctx.fillStyle = 'grey';
+  ctx.fillRect(50, 50, 75, 50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers-expected.html b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers-expected.html
new file mode 100644
index 0000000000..8557441f7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Canvas test: unclosed-nested-layers</title>
+<h1>unclosed-nested-layers</h1>
+<p class="desc">Check that unclosed nested layers aren't rendered.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0,0,255,1)';
+  ctx.fillRect(60,60,75,50);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers.html b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers.html
new file mode 100644
index 0000000000..ada874a51a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/layers/unclosed-nested-layers.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<link rel="match" href="unclosed-nested-layers-expected.html">
+<title>Canvas test: unclosed-nested-layers</title>
+<h1>unclosed-nested-layers</h1>
+<p class="desc">Check that unclosed nested layers aren't rendered.</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = 'rgba(0, 0, 255, 1)';
+  ctx.fillRect(60, 60, 75, 50);
+
+  ctx.beginLayer();
+  ctx.fillStyle = 'rgba(225, 0, 0, 1)';
+  ctx.fillRect(50, 50, 75, 50);
+
+  ctx.beginLayer();
+  ctx.fillStyle = 'rgba(0, 255, 0, 1)';
+  ctx.fillRect(70, 70, 75, 50);
+
+  ctx.endLayer();
+  // Missing ctx.endLayer() here.
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001-ref.htm
new file mode 100644
index 0000000000..f85af9aab2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001-ref.htm
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: "square" lineCap</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+    </head>
+    <body>
+        <p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p>
+        <div><img src='/images/black-rectangle.png' alt='black rect' /></div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001.htm b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001.htm
new file mode 100644
index 0000000000..583dbc9d13
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/canvas_linestyles_linecap_001.htm
@@ -0,0 +1,37 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: "square" lineCap</title>
+        <link rel="match" href="canvas_linestyles_linecap_001-ref.htm">
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-linecap" />
+        <meta name="assert" content="The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Draw the first red rectangle.
+                ctx.fillStyle ="rgba(255, 0, 0, 1.0)";
+                ctx.fillRect(75, 0, 25, 50);
+
+                // Draw second red rectangle.
+                ctx.fillRect(0, 0, 25, 50);
+
+                // Draw a line with square lineCap.
+                ctx.strokeStyle = "rgba(0, 0, 0, 1.0)";
+                ctx.lineWidth = 50;
+                ctx.lineCap = "square";
+                ctx.beginPath();
+                ctx.moveTo(25, 25);
+                ctx.lineTo(75, 25);
+                ctx.stroke();
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: The square value of lineCap means that a rectangle with the length of the line width and the width of half the line width, placed flat against the edge perpendicular to the direction of the line, must be added at the end of each line.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_a.html b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_a.html
new file mode 100644
index 0000000000..7e692f937d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_a.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<link rel=match href=lineto_ref.html>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+<canvas id="c" width="150" height="150" >
+Your browser does not support the HTML5 canvas tag.</canvas>
+
+<script>
+var c = document.getElementById("c");
+var ctx = c.getContext("2d");
+
+ctx.beginPath();
+ctx.moveTo(20, 20);
+ctx.lineTo(20, 130);
+ctx.lineTo(130, 130);
+ctx.lineTo(130, 20);
+ctx.closePath();
+
+ctx.fillStyle = '#90EE90';
+ctx.fill();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_ref.html b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_ref.html
new file mode 100644
index 0000000000..3dc78ff804
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/lineto_ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    background: #90EE90;
+    width: 110px;
+    height: 110px;
+    margin: 20px;
+  }
+</style>
+<div></div>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/line-styles/setLineDash.html b/testing/web-platform/tests/html/canvas/element/manual/line-styles/setLineDash.html
new file mode 100644
index 0000000000..6b8d131da4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/line-styles/setLineDash.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>setLineDash</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/canvas/resources/canvas-tests.js"></script>
+<canvas id="canvas"></canvas>
+<script>
+test(function() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  var initial = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+
+  ctx.setLineDash(initial);
+  assert_array_equals(ctx.getLineDash(), initial, "line dash sanity");
+
+  ctx.setLineDash([Infinity]);
+  assert_array_equals(ctx.getLineDash(), initial, "Inf doesn't reset line dash");
+
+  ctx.setLineDash([NaN]);
+  assert_array_equals(ctx.getLineDash(), initial, "NaN doesn't reset line dash");
+
+  ctx.setLineDash([-1]);
+  assert_array_equals(ctx.getLineDash(), initial, "Negative doesn't reset line dash");
+}, "Invalid arguments to setLineDash()");
+
+test(function() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  assert_equals(ctx.lineDashOffset, 0);
+
+  ctx.setLineDash([15, 10]);
+  ctx.lineDashOffset = 5;
+  ctx.strokeRect(10,10,100,100);
+
+  var lineDash = ctx.getLineDash();
+  assert_array_equals(lineDash, [15, 10]);
+  assert_equals(ctx.lineDashOffset, 5);
+
+  ctx.setLineDash([5, 10, 15]);
+  ctx.strokeRect(20, 20, 120, 120);
+  lineDash = ctx.getLineDash();
+  assert_array_equals(lineDash, [5, 10, 15, 5, 10, 15]);
+
+  ctx.setLineDash(["1", 2]);
+  lineDash = ctx.getLineDash();
+  assert_array_equals(lineDash, [1, 2]);
+
+  ctx.clearRect(0, 0, 700, 700);
+  assert_equals(ctx.lineDashOffset, 5);
+
+  ctx.setLineDash([20, 10]);
+  ctx.lineDashOffset = 0;
+  // Make the test immune to plaform anti-aliasing discrepancies.
+  ctx.lineWidth = 4;
+  ctx.strokeStyle = '#00FF00';
+  ctx.strokeRect(10.5, 10.5, 30, 30);
+
+  _assertPixel(canvas, 25, 10, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 35, 10, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 40, 25, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 40, 35, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 25, 40, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 15, 40, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 10, 25, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 10, 15, 0, 0, 0, 0, 0);
+
+  // Verify that lineDashOffset works as expected.
+  ctx.lineDashOffset = 20;
+  ctx.strokeRect(50.5, 10.5, 30, 30);
+  _assertPixel(canvas, 55, 10, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 65, 10, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 80, 15, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 80, 25, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 75, 40, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 65, 40, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 50, 35, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 50, 25, 0, 255, 0, 255, 0);
+
+  // Verify negative lineDashOffset.
+  ctx.lineDashOffset = -10;
+  ctx.strokeRect(90.5, 10.5, 30, 30);
+  _assertPixel(canvas, 95, 10, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 105, 10, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 120, 15, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 120, 25, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 115, 40, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 105, 40, 0, 255, 0, 255, 0);
+  _assertPixel(canvas, 90, 35, 0, 0, 0, 0, 0);
+  _assertPixel(canvas, 90, 25, 0, 255, 0, 255, 0);
+
+  // Ensure that all zeros or negative pattern does not cause error state in
+  // context.
+  ctx.setLineDash([0, 0]);
+  ctx.strokeRect(130.5, 10.5, 10, 10);
+  ctx.setLineDash([-1]);
+  ctx.strokeRect(130.5, 10.5, 10, 10);
+  _assertPixel(canvas, 135, 15, 0, 0, 0, 0, 0);
+  ctx.fillStyle = '#00FF00';
+  ctx.fillRect(130, 10, 10, 10);
+  _assertPixel(canvas, 135, 15, 0, 255, 0, 255, 0);
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_001.htm b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_001.htm
new file mode 100644
index 0000000000..1763950d61
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_001.htm
@@ -0,0 +1,60 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: Shadows for linear gradients</title>
+        <script src="/resources/testharness.js"></script>
+        <script src="/resources/testharnessreport.js"></script>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#shadows" />
+        <meta name="assert" content="Shadows must be drawn for linear gradients." />
+        <script type="text/javascript">
+            async_test(function(t) {
+              window.addEventListener("load", t.step_func_done(function runTest() {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Draw a red rectangle.
+                ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
+                ctx.fillRect(150, 0, 100, 50);
+
+                // Set shadow styles to draw a black shadow to overlap the red rectangle.
+                ctx.shadowOffsetX = 150;
+                ctx.shadowColor = "rgba(0, 0, 0, 1.0)";
+
+                // Draw a left to right, green-to-blue linear gradient.
+                var lingrad = ctx.createLinearGradient(0, 50, 100, 50);
+                lingrad.addColorStop(0, "rgba(0, 255, 0, 1.0)");
+                lingrad.addColorStop(1, "rgba(0, 0, 255, 1.0)");
+                ctx.fillStyle = lingrad;
+                ctx.fillRect(0, 0, 100, 50);
+
+                // Check the red is gone
+                var data = ctx.getImageData(150, 0, 100, 50);
+                for (var i = 0; i < data.data.length; i += 4) {
+                  var r = data.data[i];
+                  var g = data.data[i+1];
+                  var b = data.data[i+2];
+                  var a = data.data[i+3];
+                  assert_equals(r, 0, "r channel");
+                  assert_equals(g, 0, "g channel");
+                  assert_equals(b, 0, "b channel");
+                  assert_equals(a, 0xFF, "a channel");
+                }
+
+                for (var j = 0; j < data.data.length; j += 4) {
+                  var r2 = data.data[j];
+                  var g2 = data.data[j+1];
+                  var b2 = data.data[j+2];
+                  var a2 = data.data[j+3];
+                  assert_false(r2 == 0xFF && g2 == 0 && b2 == 0 && a2 == 0xFF, "no red");
+                }
+              }));
+            }, "linear gradient fillRect draws shadow (black rectange)");
+        </script>
+    </head>
+    <body>
+        <p>Description: Shadows must be drawn for linear gradients.</p>
+        <p>Test passes if there is one gradient filled rectangle and one black rectangle, and no red seen on the page.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002-ref.htm
new file mode 100644
index 0000000000..0658be808e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002-ref.htm
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>HTML5 Canvas Test:  Shadows for images</title>
+    <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#shadows" />
+    <meta name="assert" content="Shadows must be drawn for images." />
+    <script type="text/javascript">
+      function runTest() {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.getContext("2d");
+
+        // Draw a black rectangle image on the canvas.
+        var img = document.getElementById("imgBlackRect");
+        ctx.drawImage(img, 0, 0);
+        ctx.drawImage(img, 150, 0);
+      }
+    </script>
+
+  </head>
+  <body onload="runTest()">
+    <p>Description:  Shadows must be drawn for images.</p>
+    <p>Test passes if two black rectangles are shown and there is no red visible on the page.</p>
+    <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    <img id="imgBlackRect" style="display:none;" width="100" height="50" src="/images/black-rectangle.png">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002.htm b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002.htm
new file mode 100644
index 0000000000..908fffea13
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_002.htm
@@ -0,0 +1,34 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>HTML5 Canvas Test:  Shadows for images</title>
+    <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+    <link rel="help" href="http://www.w3.org/TR/2dcontext/#shadows" />
+    <link rel="match" href="canvas_shadows_002-ref.htm" />
+    <meta name="assert" content="Shadows must be drawn for images." />
+    <script type="text/javascript">
+      function runTest() {
+        var canvas = document.getElementById("canvas1");
+        var ctx = canvas.getContext("2d");
+
+        // Draw a red rectangle.
+        ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
+        ctx.fillRect(150, 0, 100, 50);
+
+        // Set shadow styles to draw a black shadow to overlap the red rectangle.
+        ctx.shadowOffsetX = 150;
+        ctx.shadowColor = "rgba(0, 0, 0, 1.0)";
+
+        // Draw a black rectangle image on the canvas.
+        var img = document.getElementById("imgBlackRect");
+        ctx.drawImage(img, 0, 0);
+      }
+    </script>
+  </head>
+  <body onload="runTest()">
+    <p>Description:  Shadows must be drawn for images.</p>
+    <p>Test passes if two black rectangles are shown and there is no red visible on the page.</p>
+    <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    <img id="imgBlackRect" style="display:none" width="100" height="50" src="/images/black-rectangle.png">
+  </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors-expected.html b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors-expected.html
new file mode 100644
index 0000000000..e568aa9a5c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors-expected.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>System Colors work for Canvas Drop-Shadow Filters</title>
+</head>
+<body>
+<div style="width: 100px; height: 100px; background-color: black"></div>
+<div style="width: 100px; height: 100px; background-color: GrayText"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors.html b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors.html
new file mode 100644
index 0000000000..42978fb18f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/shadows/canvas_shadows_system_colors.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>System Colors work for Canvas Drop-Shadow Filters</title>
+  <link rel="match" href="canvas_shadows_system_colors-expected.html">
+</head>
+<body>
+<canvas id='c' width="100" height="200">
+<script>
+// See crbug.com/1226282 and crbug.com/1081945
+// A reference test is necessary because system colors do not have defined
+// numeric values. Here we're comparing 'GrayText' to css 'GrayText'.
+var ctx = document.getElementById('c').getContext('2d');
+ctx.filter = 'drop-shadow(0px 100px 0 GrayText)';
+ctx.fillRect(0,0,100,100);
+</script>
+</body>
+</html>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/shadows/shadowBlur_gaussian_tolerance.1.html b/testing/web-platform/tests/html/canvas/element/manual/shadows/shadowBlur_gaussian_tolerance.1.html
new file mode 100644
index 0000000000..eec27bf108
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/shadows/shadowBlur_gaussian_tolerance.1.html
@@ -0,0 +1,191 @@
+<!DOCTYPE HTML>
+<title>Test of canvas shadowBlur Gaussian blur pixel values</title>
+<meta charset=UTF-8>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<h1>Test of canvas shadowBlur Gaussian blur pixel values</h1>
+<script>
+
+/**
+ * See https://en.wikipedia.org/wiki/Error_function#Approximation_with_elementary_functions
+ */
+function erf(x) {
+  if (x < 0) {
+    return -erf(-x);
+  }
+  var p = 0.3275911, a1 = 0.254829592, a2 = -0.284496736, a3 = 1.421413741, a4 = -1.453152027, a5 = 1.061405429;
+  var t = 1 / (1 + p * x);
+  return 1 - Math.exp(-x * x) * t * (a1 + t * (a2 + t * (a3 + t * (a4 + t * a5))));
+}
+
+/**
+ * See https://en.wikipedia.org/wiki/Normal_distribution#Cumulative_distribution_function
+ * and https://en.wikipedia.org/wiki/Normal_distribution#Numerical_approximations_for_the_normal_CDF
+ */
+function standard_normal_distribution_cumulative(x) {
+  return 0.5 * (1 + erf(x / Math.SQRT2));
+}
+
+/**
+ * Verify a single pixel; helper for run_blur_test.
+ *   params - same as run_blur_test
+ *   row & col - relative to the corner of the rectangle being blurred
+ *   actual - actual color found there on the canvas
+ */
+function test_pixel(params, row, col, shadowOffset, actual) {
+  var expected_gaussian;
+  if (params.expected_sigma > 0) {
+    // Compute positions within a standard normal distribution (i.e.,
+    // where mean (μ) is and standard deviation (σ) is 1) in both
+    // dimensions.
+    // Add 0.5 because we want the middle of the pixel rather than the edge.
+    var pos_x = (col - shadowOffset + 0.5) / params.expected_sigma;
+    var pos_y = (row - shadowOffset + 0.5) / params.expected_sigma;
+
+    // Find the expected color value based on a Gaussian blur function.
+    // Since we're blurring the corner of a "very large" rectangle, we
+    // can, instead of sampling all of the pixels, use the cumulative
+    // form of the normal (Gaussian) distribution and pass it the
+    // position of the color transition (the edges of the rectangle),
+    // since we know everything above and to the left of that position
+    // is one color, and everything that is either below or to the right
+    // of that position is another color.
+    //
+    // NOTE: This assumes color-interpolation happens in sRGB rather
+    // than linearRGB.  The canvas spec doesn't appear to be clear on
+    // this point.  If it were linearRGB, we'd need to apply the
+    // correction after doing this calculation.  (No correction to the
+    // input is needed since the input is all 0 or 1.)
+    expected_gaussian = standard_normal_distribution_cumulative(-pos_x) *
+                        standard_normal_distribution_cumulative(-pos_y);
+  } else {
+    if (col >= shadowOffset || row >= shadowOffset) {
+      expected_gaussian = 0;
+    } else {
+      expected_gaussian = 1;
+    }
+  }
+  // TODO: maybe also compute expected value by triple box blur?
+
+  /*
+   * https://html.spec.whatwg.org/multipage/canvas.html#when-shadows-are-drawn
+   * describes how to draw shadows in canvas.  It says, among other things:
+   *
+   *   Perform a 2D Gaussian Blur on B, using σ as the standard deviation.
+   *
+   * without giving *any* allowance for error.
+   *
+   * However, other specifications that require Gaussian blurs allow some
+   * error; https://www.w3.org/TR/css-backgrounds-3/#shadow-blur allows up to
+   * 5%, and https://drafts.fxtf.org/filter-effects/#feGaussianBlurElement
+   * allows use of a triple box blur which is within 3%.
+   *
+   * Since expecting zero error is unreasonable, this test tests for the least
+   * restrictive of these bounds, the 5% error.
+   *
+   * Note that this allows 5% error in the color component, but there's no
+   * tolerance for error in the position; see comment below about sizes.
+   */
+
+  // Allow any rounding direction.
+  var min_b = Math.max(  0, Math.floor((expected_gaussian - 0.05) * 255));
+  var max_b = Math.min(255, Math.ceil ((expected_gaussian + 0.05) * 255));
+  var min_r = 255 - max_b;
+  var max_r = 255 - min_b;
+
+  var pos = "at row " + row + " col " + col + " ";
+
+  assert_true(min_r <= actual.r && actual.r <= max_r,
+              pos + "red component " + actual.r + " should be between " +
+              min_r + " and " + max_r + " (inclusive).");
+  assert_true(min_b <= actual.b && actual.b <= max_b,
+              pos + "blue component " + actual.b + " should be between " +
+              min_b + " and " + max_b + " (inclusive).");
+  assert_equals(actual.g, 0, pos + "green component should be 0");
+  assert_equals(actual.a, 255, pos + "alpha component should be 255");
+}
+
+/**
+ * Run a test of a single shadowBlur drawing operation.  Expects a
+ * parameters object containing:
+ *   name - name of test
+ *   canvas_width - width of canvas to create
+ *   canvas_height - height of canvas to create
+ *   shadowBlur - shadowBlur to use for the test drawing operation
+ *   expected_sigma - the standard deviation of the gaussian function
+ *     that shadowBlur is expected to produce
+ *   pixel_skip - how many pixels to skip when sampling results.  Should
+ *     be relatively prime with canvas_width.
+ */
+function run_blur_test(params) {
+  test(function() {
+    var canvas = document.createElement("canvas");
+    canvas.setAttribute("width", params.canvas_width);
+    canvas.setAttribute("height", params.canvas_height);
+    document.body.appendChild(canvas);
+    var cx = canvas.getContext("2d");
+
+    cx.fillStyle = "red";
+    cx.fillRect(0, 0, params.canvas_width, params.canvas_height);
+
+    // Fill a huge rect just to the top and left of the canvas, with its shadow
+    // blur centered at the middle of the canvas.
+    let edge = Math.floor(params.canvas_width / 2); // position of vertical
+    let big = Math.max(Math.ceil(params.expected_sigma * 1000),
+                       params.canvas_width,
+                       params.canvas_height);
+    cx.shadowBlur = params.shadowBlur;
+    cx.fillStyle = "green";
+    cx.shadowColor = "blue";
+    cx.shadowOffsetX = edge;
+    cx.shadowOffsetY = edge;
+    cx.fillRect(-big, -big, big, big);
+
+    var imageData =
+      cx.getImageData(0, 0, params.canvas_width, params.canvas_height);
+    for (var i = 0, i_max = params.canvas_width * params.canvas_height;
+         i < i_max;
+         i += params.pixel_skip) {
+      var row = Math.floor(i / params.canvas_width);
+      var col = i - row * params.canvas_width;
+
+      var actual = { r: imageData.data[i * 4],
+                     g: imageData.data[i * 4 + 1],
+                     b: imageData.data[i * 4 + 2],
+                     a: imageData.data[i * 4 + 3] };
+
+      test_pixel(params, row, col, edge, actual);
+    }
+  }, "shadowBlur Gaussian pixel values for " + params.name);
+}
+
+run_blur_test({
+  name: "no blur",
+  canvas_width: 4,
+  canvas_height: 4,
+  shadowBlur: 0,
+  expected_sigma: 0,
+  pixel_skip: 1
+});
+run_blur_test({
+  name: "small blur",
+  canvas_width: 20,
+  canvas_height: 20,
+  // Try to test something smaller than 8 due to historic change in
+  // https://www.w3.org/Bugs/Public/show_bug.cgi?id=10647 , but not too
+  // small, to avoid the error from rounding to individual pixels worth
+  // of box blur.
+  shadowBlur: 6,
+  expected_sigma: 3,
+  pixel_skip: 3
+});
+run_blur_test({
+  name: "large blur",
+  canvas_width: 100,
+  canvas_height: 100,
+  shadowBlur: 30,
+  expected_sigma: 15,
+  pixel_skip: 13
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected-ref.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected-ref.html
new file mode 100644
index 0000000000..b36d29b97f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>HTML Canvas reference</title>
+<body>
+<canvas id=c>
+</body>
+<script>
+var c = document.getElementById("c");
+var ctx = c.getContext("2d");
+ctx.font = "50px monospace";
+ctx.fillText("Hello", 50, 75);
+ctx.font = "25px serif";
+ctx.fillText("World", 100, 100);
+c.style.border = "3px solid cyan";
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected.html
new file mode 100644
index 0000000000..a1715f6663
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.disconnected.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>HTML Canvas testcase: canvas element not in document</title>
+<link rel=match href="canvas.2d.disconnected-ref.html">
+<meta name=fuzzy content="maxDifference=0-23;totalPixels=0-829">
+<body>
+</body>
+<script>
+var d = new Document();
+var c = d.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
+var ctx = c.getContext("2d");
+ctx.font = "50px monospace";
+ctx.fillText("Hello", 50, 75);
+ctx.font = "25px serif";
+ctx.fillText("World", 100, 100);
+c.toBlob((blob) => {
+  var img = document.createElement("img");
+  const url = URL.createObjectURL(blob);
+  img.src = url;
+  img.style.border = "3px solid cyan";
+  document.body.appendChild(img);
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch-ref.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch-ref.html
new file mode 100644
index 0000000000..00ecdccad3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+function draw() {
+    ctx.font = '25px test';
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+document.fonts.add(f);
+
+f.load().then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.condensed.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.condensed.html
new file mode 100644
index 0000000000..72db41f007
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.condensed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = condensed and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "condensed";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "condensed";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.expanded.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.expanded.html
new file mode 100644
index 0000000000..8a13ba13fc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.expanded.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = expanded and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "expanded";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "expanded";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-condensed.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-condensed.html
new file mode 100644
index 0000000000..afa910f62c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-condensed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = extra-condensed and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "extra-condensed";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "extra-condensed";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-expanded.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-expanded.html
new file mode 100644
index 0000000000..d10d4d9312
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.extra-expanded.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = extra-expanded and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "extra-expanded";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "extra-expanded";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.normal.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.normal.html
new file mode 100644
index 0000000000..e8fd66acad
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.normal.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = normal and shows as fail for
+// fontStretch = expanded or condensed.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/fail.woff)');
+f.stretch = "expanded";
+document.fonts.add(f);
+
+var f1 = new FontFace('test', 'url(/fonts/pass.woff)');
+document.fonts.add(f1);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+f2.stretch = "condensed";
+document.fonts.add(f2);
+
+Promise.all([f.load(), f1.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-condensed.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-condensed.html
new file mode 100644
index 0000000000..2ac9719595
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-condensed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = semi-condensed and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "semi-condensed";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "semi-condensed";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-expanded.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-expanded.html
new file mode 100644
index 0000000000..3c9fa27894
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.semi-expanded.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = semi-expanded and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "semi-expanded";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "semi-expanded";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-condensed.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-condensed.html
new file mode 100644
index 0000000000..2b0426e976
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-condensed.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = ultra-condensed and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "ultra-condensed";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "ultra-condensed";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-expanded.html b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-expanded.html
new file mode 100644
index 0000000000..5b4979de86
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas.2d.fontStretch.ultra-expanded.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>Canvas test: 2d.text.fontStretch</title>
+<link rel="match" href="canvas.2d.fontStretch-ref.html">
+<canvas id="c" class="output"><p class="fallback">FAIL (fallback content)</p></canvas>
+<script>
+
+var canvas = document.getElementById("c");
+var ctx = canvas.getContext('2d');
+
+// P shows as Pass for fontStretch = ultra-expanded and shows as fail for
+// fontStretch = fail.
+function draw() {
+    ctx.font = '25px test';
+    ctx.fontStretch = "ultra-expanded";
+    ctx.fillText("P", 10, 40);
+}
+
+var f = new FontFace('test', 'url(/fonts/pass.woff)');
+f.stretch = "ultra-expanded";
+document.fonts.add(f);
+
+var f2 = new FontFace('test', 'url(/fonts/fail.woff)');
+document.fonts.add(f2);
+
+Promise.all([f.load(), f2.load()]).then(draw);
+
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001-ref.htm
new file mode 100644
index 0000000000..1a19757e00
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001-ref.htm
@@ -0,0 +1,22 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  Ignore property-independent style sheet syntax "inherit" in Text (reference)</title>
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                ctx.font = "40px Ahem";
+                ctx.fillText("Filler", 5, 50);
+                ctx.fillText("Filler", 5, 100);
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description:  Ignore "inherit" property-independent style sheet syntax without assigning a new font value.</p>
+        <p>Test passes if there are two identical black boxes below.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001.htm b/testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001.htm
new file mode 100644
index 0000000000..923ce71c07
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/text/canvas_text_font_001.htm
@@ -0,0 +1,33 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test:  Ignore property-independent style sheet syntax "inherit" in Text</title>
+        <link rel="match" href="canvas_text_font_001-ref.htm" />
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-font" />
+        <meta name="assert" content=":  Ignore 'inherit' property-independent style sheet syntax without assigning a new font value." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Assign a valid font.
+                ctx.font = "40px Ahem";
+
+                // Assign property-independent style sheet syntax 'inherit' as font (this must be ignored).
+                ctx.font = "20px inherit";
+                ctx.fillText("Filler", 5, 50);
+
+                // Assign a valid font which was used earlier.
+                ctx.font = "40px Ahem";
+                ctx.fillText("Filler", 5, 100);
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description:  Ignore "inherit" property-independent style sheet syntax without assigning a new font value.</p>
+        <p>Test passes if there are two identical black boxes below.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.state.saverestore.imageSmoothingEnabled.html b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.state.saverestore.imageSmoothingEnabled.html
new file mode 100644
index 0000000000..e99be83d5f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.state.saverestore.imageSmoothingEnabled.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CanvasRenderingContext2D imageSmoothingEnabled save/restore test</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/scripting.html#image-smoothing">
+<script>
+function createTestImage() {
+  var image = document.createElement('canvas');
+  var imgctx = image.getContext('2d');
+  imgctx.fillStyle = "#F00";
+  imgctx.fillRect(0, 0, 2, 2);
+  imgctx.fillStyle = "#0F0";
+  imgctx.fillRect(0, 0, 1, 1);
+  return image;
+}
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  ctx.save();
+  ctx.imageSmoothingEnabled = false;
+  ctx.restore();
+  assert_equals(ctx.imageSmoothingEnabled, true);
+}, "Test that restore() undoes any modifications to imageSmoothingEnabled.");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  ctx.imageSmoothingEnabled = false;
+  var old = ctx.imageSmoothingEnabled;
+  ctx.save();
+  assert_equals(ctx.imageSmoothingEnabled, old);
+  ctx.restore();
+}, "Test that save() doesn't modify the values of imageSmoothingEnabled.");
+
+test(function() {
+  var ctx = document.createElement('canvas').getContext('2d');
+  ctx.imageSmoothingEnabled = false;
+  ctx.save();
+  ctx.imageSmoothingEnabled = true;
+  ctx.restore();
+  var image = createTestImage();
+  ctx.scale(10, 10);
+  ctx.drawImage(image, 0, 0);
+  var pixels = ctx.getImageData(0, 0, 1, 1).data;
+  assert_array_equals(pixels, [0, 255, 0, 255]);
+}, "Test that restoring actually changes smoothing and not just the attribute value.");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.zero.size.canvas.html b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.zero.size.canvas.html
new file mode 100644
index 0000000000..273e5c7484
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/2d.zero.size.canvas.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+</head>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="canvas" width="0" height="0"></canvas>
+<body>
+<script>
+test(function() {
+    var context = document.getElementById("canvas").getContext("2d");
+    context.fillStyle = "green";
+}, 'This test ensures that accessing the context of a zero sized canvas does not crash.');
+</script>
+</body>
+</html>
+
diff --git a/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001-ref.htm
new file mode 100644
index 0000000000..aee610d2ec
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001-ref.htm
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: restore() pops top entry in drawing state stack</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+    </head>
+    <body>
+        <p>Description: restore() pops the top entry in the drawing state stack.</p>
+        <div><img src='/images/threecolors.png' alt='3 colors'></div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001.htm b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001.htm
new file mode 100644
index 0000000000..6d5a3cb20f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/the-canvas-state/canvas_state_restore_001.htm
@@ -0,0 +1,42 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: restore() pops top entry in drawing state stack</title>
+        <link rel="match" href="canvas_state_restore_001-ref.htm">
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#the-canvas-state" />
+        <meta name="assert" content="restore() pops the top entry in the drawing state stack." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+                ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
+                ctx.fillRect(0, 0, 99, 50);
+
+                // Save colors to the stack as separate drawing states.
+                ctx.fillStyle = "rgba(255, 255, 0, 1.0)";
+                ctx.save();
+                ctx.fillStyle = "rgba(0, 0, 255, 1.0)";
+                ctx.save();
+                ctx.fillStyle = "rgba(0, 255, 0, 1.0)";
+                ctx.save();
+
+                // Modify the current fillStyle.
+                ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
+
+                // Restore the drawing states previously saved and draw with them.
+                ctx.restore();
+                ctx.fillRect(66, 0, 33, 50);
+                ctx.restore();
+                ctx.fillRect(33, 0, 33, 50);
+                ctx.restore();
+                ctx.fillRect(0, 0, 33, 50);
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: restore() pops the top entry in the drawing state stack.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/transformations/2d.transformation.getTransform.html b/testing/web-platform/tests/html/canvas/element/manual/transformations/2d.transformation.getTransform.html
new file mode 100644
index 0000000000..664efd50e6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/transformations/2d.transformation.getTransform.html
@@ -0,0 +1,39 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<script>
+// Ensure that context2d.getTransform works
+const epsilon = 1e-5;
+const canvas = document.createElement('canvas');
+const ctx = canvas.getContext('2d');
+
+test(function(t) {
+  assert_array_equals(ctx.getTransform().toFloat32Array(),
+    [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+    "Assert that an untransformed matrix is identity");
+
+  ctx.scale(2, 3);
+  transform = ctx.getTransform();
+  assert_array_equals(ctx.getTransform().toFloat32Array(),
+    [2, 0, 0, 0, 0, 3, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+    "Assert that context2d scaling works");
+
+  ctx.rotate(Math.PI/2);
+  transform = ctx.getTransform();
+  assert_array_approx_equals(ctx.getTransform().toFloat32Array(),
+    [0, 3, 0, 0, -2, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], epsilon,
+    "Assert that context2d rotate works");
+
+  ctx.translate(1, -1);
+  transform = ctx.getTransform();
+  assert_array_approx_equals(ctx.getTransform().toFloat32Array(),
+    [0, 3, 0, 0, -2, 0, 0, 0, 0, 0, 1, 0, 2, 3, 0, 1], epsilon,
+    "Assert context2d translate works.");
+
+  ctx.resetTransform();
+  assert_array_equals(ctx.getTransform().toFloat32Array(),
+    [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
+    "Assert that a reset matrix is identity");
+}, 'This test ensures that getTransform works correctly.');
+</script>
+</body>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001-ref.html b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001-ref.html
new file mode 100644
index 0000000000..caeea04cef
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<body>
+<style>
+  html, body, div {
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    width: 75px;
+    height: 75px;
+    float: left;
+  }
+</style>
+
+<div style="background-color:red"></div>
+<div style="clear:left"></div>
+<div style="background-color:blue"></div>
+
+</body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001.html b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001.html
new file mode 100644
index 0000000000..c12acbf6f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_reset_001.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="match" href="canvas_transformations_reset_001-ref.html">
+<style>
+  html, body {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+<canvas id="c" width="150" height="150"></canvas>
+<script>
+var c = document.getElementById("c");
+var ctx = c.getContext("2d");
+
+ctx.translate(75, 75);
+ctx.fillStyle = 'blue';
+ctx.fillRect(0, 0, 75, 75);
+
+ctx.resetTransform();
+ctx.fillStyle = 'red';
+ctx.fillRect(0, 0, 75, 75);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001-ref.htm b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001-ref.htm
new file mode 100644
index 0000000000..1201bcca9f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001-ref.htm
@@ -0,0 +1,11 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>HTML5 Canvas Test: scale() transformation</title>
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+    </head>
+    <body>
+        <p>Description: The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix.</p>
+        <div><img alt='black rectangle' src="/images/black-rectangle.png"></div>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001.htm b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001.htm
new file mode 100644
index 0000000000..73f71351ea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/transformations/canvas_transformations_scale_001.htm
@@ -0,0 +1,31 @@
+<!doctype HTML>
+
+<html>
+    <head>
+        <title>HTML5 Canvas Test: scale() transformation</title>
+        <link rel="match" href="canvas_transformations_scale_001-ref.htm">
+        <link rel="author" title="Microsoft" href="http://www.microsoft.com" />
+        <link rel="help" href="http://www.w3.org/TR/2dcontext/#dom-context-2d-scale" />
+        <meta name="assert" content="The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix." />
+        <script type="text/javascript">
+            function runTest()
+            {
+                var canvas = document.getElementById("canvas1");
+                var ctx = canvas.getContext("2d");
+
+                // Draw a red rectangle.
+                ctx.fillStyle = "rgba(255, 0, 0, 1.0)";
+                ctx.fillRect(0, 0, 100, 50);
+
+                // Draw a black rectangle with scaling.
+                ctx.fillStyle = "rgba(0, 0, 0, 1.0)";
+                ctx.scale(2, 2);
+                ctx.fillRect(0, 0, 50, 25);
+            }
+        </script>
+    </head>
+    <body onload="runTest()">
+        <p>Description: The scale(x, y) method must add the scaling transformation described by the arguments to the transformation matrix.</p>
+        <canvas id="canvas1" width="300" height="150">Browser does not support HTML5 Canvas.</canvas>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/transformations/transform_a.html b/testing/web-platform/tests/html/canvas/element/manual/transformations/transform_a.html
new file mode 100644
index 0000000000..8c1f59efda
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/transformations/transform_a.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<meta charset=utf-8>
+<link rel=match href=transform_ref.html>
+<style>
+html, body {
+    margin: 0;
+}
+</style>
+<canvas id=c width=400 height=300></canvas>
+<script>
+var canvas = document.getElementById('c');
+var ctx = canvas.getContext('2d');
+ctx.scale(3, 3);
+ctx.fillStyle = 'rgb(255, 0, 0)';
+ctx.beginPath();
+ctx.moveTo(10, 10);
+ctx.bezierCurveTo(10, 10, 20, 10, 20, 10);
+ctx.bezierCurveTo(20, 10, 20, 20, 20, 20);
+ctx.bezierCurveTo(20, 20, 10, 20, 10, 20);
+ctx.closePath();
+ctx.fill();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/transformations/transform_ref.html b/testing/web-platform/tests/html/canvas/element/manual/transformations/transform_ref.html
new file mode 100644
index 0000000000..2a166c36ce
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/transformations/transform_ref.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<meta charset=utf-8>
+<style>
+html, body {
+    margin: 0;
+}
+section {
+    position: absolute;
+    background: rgb(255, 0, 0);
+    width: 30px;
+    height: 30px;
+    top: 30px;
+    left: 30px;
+}
+</style>
+<section></section>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1-expected.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1-expected.htm
new file mode 100644
index 0000000000..3272f32fb8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1-expected.htm
@@ -0,0 +1,10 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+    </head>
+    <body>
+        <p>There should be no text below this, because the text is inside a canvas element.
+            The canvas is never closed, and the rest of the body ends up inside it.</p>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1.htm
new file mode 100644
index 0000000000..5e0c914755
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-1.htm
@@ -0,0 +1,14 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+        <link rel="match" href="unclosed-canvas-1-expected.htm">
+        <meta name="assert" content="Test what if canvas tag is unclosed in tag p" />
+        <script type="text/javascript"></script>
+    </head>
+    <body>
+        <p>There should be no text below this, because the text is inside a canvas element.
+            The canvas is never closed, and the rest of the body ends up inside it. </p>
+        <canvas>This text should NOT be visible if JavaScript is enabled.
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2-expected.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2-expected.htm
new file mode 100644
index 0000000000..fd48cd0db1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2-expected.htm
@@ -0,0 +1,14 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+    </head>
+    <body>
+        <div><canvas></canvas></div>
+        <p>This text should be visible, even though it's preceded by an unclosed canvas tag,
+            because of the &lt;/div&gt; that closes an element opened before the canvas.
+            There's nothing special about div; we get the same results with other types of
+            elements.
+        </p>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2.htm
new file mode 100644
index 0000000000..fb329e73d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-2.htm
@@ -0,0 +1,15 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+        <link rel="match" href="unclosed-canvas-2-expected.htm">
+        <meta name="assert" content="Test what if canvas tag is unclosed in tag div" />
+        <script type="text/javascript"></script>
+    </head>
+    <body>
+        <div><canvas></div>
+        <p>This text should be visible, even though it's preceded by an unclosed canvas tag,
+        because of the &lt;/div&gt; that closes an element opened before the canvas.
+        There's nothing special about div; we get the same results with other types of elements.</p>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3-expected.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3-expected.htm
new file mode 100644
index 0000000000..efd239b4fb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3-expected.htm
@@ -0,0 +1,13 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+    </head>
+    <body>
+        <p>There should be no text below this, because the text is inside a canvas element
+            and the &lt;/div&gt; that's also inside the canvas element does not close an open
+            element. The canvas is never closed, and the rest of the body ends up inside it.
+            There's nothing special about div; we get the same results with other types of
+            elements.</p>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3.htm
new file mode 100644
index 0000000000..8ffaa0f9eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-3.htm
@@ -0,0 +1,16 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+        <link rel="match" href="unclosed-canvas-3-expected.htm">
+        <meta name="assert" content="Test what if canvas tag is unclosed in unclosed div" />
+        <script type="text/javascript"></script>
+    </head>
+    <body>
+        <p>There should be no text below this, because the text is inside a canvas element
+        and the &lt;/div&gt; that's also inside the canvas element does not close an open element.
+        The canvas is never closed, and the rest of the body ends up inside it.
+        There's nothing special about div; we get the same results with other types of elements.</p>
+        <canvas></div>This text should NOT be visible if JavaScript is enabled.
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4-expected.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4-expected.htm
new file mode 100644
index 0000000000..492449261e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4-expected.htm
@@ -0,0 +1,14 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+    </head>
+    <body>
+        <p>There should be no text below this, because the text is inside a canvas element
+            and the &lt;/div&gt; that's also inside the canvas element does not close an open
+            element. The canvas is never closed, and the rest of the body ends up inside it.
+            There's nothing special about div; we get the same results with other types of
+            elements. The fact that the canvas tag uses XML self-closing syntax has no effect.
+        </p>
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4.htm b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4.htm
new file mode 100644
index 0000000000..aa5fd14438
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/unclosed-canvas-4.htm
@@ -0,0 +1,17 @@
+<!doctype HTML>
+<html>
+    <head>
+        <title>unclosed canvas tag in body</title>
+        <link rel="match" href="unclosed-canvas-4-expected.htm">
+        <meta name="assert" content="Test what if canvas tag is unclosed in body" />
+        <script type="text/javascript"></script>
+    </head>
+    <body>
+        <p>There should be no text below this, because the text is inside a canvas element
+        and the &lt;/div&gt; that's also inside the canvas element does not close an open element.
+        The canvas is never closed, and the rest of the body ends up inside it.
+        There's nothing special about div; we get the same results with other types of elements.
+        The fact that the canvas tag uses XML self-closing syntax has no effect.</p>
+        <canvas/></div>This text should NOT be visible if JavaScript is enabled.
+    </body>
+</html>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html
new file mode 100644
index 0000000000..c2d158f893
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/ImageData-fidelity.html
@@ -0,0 +1,126 @@
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+async_test(function(t) {
+  var image = new Image();
+  // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+  // The image has no embedded color profile.
+  image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAx" +
+    "WXB3AAAAG0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAAElFTkSuQmCC";
+
+  image.onload = function() {
+    var canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 1;
+    var ctx = canvas.getContext('2d');
+    ctx.drawImage(image, 0, 0);
+    var img = ctx.getImageData(0, 0, 256, 1);
+    t.step(function() {
+      for (var i = 0; i < 256; i++) {
+        assert_equals(img.data[4 * i], i, "red component");
+        assert_equals(img.data[4 * i + 1], i, "green component");
+        assert_equals(img.data[4 * i + 2], i, "blue component");
+        assert_equals(img.data[4 * i + 3], 255, "alpha component");
+      }
+    });
+    t.done();
+  }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+    "when image metadata has no color space and canvas uses the default " +
+    "color space.");
+
+async_test(function(t) {
+  var image = new Image();
+  // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+  // The image has an embedded sRGB color profile.
+  image.src =
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAA" +
+      "G0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAo3pUWHRSYXcgcHJvZm" +
+      "lsZSB0eXBlIEFQUDEAAHicZU5bCsMwDPv3KXoEv/I6TrampTC20ft/LE7WETJBkK1YQrCX" +
+      "ZzmP+/I+X9vxKLAYyCGoC9En77FCV10ROWNHrM8hUW7cQZ00V/026tDZMRKbUQYDt4lJJr" +
+      "2FxeCTJc5BV4svNE4Nxl1Tn8N1LCgMIoKJ2sHvo25sHfK/odYT02luCWMP+AA5M0KbNr61" +
+      "PwAAAABJRU5ErkJggg==";
+
+  image.onload = function() {
+    var canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 1;
+    var ctx = canvas.getContext('2d', {colorSpace: 'srgb'});
+    ctx.drawImage(image, 0, 0);
+    var img = ctx.getImageData(0, 0, 256, 1);
+    t.step(function() {
+      for (var i = 0; i < 256; i++) {
+        assert_equals(img.data[4 * i], i, "red component");
+        assert_equals(img.data[4 * i + 1], i, "green component");
+        assert_equals(img.data[4 * i + 2], i, "blue component");
+        assert_equals(img.data[4 * i + 3], 255, "alpha component");
+      }
+    });
+    t.done();
+  }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+    "when image metadata has srgb color space and canvas uses the srgb " +
+    "color space.");
+
+async_test(function(t) {
+  var image = new Image();
+  // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+  // The image has no embedded color profile.
+  image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAx" +
+    "WXB3AAAAG0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAAElFTkSuQmCC";
+
+  image.onload = function() {
+    var canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 1;
+    var ctx = canvas.getContext('2d', {colorSpace: 'srgb'});
+    ctx.drawImage(image, 0, 0);
+    var img = ctx.getImageData(0, 0, 256, 1);
+    t.step(function() {
+      for (var i = 0; i < 256; i++) {
+        assert_equals(img.data[4 * i], i, "red component");
+        assert_equals(img.data[4 * i + 1], i, "green component");
+        assert_equals(img.data[4 * i + 2], i, "blue component");
+        assert_equals(img.data[4 * i + 3], 255, "alpha component");
+      }
+    });
+    t.done();
+  }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+    "when image metadata has no color space and canvas uses the srgb " +
+    "color space.");
+
+
+async_test(function(t) {
+  var image = new Image();
+  // This image is 256 by 1 and contains an opaque grayscale ramp from 0 to 255.
+  // The image has an embedded sRGB color profile.
+  image.src =
+      "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAABCAYAAAAxWXB3AAAA" +
+      "G0lEQVQ4T2NkYGD4z8jIyDCKR8NgNA2MvDQAAPiPA/5tZ8G+AAAAo3pUWHRSYXcgcHJvZm" +
+      "lsZSB0eXBlIEFQUDEAAHicZU5bCsMwDPv3KXoEv/I6TrampTC20ft/LE7WETJBkK1YQrCX" +
+      "ZzmP+/I+X9vxKLAYyCGoC9En77FCV10ROWNHrM8hUW7cQZ00V/026tDZMRKbUQYDt4lJJr" +
+      "2FxeCTJc5BV4svNE4Nxl1Tn8N1LCgMIoKJ2sHvo25sHfK/odYT02luCWMP+AA5M0KbNr61" +
+      "PwAAAABJRU5ErkJggg==";
+
+  image.onload = function() {
+    var canvas = document.createElement('canvas');
+    canvas.width = 256;
+    canvas.height = 1;
+    var ctx = canvas.getContext('2d');
+    ctx.drawImage(image, 0, 0);
+    var img = ctx.getImageData(0, 0, 256, 1);
+    t.step(function() {
+      for (var i = 0; i < 256; i++) {
+        assert_equals(img.data[4 * i], i, "red component");
+        assert_equals(img.data[4 * i + 1], i, "green component");
+        assert_equals(img.data[4 * i + 2], i, "blue component");
+        assert_equals(img.data[4 * i + 3], 255, "alpha component");
+      }
+    });
+    t.done();
+  }
+}, "Verify that drawImage->getImageData round trip preserves color values " +
+    "when image metadata has srgb color space and canvas uses the default " +
+    "color space.");
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html
new file mode 100644
index 0000000000..9b96b1a6d2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-Blob.html
@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing ImageBitmaps with different image Blob source bit depths
+// and color profiles into sRGB and Display P3 canvases works, by reading pixels
+// with getImageData() as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            for (let cropSource of [false, true]) {
+                async_test(function(t) {
+                    fetch(`resources/${filename}`)
+                        .then(t.step_func(response => response.blob()))
+                        .then(t.step_func(blob => (cropSource ? createImageBitmap(blob, 1, 1, 1, 1) : createImageBitmap(blob))))
+                        .then(t.step_func_done(function(imageBitmap) {
+                            let canvas = document.createElement("canvas");
+                            canvas.width = 2;
+                            canvas.height = 2;
+
+                            let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+                            ctx.drawImage(imageBitmap, 0, 0);
+
+                            let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+                            let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+                            assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+                        }));
+                }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+            }
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html
new file mode 100644
index 0000000000..0bd18e9beb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageBitmap.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing ImageBitmaps created from other ImageBitamps with different
+// image source bit depths and color profiles into sRGB and Display P3
+// canvases works, by reading pixels with getImageData() as sRGB and Display P3
+// values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            for (let cropSource of [false, true]) {
+                async_test(function(t) {
+                    let image = new Image();
+                    image.onload = t.step_func_done(function() {
+
+                        let canvas = document.createElement("canvas");
+                        canvas.width = 2;
+                        canvas.height = 2;
+
+                        let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+
+                        createImageBitmap(image).then(t.step_func(function(sourceImageBitmap) {
+                            let imageBitmapPromise;
+                            if (cropSource)
+                                imageBitmapPromise = createImageBitmap(sourceImageBitmap, 1, 1, 1, 1);
+                            else
+                                imageBitmapPromise = createImageBitmap(sourceImageBitmap);
+
+                            imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+                                ctx.drawImage(imageBitmap, 0, 0);
+
+                                let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+                                let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+                                assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+                            }));
+                        }));
+                    });
+                    image.src = `resources/${filename}`;
+                }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+            }
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html
new file mode 100644
index 0000000000..2216b46dd8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-ImageData.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that ImageBitmaps created from ImageData sources with different color
+// spaces can be drawn into sRGB and Display P3 canvases, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+function runTest(sourceColorSpace, destinationColorSpace, colors) {
+    for (let [sourceColorString, expectedColor] of Object.entries(colors)) {
+        for (let cropSource of [false, true]) {
+            async_test(function(t) {
+                let sourceColor = sourceColorString.split(",").map(x => +x);
+
+                let sourceImageData = new ImageData(4, 4, { colorSpace: sourceColorSpace });
+                for (let i = 0; i < 4 * 4 * 4; i += 4) {
+                    for (let c = 0; c < 4; ++c)
+                        sourceImageData.data[i + c] = sourceColor[c];
+                }
+
+                let imageBitmapPromise;
+                if (cropSource)
+                    imageBitmapPromise = createImageBitmap(sourceImageData, 2, 2, 2, 2);
+                else
+                    imageBitmapPromise = createImageBitmap(sourceImageData);
+
+                imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+                    let destination = document.createElement("canvas");
+                    destination.width = 2;
+                    destination.height = 2;
+
+                    let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace });
+                    destinationContext.drawImage(imageBitmap, 0, 0);
+
+                    let destinationImageData = destinationContext.getImageData(1, 1, 1, 1);
+
+                    assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`);
+                }));
+            }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}, cropSource=${cropSource}`);
+        }
+    }
+}
+
+runTest("srgb", "display-p3", fromSRGBToDisplayP3);
+runTest("display-p3", "srgb", fromDisplayP3ToSRGB);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html
new file mode 100644
index 0000000000..f3156349ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-canvas.html
@@ -0,0 +1,53 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that ImageBitmaps created from canvas sources with different color
+// spaces can be drawn into sRGB and Display P3 canvases, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+function runTest(sourceColorSpace, destinationColorSpace, colors) {
+    for (let [sourceColorString, expectedColor] of Object.entries(colors)) {
+        for (let cropSource of [false, true]) {
+            async_test(function(t) {
+                let source = document.createElement("canvas");
+                source.width = 4;
+                source.height = 4;
+
+                let sourceContext = source.getContext("2d", { colorSpace: sourceColorSpace });
+
+                let sourceColor = sourceColorString.split(",").map(x => +x);
+
+                let sourceImageData = new ImageData(4, 4, { colorSpace: sourceColorSpace });
+                for (let i = 0; i < 4 * 4 * 4; i += 4) {
+                    for (let c = 0; c < 4; ++c)
+                        sourceImageData.data[i + c] = sourceColor[c];
+                }
+                sourceContext.putImageData(sourceImageData, 0, 0);
+
+                let imageBitmapPromise;
+                if (cropSource)
+                    imageBitmapPromise = createImageBitmap(source, 2, 2, 2, 2);
+                else
+                    imageBitmapPromise = createImageBitmap(source);
+
+                imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+                    let destination = document.createElement("canvas");
+                    destination.width = 2;
+                    destination.height = 2;
+
+                    let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace });
+                    destinationContext.drawImage(imageBitmap, 0, 0);
+
+                    let destinationImageData = destinationContext.getImageData(1, 1, 1, 1);
+
+                    assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`);
+                }));
+            }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}, cropSource=${cropSource}`);
+        }
+    }
+}
+
+runTest("srgb", "display-p3", fromSRGBToDisplayP3);
+runTest("display-p3", "srgb", fromDisplayP3ToSRGB);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html
new file mode 100644
index 0000000000..cf4f38f8db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-cloned.html
@@ -0,0 +1,70 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing structured cloned ImageBitmaps with different image source
+// bit depths and color profiles into sRGB and Display P3 canvases works, by
+// reading pixels with getImageData() as sRGB and Display P3 values.
+
+let nextTestID = 0;
+
+class Test {
+    constructor(testConfiguration) {
+        Object.assign(this, testConfiguration);
+        this.testID = nextTestID++;
+    }
+
+    run() {
+        let self = this;
+        async_test(function(t) {
+            self.t = t;
+            self.image = new Image();
+            self.image.onload = t.step_func(self.onImageLoaded.bind(self));
+            self.image.src = `resources/${self.filename}`;
+        }, `${this.filename}, Context ${this.contextColorSpace}, ImageData ${this.imageDataColorSpace}, cropSource=${this.cropSource}`);
+    }
+
+    onImageLoaded() {
+        let imageBitmapPromise;
+        if (this.cropSource)
+            imageBitmapPromise = createImageBitmap(this.image, 1, 1, 1, 1);
+        else
+            imageBitmapPromise = createImageBitmap(this.image);
+        imageBitmapPromise.then(this.t.step_func(this.onImageBitmapCreated.bind(this)));
+    }
+
+    onImageBitmapCreated(imageBitmap) {
+        window.addEventListener("message", this.t.step_func(this.onMessage.bind(this)));
+        window.postMessage({ imageBitmap, testID: this.testID });
+    }
+
+    onMessage(message) {
+        if (message.data.testID != this.testID)
+            return;
+
+        let canvas = document.createElement("canvas");
+        canvas.width = 2;
+        canvas.height = 2;
+
+        let ctx = canvas.getContext("2d", { colorSpace: this.contextColorSpace });
+        ctx.drawImage(message.data.imageBitmap, 0, 0);
+
+        let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: this.imageDataColorSpace });
+
+        let expected = this.expectedPixels[`${this.contextColorSpace} ${this.imageDataColorSpace}`];
+        assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+        this.t.done();
+    }
+}
+
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            for (let cropSource of [false, true])
+                new Test({ filename, expectedPixels, contextColorSpace, imageDataColorSpace, cropSource }).run();
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html
new file mode 100644
index 0000000000..e7e85c915d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-image.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing ImageBitmaps with different image source bit depths and
+// color profiles into sRGB and Display P3 canvases works, by reading pixels
+// with getImageData() as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            for (let cropSource of [false, true]) {
+                async_test(function(t) {
+                    let image = new Image();
+                    image.onload = t.step_func(function() {
+
+                        let canvas = document.createElement("canvas");
+                        canvas.width = 2;
+                        canvas.height = 2;
+
+                        let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+
+                        let imageBitmapPromise;
+                        if (cropSource)
+                            imageBitmapPromise = createImageBitmap(image, 1, 1, 1, 1);
+                        else
+                            imageBitmapPromise = createImageBitmap(image);
+
+                        imageBitmapPromise.then(t.step_func_done(function(imageBitmap) {
+                            ctx.drawImage(imageBitmap, 0, 0);
+
+                            let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+                            let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+                            assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+                        }));
+                    });
+                    image.src = `resources/${filename}`;
+                }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+            }
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html
new file mode 100644
index 0000000000..3e86bb5596
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-ImageBitmap-video.html
@@ -0,0 +1,57 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<body>
+<script>
+// Test that drawing ImageBitmaps with different video source color profiles
+// into sRGB and Display P3 canvases works, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+for (let [filenameBase, expectedPixels] of Object.entries(videoTests)) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            for (let cropSource of [false, true]) {
+                promise_test(async function(t) {
+
+                    let video = document.createElement("video");
+                    for (let format of ["mp4", "webm"]) {
+                        let source = document.createElement("source");
+                        source.src = `resources/${filenameBase}.${format}`;
+                        source.type = `video/${format}`;
+                        video.append(source);
+                    }
+
+                    let loadedData = new Promise(resolver => video.onloadeddata = resolver);
+
+                    document.body.append(video);
+                    await video.play();
+                    await loadedData;
+                    await new Promise(requestAnimationFrame);
+
+                    let imageBitmap;
+                    if (cropSource)
+                        imageBitmap = await createImageBitmap(video, 1, 1, 1, 1);
+                    else
+                        imageBitmap = await createImageBitmap(video);
+
+                    video.remove();
+
+                    let canvas = document.createElement("canvas");
+                    canvas.width = 2;
+                    canvas.height = 2;
+
+                    let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+
+                    ctx.drawImage(imageBitmap, 0, 0);
+
+                    let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+                    let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+                    assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+                }, `${filenameBase}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, cropSource=${cropSource}`);
+            }
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html
new file mode 100644
index 0000000000..1b04cde779
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage-video.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<body>
+<script>
+// Test that drawing videos with different color spaces into sRGB and Display P3
+// canvases works, by reading pixels with getImageData() as sRGB and Display P3
+// values.
+for (let [filenameBase, expectedPixels] of Object.entries(videoTests)) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            for (let scaleImage of [false, true]) {
+                promise_test(async function(t) {
+
+                    let video = document.createElement("video");
+                    for (let format of ["mp4", "webm"]) {
+                        let source = document.createElement("source");
+                        source.src = `resources/${filenameBase}.${format}`;
+                        source.type = `video/${format}`;
+                        video.append(source);
+                    }
+
+                    let loadedData = new Promise(resolver => video.onloadeddata = resolver);
+
+                    document.body.append(video);
+                    await video.play();
+                    await loadedData;
+                    await new Promise(requestAnimationFrame);
+
+                    let canvas = document.createElement("canvas");
+                    canvas.width = 2;
+                    canvas.height = 2;
+
+                    let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+                    if (scaleImage)
+                        ctx.drawImage(video, 0, 0, 10, 10);
+                    else
+                        ctx.drawImage(video, 0, 0);
+                    video.remove();
+
+                    let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+                    let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+                    assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+                }, `${filenameBase}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, scaleImage=${scaleImage}`);
+            }
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html
new file mode 100644
index 0000000000..35ee91343d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-drawImage.https.html
@@ -0,0 +1,41 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that drawing images with different bit depths and color profiles into
+// sRGB and Display P3 canvases works, by reading pixels with getImageData()
+// as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries({...imageTests, ...svgImageTests})) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            for (let scaleImage of [false, true]) {
+                async_test(function(t) {
+                    let image = new Image();
+                    image.onload = t.step_func_done(function() {
+
+                        let canvas = document.createElement("canvas");
+                        canvas.width = 2;
+                        canvas.height = 2;
+
+                        let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+                        if (scaleImage)
+                            ctx.drawImage(image, 0, 0, 10, 10);
+                        else
+                            ctx.drawImage(image, 0, 0);
+
+                        let imageData = ctx.getImageData(0, 0, 1, 1, { colorSpace: imageDataColorSpace });
+
+                        let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+                        assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+                        t.done();
+
+                    });
+                    image.src = `resources/${filename}`;
+                }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}, scaleImage=${scaleImage}`);
+            }
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html
new file mode 100644
index 0000000000..2b9fb9b8f4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-canvas.html
@@ -0,0 +1,44 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that patterns created from canvas sources with different color spaces
+// can be drawn into sRGB and Display P3 canvases, by reading pixels with
+// getImageData() as sRGB and Display P3 values.
+function runTest(sourceColorSpace, destinationColorSpace, colors) {
+    for (let [sourceColorString, expectedColor] of Object.entries(colors)) {
+        test(function() {
+            let source = document.createElement("canvas");
+            source.width = 2;
+            source.height = 2;
+
+            let sourceContext = source.getContext("2d", { colorSpace: sourceColorSpace });
+
+            let sourceColor = sourceColorString.split(",").map(x => +x);
+
+            let sourceImageData = new ImageData(2, 2, { colorSpace: sourceColorSpace });
+            for (let i = 0; i < 2 * 2 * 4; i += 4) {
+                for (let c = 0; c < 4; ++c)
+                    sourceImageData.data[i + c] = sourceColor[c];
+            }
+            sourceContext.putImageData(sourceImageData, 0, 0);
+
+            let destination = document.createElement("canvas");
+            destination.width = 4;
+            destination.height = 4;
+
+            let destinationContext = destination.getContext("2d", { colorSpace: destinationColorSpace });
+            destinationContext.fillStyle = destinationContext.createPattern(source, "repeat");
+            destinationContext.fillRect(0, 0, 4, 4);
+
+            let destinationImageData = destinationContext.getImageData(2, 2, 1, 1);
+
+            assert_true(pixelsApproximatelyEqual(destinationImageData.data, expectedColor), `Actual pixel value ${[...destinationImageData.data]} is approximately equal to ${expectedColor}.`);
+        }, `Source ${sourceColorSpace}, destination ${destinationColorSpace}, color ${sourceColorString}`);
+    }
+}
+
+runTest("srgb", "display-p3", fromSRGBToDisplayP3);
+runTest("display-p3", "srgb", fromDisplayP3ToSRGB);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html
new file mode 100644
index 0000000000..75a8392c02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-pattern-image.html
@@ -0,0 +1,37 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="canvas-display-p3.js"></script>
+<script>
+// Test that patterns created from images with different bit depths and color
+// profiles into can be drawn into sRGB and Display P3 canvases, by reading
+// pixels with getImageData() as sRGB and Display P3 values.
+for (let [filename, expectedPixels] of Object.entries(imageTests)) {
+    for (let contextColorSpace of ["srgb", "display-p3"]) {
+        for (let imageDataColorSpace of ["srgb", "display-p3"]) {
+            async_test(function(t) {
+                let image = new Image();
+                image.onload = t.step_func_done(function() {
+
+                    let canvas = document.createElement("canvas");
+                    canvas.width = 4;
+                    canvas.height = 4;
+
+                    let ctx = canvas.getContext("2d", { colorSpace: contextColorSpace });
+                    ctx.fillStyle = ctx.createPattern(image, "repeat");
+                    ctx.fillRect(0, 0, 4, 4);
+
+                    let imageData = ctx.getImageData(2, 2, 1, 1, { colorSpace: imageDataColorSpace });
+
+                    let expected = expectedPixels[`${contextColorSpace} ${imageDataColorSpace}`];
+                    assert_true(pixelsApproximatelyEqual(imageData.data, expected), `Actual pixel value ${[...imageData.data]} is approximately equal to ${expected}.`);
+
+                    t.done();
+
+                });
+                image.src = `resources/${filename}`;
+            }, `${filename}, Context ${contextColorSpace}, ImageData ${imageDataColorSpace}`);
+        }
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html
new file mode 100644
index 0000000000..2b1447437d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3-settings.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+// Test that creating canvas contexts and ImageData objects respect the
+// requested color space.
+
+for (let contextColorSpace of [undefined, "srgb", "display-p3"]) {
+    for (let imageDataColorSpace of [undefined, "srgb", "display-p3"]) {
+        test(function() {
+            let contextSettings = { };
+            if (contextColorSpace)
+                contextSettings.colorSpace = contextColorSpace;
+            let resolvedContextColorSpace = contextColorSpace || "srgb";
+
+            let canvas = document.createElement("canvas");
+            let ctx = canvas.getContext("2d", contextSettings);
+            assert_equals(ctx.getContextAttributes().colorSpace, resolvedContextColorSpace, `CanvasRenderingContext2DSettings.colorSpace when set to ${contextColorSpace}`);
+
+            let imageDataSettings = { };
+            if (imageDataColorSpace)
+                imageDataSettings.colorSpace = imageDataColorSpace;
+            let resolvedImageDataColorSpace = imageDataColorSpace || resolvedContextColorSpace;
+
+            let imageData = ctx.getImageData(0, 0, 1, 1, imageDataSettings);
+            assert_equals(imageData.colorSpace, resolvedImageDataColorSpace, `getImageData() colorSpace when set to ${imageDataColorSpace}`);
+
+            imageData = ctx.createImageData(1, 1, imageDataSettings);
+            assert_equals(imageData.colorSpace, resolvedImageDataColorSpace, `createImageData() colorSpace when set to ${imageDataColorSpace}`);
+
+            imageData = ctx.createImageData(imageData);
+            assert_equals(imageData.colorSpace, resolvedImageDataColorSpace, `Cloned ImageData colorSpace when set to ${imageDataColorSpace}`);
+        }, `Context ${contextColorSpace}, ImageData ${imageDataColorSpace}`);
+    }
+}
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js
new file mode 100644
index 0000000000..c6ee97b788
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/canvas-display-p3.js
@@ -0,0 +1,283 @@
+// Each PNG:
+//  * is 2x2 and has a single color
+//  * has a filename that indicates its contents:
+//      <embedded-profile>-<8-or-16-bit-color-value>.png
+//  * was generated using ImageMagick commands like:
+//      convert -size 2x2 xc:'#BB0000FF' -profile Display-P3.icc Display-P3-BB0000FF.png
+//      convert -size 2x2 xc:'#BBBC00000000FFFF' -profile Adobe-RGB.icc Adobe-RGB-BBBC00000000FFFF.png
+
+// Top level key is the image filename. Second level key is the pair of
+// CanvasRenderingContext2DSettings.colorSpace and ImageDataSettings.colorSpace.
+const imageTests = {
+    // 8 bit source images
+
+    "sRGB-FF0000FF.png": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [234, 51, 35, 255],
+    },
+    "sRGB-FF0000CC.png": {
+        "srgb srgb": [255, 0, 0, 204],
+        "srgb display-p3": [234, 51, 35, 204],
+        "display-p3 srgb": [255, 0, 0, 204],
+        "display-p3 display-p3": [234, 51, 35, 204],
+    },
+    "sRGB-BB0000FF.png": {
+        "srgb srgb": [187, 0, 0, 255],
+        "srgb display-p3": [171, 35, 23, 255],
+        "display-p3 srgb": [187, 1, 0, 255],
+        "display-p3 display-p3": [171, 35, 23, 255],
+    },
+    "sRGB-BB0000CC.png": {
+        "srgb srgb": [187, 0, 0, 204],
+        "srgb display-p3": [171, 35, 23, 204],
+        "display-p3 srgb": [187, 1, 0, 204],
+        "display-p3 display-p3": [171, 35, 23, 204],
+    },
+
+    "Display-P3-FF0000FF.png": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [255, 0, 0, 255],
+    },
+    "Display-P3-FF0000CC.png": {
+        "srgb srgb": [255, 0, 0, 204],
+        "srgb display-p3": [234, 51, 35, 204],
+        "display-p3 srgb": [255, 0, 0, 204],
+        "display-p3 display-p3": [255, 0, 0, 204],
+    },
+    "Display-P3-BB0000FF.png": {
+        "srgb srgb": [205, 0, 0, 255],
+        "srgb display-p3": [188, 39, 26, 255],
+        "display-p3 srgb": [205, 0, 0, 255],
+        "display-p3 display-p3": [187, 0, 0, 255],
+    },
+    "Display-P3-BB0000CC.png": {
+        "srgb srgb": [205, 0, 0, 204],
+        "srgb display-p3": [188, 39, 26, 204],
+        "display-p3 srgb": [205, 0, 0, 204],
+        "display-p3 display-p3": [187, 0, 0, 204],
+    },
+
+    "Adobe-RGB-FF0000FF.png": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 19, 11, 255],
+        "display-p3 display-p3": [255, 61, 43, 255],
+    },
+    "Adobe-RGB-FF0000CC.png": {
+        "srgb srgb": [255, 0, 0, 204],
+        "srgb display-p3": [234, 51, 35, 204],
+        "display-p3 srgb": [255, 19, 11, 204],
+        "display-p3 display-p3": [255, 61, 43, 204],
+    },
+    "Adobe-RGB-BB0000FF.png": {
+        "srgb srgb": [219, 0, 0, 255],
+        "srgb display-p3": [201, 42, 29, 255],
+        "display-p3 srgb": [219, 0, 1, 255],
+        "display-p3 display-p3": [201, 42, 29, 255],
+    },
+    "Adobe-RGB-BB0000CC.png": {
+        "srgb srgb": [219, 0, 0, 204],
+        "srgb display-p3": [201, 42, 29, 204],
+        "display-p3 srgb": [219, 0, 1, 204],
+        "display-p3 display-p3": [201, 42, 29, 204],
+    },
+
+    "Generic-CMYK-FF000000.jpg": {
+        "srgb srgb": [0, 163, 218, 255],
+        "srgb display-p3": [72, 161, 213, 255],
+        "display-p3 srgb": [0, 163, 218, 255],
+        "display-p3 display-p3": [0, 160, 213, 255],
+    },
+    "Generic-CMYK-BE000000.jpg": {
+        "srgb srgb": [0, 180, 223, 255],
+        "srgb display-p3": [80, 177, 219, 255],
+        "display-p3 srgb": [0, 180, 223, 255],
+        "display-p3 display-p3": [65, 177, 219, 255],
+    },
+
+    // 16 bit source images
+
+    "sRGB-FFFF00000000FFFF.png": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [234, 51, 35, 255],
+    },
+    "sRGB-FFFF00000000CCCC.png": {
+        "srgb srgb": [255, 0, 0, 204],
+        "srgb display-p3": [234, 51, 35, 204],
+        "display-p3 srgb": [255, 0, 0, 204],
+        "display-p3 display-p3": [234, 51, 35, 204],
+    },
+    "sRGB-BBBC00000000FFFF.png": {
+        "srgb srgb": [187, 0, 0, 255],
+        "srgb display-p3": [171, 35, 23, 255],
+        "display-p3 srgb": [187, 1, 0, 255],
+        "display-p3 display-p3": [171, 35, 23, 255],
+    },
+    "sRGB-BBBC00000000CCCC.png": {
+        "srgb srgb": [187, 0, 0, 204],
+        "srgb display-p3": [171, 35, 23, 204],
+        "display-p3 srgb": [187, 1, 0, 204],
+        "display-p3 display-p3": [171, 35, 23, 204],
+    },
+
+    "Display-P3-FFFF00000000FFFF.png": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [255, 0, 0, 255],
+    },
+    "Display-P3-FFFF00000000CCCC.png": {
+        "srgb srgb": [255, 0, 0, 204],
+        "srgb display-p3": [234, 51, 35, 204],
+        "display-p3 srgb": [255, 0, 0, 204],
+        "display-p3 display-p3": [255, 0, 0, 204],
+    },
+    "Display-P3-BBBC00000000FFFF.png": {
+        "srgb srgb": [205, 0, 0, 255],
+        "srgb display-p3": [188, 39, 26, 255],
+        "display-p3 srgb": [205, 0, 0, 255],
+        "display-p3 display-p3": [187, 0, 0, 255],
+    },
+    "Display-P3-BBBC00000000CCCC.png": {
+        "srgb srgb": [205, 0, 0, 204],
+        "srgb display-p3": [188, 39, 26, 204],
+        "display-p3 srgb": [205, 0, 0, 204],
+        "display-p3 display-p3": [187, 0, 0, 204],
+    },
+
+    "Adobe-RGB-FFFF00000000FFFF.png": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 19, 11, 255],
+        "display-p3 display-p3": [255, 61, 43, 255],
+    },
+    "Adobe-RGB-FFFF00000000CCCC.png": {
+        "srgb srgb": [255, 0, 0, 204],
+        "srgb display-p3": [234, 51, 35, 204],
+        "display-p3 srgb": [255, 19, 11, 204],
+        "display-p3 display-p3": [255, 61, 43, 204],
+    },
+    "Adobe-RGB-BBBC00000000FFFF.png": {
+        "srgb srgb": [219, 0, 0, 255],
+        "srgb display-p3": [201, 42, 29, 255],
+        "display-p3 srgb": [219, 0, 1, 255],
+        "display-p3 display-p3": [201, 42, 29, 255],
+    },
+    "Adobe-RGB-BBBC00000000CCCC.png": {
+        "srgb srgb": [219, 0, 0, 204],
+        "srgb display-p3": [201, 42, 29, 204],
+        "display-p3 srgb": [219, 0, 1, 204],
+        "display-p3 display-p3": [201, 42, 29, 204],
+    },
+};
+
+const svgImageTests = {
+    // SVG source images
+
+    "sRGB-FF0000.svg": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [234, 51, 35, 255],
+    },
+    "sRGB-BB0000.svg": {
+        "srgb srgb": [187, 0, 0, 255],
+        "srgb display-p3": [171, 35, 23, 255],
+        "display-p3 srgb": [187, 1, 0, 255],
+        "display-p3 display-p3": [171, 35, 23, 255],
+    },
+
+    "Display-P3-1-0-0.svg": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [255, 0, 0, 255],
+    },
+    "Display-P3-0.7333-0-0.svg": {
+        "srgb srgb": [205, 0, 0, 255],
+        "srgb display-p3": [188, 39, 26, 255],
+        "display-p3 srgb": [205, 0, 0, 255],
+        "display-p3 display-p3": [187, 0, 0, 255],
+    },
+};
+
+// Each video:
+//  * is 300x200 and has a single color
+//  * has a filename base that indicates its contents:
+//
+//      <color-space>-<8-or-10-bit-color-value>
+//
+//  * was generated using commands like:
+//
+//      W=300 H=200 Y=3F Cb=66 Cr=F0 ; \
+//        perl -e "print pack('c', 0x$Y) x ($W * $H), pack('c', 0x$Cb) x ($W * $H / 4), pack('c', 0x$Cr) x ($W * $H / 4)" | \
+//        ffmpeg -f rawvideo -pix_fmt yuv420p -s:v ${W}x$H -r 25 -i - -pix_fmt yuv420p -colorspace bt709 -color_primaries bt709 -color_trc iec61966_2_1 sRGB-FF0100.webm
+//
+//      W=300 H=200 Y=0BB Cb=1BD Cr=2EF ; \
+//        perl -e "print pack('s', 0x$Y) x ($W * $H), pack('s', 0x$Cb) x ($W * $H / 4), pack('s', 0x$Cr) x ($W * $H / 4)" | \
+//        ffmpeg -f rawvideo -pix_fmt yuv420p10le -s:v ${W}x$H -r 25 -i - -c:v libx265 -vtag hvc1 -pix_fmt yuv420p10le -colorspace bt2020nc -color_primaries bt2020 -color_trc bt2020-10 Rec2020-222000000.mp4
+//
+//      W=300 H=200 Y=0BB Cb=1BD Cr=2EF ; \
+//        perl -e "print pack('s', 0x$Y) x ($W * $H), pack('s', 0x$Cb) x ($W * $H / 4), pack('s', 0x$Cr) x ($W * $H / 4)" | \
+//        ffmpeg -f rawvideo -pix_fmt yuv420p10le -s:v ${W}x$H -r 25 -i - -vcodec libvpx-vp9 -profile:v 2 -pix_fmt yuv420p10le -colorspace bt2020nc -color_primaries bt2020 -color_trc bt2020-10 Rec2020-222000000.webm
+//
+//    where the Y'CbCr values were computed using https://jdashg.github.io/misc/colors/from-coeffs.html.
+const videoTests = {
+    // Rec.709 Y'CbCr (0x3F, 0x66, 0xF0) = sRGB (0xFF, 0x01, 0x00)
+    "sRGB-FF0100": {
+        "srgb srgb": [255, 1, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [234, 51, 35, 255],
+    },
+    // Rec.709 Y'CbCr (0x32, 0x6D, 0xD2) = sRGB (0xBB, 0x00, 0x00)
+    "sRGB-BB0000": {
+        "srgb srgb": [187, 0, 0, 255],
+        "srgb display-p3": [171, 35, 23, 255],
+        "display-p3 srgb": [187, 1, 0, 255],
+        "display-p3 display-p3": [171, 35, 23, 255],
+    },
+
+    // 10 bit Rec.2020 Y'CbCr (0x126, 0x183, 0x3C0) = Rec.2020 (0x3FF, 0x000, 0x000)
+    "Rec2020-3FF000000": {
+        "srgb srgb": [255, 0, 0, 255],
+        "srgb display-p3": [234, 51, 35, 255],
+        "display-p3 srgb": [255, 0, 0, 255],
+        "display-p3 display-p3": [255, 0, 9, 255],
+    },
+    // 10 bit Rec.2020 Y'CbCr (0x0BB, 0x1BD, 0x2EF) = Rec.2020 (0x222, 0x000, 0x000)
+    "Rec2020-222000000": {
+        "srgb srgb": [186, 0, 0, 255],
+        "srgb display-p3": [170, 34, 23, 255],
+        "display-p3 srgb": [186, 0, 0, 255],
+        "display-p3 display-p3": [169, 0, 3, 255],
+    },
+};
+
+const fromSRGBToDisplayP3 = {
+    "255,0,0,255": [234, 51, 35, 255],
+    "255,0,0,204": [234, 51, 35, 204],
+    "187,0,0,255": [171, 35, 23, 255],
+    "187,0,0,204": [171, 35, 23, 204],
+};
+
+const fromDisplayP3ToSRGB = {
+    "255,0,0,255": [255, 0, 0, 255],
+    "255,0,0,204": [255, 0, 0, 204],
+    "187,0,0,255": [205, 0, 0, 255],
+    "187,0,0,204": [205, 0, 0, 204],
+};
+
+function pixelsApproximatelyEqual(p1, p2) {
+    for (let i = 0; i < 4; ++i) {
+        if (Math.abs(p1[i] - p2[i]) > 3)
+            return false;
+    }
+    return true;
+}
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html
new file mode 100644
index 0000000000..b21eaf72ab
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/imagedata-no-color-settings-crash.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+test(function() {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d',
+        {})
+    var dataFloat32 = new Float32Array(4);
+    var imageData = ctx.createImageData(dataFloat32, 1, 1,
+        {});
+    ctx.putImageData(imageData, 5, 5);
+    var data = ctx.getImageData(5,5,1,1).data;
+}, "Putting a float-32 ImageData with no color settings on a context 2D should not crash.");
+
+test(function() {
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d',
+        {})
+    var dataUint16 = new Uint16Array(4);
+    var imageData = ctx.createImageData(dataUint16, 1, 1,
+        {});
+    ctx.putImageData(imageData, 5, 5);
+    var data = ctx.getImageData(5,5,1,1).data;
+}, "Putting a uint-16 ImageData with no color settings on a context 2D should not crash.");
+</script>
\ No newline at end of file
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.png
new file mode 100644
index 0000000000..9b3db7e22e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000CC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.png
new file mode 100644
index 0000000000..78237d5a9d
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BB0000FF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.png
new file mode 100644
index 0000000000..3fbe7cadc0
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000CCCC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.png
new file mode 100644
index 0000000000..ab9b1bf5b7
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-BBBC00000000FFFF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.png
new file mode 100644
index 0000000000..a83344933d
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000CC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.png
new file mode 100644
index 0000000000..3222c5e26f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FF0000FF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.png
new file mode 100644
index 0000000000..60f1239943
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000CCCC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.png
new file mode 100644
index 0000000000..c558eb10b3
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Adobe-RGB-FFFF00000000FFFF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg
new file mode 100644
index 0000000000..2737814877
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-0.7333-0-0.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+  <rect width="2" height="2" style="fill: color(display-p3 0.7333 0 0);"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg
new file mode 100644
index 0000000000..5c1b07362a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-1-0-0.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+  <rect width="2" height="2" style="fill: color(display-p3 1 0 0);"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.png
new file mode 100644
index 0000000000..2036aeae25
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000CC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.png
new file mode 100644
index 0000000000..35347a3055
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BB0000FF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.png
new file mode 100644
index 0000000000..87f11b5d97
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000CCCC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.png
new file mode 100644
index 0000000000..ea2f84caa1
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-BBBC00000000FFFF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.png
new file mode 100644
index 0000000000..8a0abc74dd
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000CC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.png
new file mode 100644
index 0000000000..7b6d4a6150
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FF0000FF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.png
new file mode 100644
index 0000000000..8a0abc74dd
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000CCCC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.png
new file mode 100644
index 0000000000..7b6d4a6150
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Display-P3-FFFF00000000FFFF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpg
new file mode 100644
index 0000000000..21eecaa25e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-BE000000.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpg
new file mode 100644
index 0000000000..32f3b691e2
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Generic-CMYK-FF000000.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4
new file mode 100644
index 0000000000..71ad32c5f0
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.mp4 differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webm
new file mode 100644
index 0000000000..5e4eae49dc
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-222000000.webm differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4
new file mode 100644
index 0000000000..0e2880a93a
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.mp4 differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webm
new file mode 100644
index 0000000000..4f28de8cea
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/Rec2020-3FF000000.webm differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png
new file mode 100644
index 0000000000..5eb3f6a15f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-p3d65.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png
new file mode 100644
index 0000000000..b64db07379
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-rec2020.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png
new file mode 100644
index 0000000000..bfbba8b8e2
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-semitransparent-srgb.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avif b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avif
new file mode 100644
index 0000000000..c3890c5cf6
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.avif differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp
new file mode 100644
index 0000000000..9c9561c704
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.bmp differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.ico b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.ico
new file mode 100644
index 0000000000..87e8ff45de
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.ico differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.png
new file mode 100644
index 0000000000..bfbba8b8e2
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webp
new file mode 100644
index 0000000000..925646067a
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb-transparent.webp differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avif b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avif
new file mode 100644
index 0000000000..c13b320ea8
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.avif differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmp
new file mode 100644
index 0000000000..465d203d98
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.bmp differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gif b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gif
new file mode 100644
index 0000000000..25bcefb2bf
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.gif differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.ico b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.ico
new file mode 100644
index 0000000000..e5375826ab
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.ico differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpg
new file mode 100644
index 0000000000..c4579e8f06
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.jpg differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.png
new file mode 100644
index 0000000000..1b5876b5f3
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg
new file mode 100644
index 0000000000..0517130849
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <rect x="0" y="0" width="10px" height="10px" fill="#9b1b1b"/>
+    <rect x="10" y="0" width="10px" height="10px" fill="#1b9b1b"/>
+    <rect x="0" y="10" width="10px" height="10px" fill="#1b1b9b"/>
+    <rect x="10" y="10" width="10px" height="10px" fill="#1b1b1b"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webp b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webp
new file mode 100644
index 0000000000..b7c0a421dc
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/pattern-srgb.webp differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png
new file mode 100644
index 0000000000..c4496db19b
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png
new file mode 100644
index 0000000000..3b4cfda52c
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_AdobeRGB_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png
new file mode 100644
index 0000000000..e7a142cd2e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png
new file mode 100644
index 0000000000..0b035317c8
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_DisplayP3_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png
new file mode 100644
index 0000000000..a1dc7ddb0d
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png
new file mode 100644
index 0000000000..be2eb1208e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_ProPhoto_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png
new file mode 100644
index 0000000000..e2a2d14451
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png
new file mode 100644
index 0000000000..960d7d8e75
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_Rec2020_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png
new file mode 100644
index 0000000000..80cf9785eb
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png
new file mode 100644
index 0000000000..3ec565f8c2
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_AdobeRGB_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png
new file mode 100644
index 0000000000..5f3134b79c
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png
new file mode 100644
index 0000000000..500a70eff8
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_DisplayP3_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png
new file mode 100644
index 0000000000..b5d0e07a7a
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png
new file mode 100644
index 0000000000..e4ec3e4454
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_ProPhoto_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png
new file mode 100644
index 0000000000..c487d5846f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png
new file mode 100644
index 0000000000..78fe202c0e
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_Rec2020_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png
new file mode 100644
index 0000000000..babf232a36
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png
new file mode 100644
index 0000000000..3016404009
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_interlaced_sRGB_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png
new file mode 100644
index 0000000000..8a665345e9
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png
new file mode 100644
index 0000000000..e51cda77c4
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_16bit_sRGB_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png
new file mode 100644
index 0000000000..8b787b5c87
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png
new file mode 100644
index 0000000000..727028e765
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_AdobeRGB_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png
new file mode 100644
index 0000000000..fe8bdd4963
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png
new file mode 100644
index 0000000000..b836afebed
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_DisplayP3_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png
new file mode 100644
index 0000000000..5ecd868606
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png
new file mode 100644
index 0000000000..85a349dc1d
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_ProPhoto_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png
new file mode 100644
index 0000000000..599cd34040
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png
new file mode 100644
index 0000000000..ecf65c3d46
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_Rec2020_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png
new file mode 100644
index 0000000000..9cab6d12e6
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_opaque.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png
new file mode 100644
index 0000000000..5fa01e62c2
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/png-16bit/2x2_8bit_sRGB_transparent.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4
new file mode 100644
index 0000000000..59572f5138
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.mp4 differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg
new file mode 100644
index 0000000000..2b785f8cf4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+  <rect width="2" height="2" style="fill: #BB0000;"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webm
new file mode 100644
index 0000000000..23a6364bdb
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000.webm differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.png
new file mode 100644
index 0000000000..fe463486ef
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000CC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.png
new file mode 100644
index 0000000000..be7009f613
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BB0000FF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.png
new file mode 100644
index 0000000000..5220ccb7a9
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000CCCC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.png
new file mode 100644
index 0000000000..416ef12986
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-BBBC00000000FFFF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg
new file mode 100644
index 0000000000..8798fdfc3a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="2">
+  <rect width="2" height="2" style="fill: #FF0000;"/>
+</svg>
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.png
new file mode 100644
index 0000000000..e86f64b71b
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000CC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.png
new file mode 100644
index 0000000000..22f33b14da
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0000FF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4 b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4
new file mode 100644
index 0000000000..37a29f9f83
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.mp4 differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webm b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webm
new file mode 100644
index 0000000000..31b69af924
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FF0100.webm differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.png
new file mode 100644
index 0000000000..e86f64b71b
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000CCCC.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.png b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.png
new file mode 100644
index 0000000000..22f33b14da
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/manual/wide-gamut-canvas/resources/sRGB-FFFF00000000FFFF.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.1.html
new file mode 100644
index 0000000000..85ebff4c0a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.angle.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.path.arc.angle.1</h1>
+<p class="desc">arc() draws pi/2 .. -pi anticlockwise correctly</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("arc() draws pi/2 .. -pi anticlockwise correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 0);
+  ctx.arc(100, 0, 150, Math.PI/2, -Math.PI, true);
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.2.html
new file mode 100644
index 0000000000..7eefabd993
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.angle.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.path.arc.angle.2</h1>
+<p class="desc">arc() draws -3pi/2 .. -pi anticlockwise correctly</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("arc() draws -3pi/2 .. -pi anticlockwise correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 0);
+  ctx.arc(100, 0, 150, -3*Math.PI/2, -Math.PI, true);
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.3.html
new file mode 100644
index 0000000000..899c50dc90
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.angle.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.path.arc.angle.3</h1>
+<p class="desc">arc() wraps angles mod 2pi when anticlockwise and end > start+2pi</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("arc() wraps angles mod 2pi when anticlockwise and end > start+2pi");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 0);
+  ctx.arc(100, 0, 150, (512+1/2)*Math.PI, (1024-1)*Math.PI, true);
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.4.html
new file mode 100644
index 0000000000..3f1bd84d69
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.4.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.path.arc.angle.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.path.arc.angle.4</h1>
+<p class="desc">arc() draws a full circle when clockwise and end > start+2pi</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("arc() draws a full circle when clockwise and end > start+2pi");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.arc(50, 25, 60, (512+1/2)*Math.PI, (1024-1)*Math.PI, false);
+  ctx.fill();
+  _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/path-objects/2d.path.arc.angle.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.5.html
new file mode 100644
index 0000000000..2373bd4f0a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.5.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.angle.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.path.arc.angle.5</h1>
+<p class="desc">arc() wraps angles mod 2pi when clockwise and start > end+2pi</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("arc() wraps angles mod 2pi when clockwise and start > end+2pi");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 0);
+  ctx.arc(100, 0, 150, (1024-1)*Math.PI, (512+1/2)*Math.PI, false);
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.6.html
new file mode 100644
index 0000000000..b0b03cff79
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.angle.6.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.path.arc.angle.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.path.arc.angle.6</h1>
+<p class="desc">arc() draws a full circle when anticlockwise and start > end+2pi</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("arc() draws a full circle when anticlockwise and start > end+2pi");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.arc(50, 25, 60, (1024-1)*Math.PI, (512+1/2)*Math.PI, true);
+  ctx.fill();
+  _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/path-objects/2d.path.arc.default.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.default.html
new file mode 100644
index 0000000000..b52941fe3f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.default.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.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.path.arc.default</h1>
+<p class="desc">arc() with missing last argument defaults to clockwise</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("arc() with missing last argument defaults to clockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 0);
+  ctx.arc(100, 0, 150, -Math.PI, Math.PI/2);
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.empty.html
new file mode 100644
index 0000000000..295ee4bbb2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.empty.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.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.path.arc.empty</h1>
+<p class="desc">arc() with an empty path does not draw a straight line to the start point</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("arc() with an empty path does not draw a straight line to the start point");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.end.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.end.html
new file mode 100644
index 0000000000..a581a40e8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.end.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.path.arc.end</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.path.arc.end</h1>
+<p class="desc">arc() adds the end point of the arc to the subpath</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("arc() adds the end point of the arc to the subpath");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(-100, 0);
+  ctx.arc(-100, 0, 25, -Math.PI/2, Math.PI/2, true);
+  ctx.lineTo(100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.negative.html
new file mode 100644
index 0000000000..fd81ebadcd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.negative.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.path.arc.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.path.arc.negative</h1>
+<p class="desc">arc() with negative radius throws INDEX_SIZE_ERR</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("arc() with negative radius throws INDEX_SIZE_ERR");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.arc(0, 0, -1, 0, 0, true); });
+  var path = new Path2D();
+  assert_throws_dom("INDEX_SIZE_ERR", function() { path.arc(10, 10, -5, 0, 1, false); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonempty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonempty.html
new file mode 100644
index 0000000000..982829013d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonempty.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.path.arc.nonempty</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.path.arc.nonempty</h1>
+<p class="desc">arc() with a non-empty path does draw a straight line to the start point</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("arc() with a non-empty path does draw a straight line to the start point");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arc(200, 25, 5, 0, 2*Math.PI, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonfinite.html
new file mode 100644
index 0000000000..a1b15e7a88
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.nonfinite.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.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.path.arc.nonfinite</h1>
+<p class="desc">arc() with Infinity/NaN is ignored</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("arc() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.arc(Infinity, 0, 50, 0, 2*Math.PI, true);
+  ctx.arc(-Infinity, 0, 50, 0, 2*Math.PI, true);
+  ctx.arc(NaN, 0, 50, 0, 2*Math.PI, true);
+  ctx.arc(0, Infinity, 50, 0, 2*Math.PI, true);
+  ctx.arc(0, -Infinity, 50, 0, 2*Math.PI, true);
+  ctx.arc(0, NaN, 50, 0, 2*Math.PI, true);
+  ctx.arc(0, 0, Infinity, 0, 2*Math.PI, true);
+  ctx.arc(0, 0, -Infinity, 0, 2*Math.PI, true);
+  ctx.arc(0, 0, NaN, 0, 2*Math.PI, true);
+  ctx.arc(0, 0, 50, Infinity, 2*Math.PI, true);
+  ctx.arc(0, 0, 50, -Infinity, 2*Math.PI, true);
+  ctx.arc(0, 0, 50, NaN, 2*Math.PI, true);
+  ctx.arc(0, 0, 50, 0, Infinity, true);
+  ctx.arc(0, 0, 50, 0, -Infinity, true);
+  ctx.arc(0, 0, 50, 0, NaN, true);
+  ctx.arc(Infinity, Infinity, 50, 0, 2*Math.PI, true);
+  ctx.arc(Infinity, Infinity, Infinity, 0, 2*Math.PI, true);
+  ctx.arc(Infinity, Infinity, Infinity, Infinity, 2*Math.PI, true);
+  ctx.arc(Infinity, Infinity, Infinity, Infinity, Infinity, true);
+  ctx.arc(Infinity, Infinity, Infinity, 0, Infinity, true);
+  ctx.arc(Infinity, Infinity, 50, Infinity, 2*Math.PI, true);
+  ctx.arc(Infinity, Infinity, 50, Infinity, Infinity, true);
+  ctx.arc(Infinity, Infinity, 50, 0, Infinity, true);
+  ctx.arc(Infinity, 0, Infinity, 0, 2*Math.PI, true);
+  ctx.arc(Infinity, 0, Infinity, Infinity, 2*Math.PI, true);
+  ctx.arc(Infinity, 0, Infinity, Infinity, Infinity, true);
+  ctx.arc(Infinity, 0, Infinity, 0, Infinity, true);
+  ctx.arc(Infinity, 0, 50, Infinity, 2*Math.PI, true);
+  ctx.arc(Infinity, 0, 50, Infinity, Infinity, true);
+  ctx.arc(Infinity, 0, 50, 0, Infinity, true);
+  ctx.arc(0, Infinity, Infinity, 0, 2*Math.PI, true);
+  ctx.arc(0, Infinity, Infinity, Infinity, 2*Math.PI, true);
+  ctx.arc(0, Infinity, Infinity, Infinity, Infinity, true);
+  ctx.arc(0, Infinity, Infinity, 0, Infinity, true);
+  ctx.arc(0, Infinity, 50, Infinity, 2*Math.PI, true);
+  ctx.arc(0, Infinity, 50, Infinity, Infinity, true);
+  ctx.arc(0, Infinity, 50, 0, Infinity, true);
+  ctx.arc(0, 0, Infinity, Infinity, 2*Math.PI, true);
+  ctx.arc(0, 0, Infinity, Infinity, Infinity, true);
+  ctx.arc(0, 0, Infinity, 0, Infinity, true);
+  ctx.arc(0, 0, 50, Infinity, Infinity, true);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.1.html
new file mode 100644
index 0000000000..951c9ae26c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.1.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.path.arc.scale.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.path.arc.scale.1</h1>
+<p class="desc">Non-uniformly scaled arcs are the right shape</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("Non-uniformly scaled arcs are the right shape");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.scale(2, 0.5);
+  ctx.fillStyle = '#0f0';
+  ctx.beginPath();
+  ctx.arc(25, 50, 56, 0, 2*Math.PI, false);
+  ctx.fill();
+  ctx.fillStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(-25, 50);
+  ctx.arc(-25, 50, 24, 0, 2*Math.PI, false);
+  ctx.moveTo(75, 50);
+  ctx.arc(75, 50, 24, 0, 2*Math.PI, false);
+  ctx.moveTo(25, -25);
+  ctx.arc(25, -25, 24, 0, 2*Math.PI, false);
+  ctx.moveTo(25, 125);
+  ctx.arc(25, 125, 24, 0, 2*Math.PI, false);
+  ctx.fill();
+
+  _assertPixel(canvas, 0,0, 0,255,0,255);
+  _assertPixel(canvas, 50,0, 0,255,0,255);
+  _assertPixel(canvas, 99,0, 0,255,0,255);
+  _assertPixel(canvas, 0,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 99,25, 0,255,0,255);
+  _assertPixel(canvas, 0,49, 0,255,0,255);
+  _assertPixel(canvas, 50,49, 0,255,0,255);
+  _assertPixel(canvas, 99,49, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.2.html
new file mode 100644
index 0000000000..6b39e16222
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.scale.2.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.path.arc.scale.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.path.arc.scale.2</h1>
+<p class="desc">Highly scaled arcs are the right shape</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("Highly scaled arcs are the right shape");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.scale(100, 100);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 1.2;
+  ctx.beginPath();
+  ctx.arc(0, 0, 0.6, 0, Math.PI/2, false);
+  ctx.stroke();
+
+  _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/path-objects/2d.path.arc.selfintersect.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.1.html
new file mode 100644
index 0000000000..3bc81bd77a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.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.path.arc.selfintersect.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.path.arc.selfintersect.1</h1>
+<p class="desc">arc() with lineWidth > 2*radius is drawn sensibly</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("arc() with lineWidth > 2*radius is drawn sensibly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 200;
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.arc(100, 50, 25, 0, -Math.PI/2, true);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(0, 0, 25, 0, -Math.PI/2, true);
+  ctx.stroke();
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.2.html
new file mode 100644
index 0000000000..e3b14a782f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.selfintersect.2.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.path.arc.selfintersect.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.path.arc.selfintersect.2</h1>
+<p class="desc">arc() with lineWidth > 2*radius is drawn sensibly</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("arc() with lineWidth > 2*radius is drawn sensibly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 180;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.arc(-50, 50, 25, 0, -Math.PI/2, true);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.arc(100, 0, 25, 0, -Math.PI/2, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,10, 0,255,0,255);
+  _assertPixel(canvas, 97,1, 0,255,0,255);
+  _assertPixel(canvas, 97,2, 0,255,0,255);
+  _assertPixel(canvas, 97,3, 0,255,0,255);
+  _assertPixel(canvas, 2,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.1.html
new file mode 100644
index 0000000000..8a456841ad
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.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.path.arc.shape.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.path.arc.shape.1</h1>
+<p class="desc">arc() from 0 to pi does not draw anything in the wrong half</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("arc() from 0 to pi does not draw anything in the wrong half");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.arc(50, 50, 50, 0, Math.PI, false);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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, 20,48, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.2.html
new file mode 100644
index 0000000000..f820eed761
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.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.path.arc.shape.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.path.arc.shape.2</h1>
+<p class="desc">arc() from 0 to pi draws stuff in the right half</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("arc() from 0 to pi draws stuff in the right half");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 100;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.arc(50, 50, 50, 0, Math.PI, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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, 20,48, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.3.html
new file mode 100644
index 0000000000..aa08d44194
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.3.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.path.arc.shape.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.path.arc.shape.3</h1>
+<p class="desc">arc() from 0 to -pi/2 does not draw anything in the wrong quadrant</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("arc() from 0 to -pi/2 does not draw anything in the wrong quadrant");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 100;
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.arc(0, 50, 50, 0, -Math.PI/2, false);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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/path-objects/2d.path.arc.shape.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.4.html
new file mode 100644
index 0000000000..b00d4468f2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.4.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.path.arc.shape.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.path.arc.shape.4</h1>
+<p class="desc">arc() from 0 to -pi/2 draws stuff in the right quadrant</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("arc() from 0 to -pi/2 draws stuff in the right quadrant");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 150;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.arc(-50, 50, 100, 0, -Math.PI/2, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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/path-objects/2d.path.arc.shape.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.5.html
new file mode 100644
index 0000000000..f5574d2773
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.shape.5.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.path.arc.shape.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.path.arc.shape.5</h1>
+<p class="desc">arc() from 0 to 5pi does not draw crazy things</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("arc() from 0 to 5pi does not draw crazy things");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 200;
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.arc(300, 0, 100, 0, 5*Math.PI, false);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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/path-objects/2d.path.arc.twopie.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.1.html
new file mode 100644
index 0000000000..6312efb3e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.twopie.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.path.arc.twopie.1</h1>
+<p class="desc">arc() draws nothing when end = start + 2pi-e and anticlockwise</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("arc() draws nothing when end = start + 2pi-e and anticlockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,20, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.2.html
new file mode 100644
index 0000000000..132c2d38dd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.twopie.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.path.arc.twopie.2</h1>
+<p class="desc">arc() draws a full circle when end = start + 2pi-e and clockwise</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("arc() draws a full circle when end = start + 2pi-e and clockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.arc(50, 25, 50, 0, 2*Math.PI - 1e-4, false);
+  ctx.stroke();
+  _assertPixel(canvas, 50,20, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.3.html
new file mode 100644
index 0000000000..204ed54a1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.twopie.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.path.arc.twopie.3</h1>
+<p class="desc">arc() draws a full circle when end = start + 2pi+e and anticlockwise</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("arc() draws a full circle when end = start + 2pi+e and anticlockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,20, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.4.html
new file mode 100644
index 0000000000..d5535a7949
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.4.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.twopie.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.path.arc.twopie.4</h1>
+<p class="desc">arc() draws nothing when end = start + 2pi+e and clockwise</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("arc() draws nothing when end = start + 2pi+e and clockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.arc(50, 25, 50, 0, 2*Math.PI + 1e-4, false);
+  ctx.stroke();
+  _assertPixel(canvas, 50,20, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.5.html
new file mode 100644
index 0000000000..955a6c8743
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.5.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.path.arc.twopie.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.path.arc.twopie.5</h1>
+<p class="desc">arc() draws correctly when start = 2 and end = start + 2pi+e and clockwise</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("arc() draws correctly when start = 2 and end = start + 2pi+e and clockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#000';
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.arc(50, 25, 50, 2, 2 + 2*Math.PI, false);
+  ctx.closePath();
+  ctx.fill();
+  _assertPixel(canvas, 95,25, 0,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.6.html
new file mode 100644
index 0000000000..9420ecdc93
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.twopie.6.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.path.arc.twopie.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.path.arc.twopie.6</h1>
+<p class="desc">arc() draws correctly when start = 5 and end = start + 2pi+e and clockwise</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("arc() draws correctly when start = 5 and end = start + 2pi+e and clockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#000';
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.arc(50, 25, 50, 5, 5 + 2*Math.PI, false);
+  ctx.closePath();
+  ctx.fill();
+  _assertPixel(canvas, 5,25, 0,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.1.html
new file mode 100644
index 0000000000..2c93425b1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.zero.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.path.arc.zero.1</h1>
+<p class="desc">arc() draws nothing when startAngle = endAngle and anticlockwise</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("arc() draws nothing when startAngle = endAngle and anticlockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.arc(50, 25, 50, 0, 0, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,20, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.2.html
new file mode 100644
index 0000000000..c290c2f32f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zero.2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arc.zero.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.path.arc.zero.2</h1>
+<p class="desc">arc() draws nothing when startAngle = endAngle and clockwise</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("arc() draws nothing when startAngle = endAngle and clockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.arc(50, 25, 50, 0, 0, false);
+  ctx.stroke();
+  _assertPixel(canvas, 50,20, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zeroradius.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zeroradius.html
new file mode 100644
index 0000000000..f75403b2f3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arc.zeroradius.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.path.arc.zeroradius</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.path.arc.zeroradius</h1>
+<p class="desc">arc() with zero radius draws a line to the start point</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("arc() with zero radius draws a line to the start point");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00'
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arc(200, 25, 0, 0, Math.PI, true);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.1.html
new file mode 100644
index 0000000000..01c8091c46
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.1.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.path.arcTo.coincide.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.path.arcTo.coincide.1</h1>
+<p class="desc">arcTo() has no effect if P0 = P1</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("arcTo() has no effect if P0 = P1");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(0, 25, 50, 1000, 1);
+  ctx.lineTo(100, 25);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.arcTo(50, 25, 100, 25, 1);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,1, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 50,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.2.html
new file mode 100644
index 0000000000..d216949aae
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.coincide.2.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.path.arcTo.coincide.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.path.arcTo.coincide.2</h1>
+<p class="desc">arcTo() draws a straight line to P1 if P1 = P2</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("arcTo() draws a straight line to P1 if P1 = P2");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(100, 25, 100, 25, 1);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.1.html
new file mode 100644
index 0000000000..e91e2e4b1b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.1.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.path.arcTo.collinear.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.path.arcTo.collinear.1</h1>
+<p class="desc">arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1</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("arcTo() with all points on a line, and P1 between P0/P2, draws a straight line to P1");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(100, 25, 200, 25, 1);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(-100, 25);
+  ctx.arcTo(0, 25, 100, 25, 1);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.2.html
new file mode 100644
index 0000000000..97b1339295
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.2.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.path.arcTo.collinear.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.path.arcTo.collinear.2</h1>
+<p class="desc">arcTo() with all points on a line, and P2 between P0/P1, draws a straight line to P1</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("arcTo() with all points on a line, and P2 between P0/P1, draws a straight line to P1");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(100, 25, 10, 25, 1);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 25);
+  ctx.arcTo(200, 25, 110, 25, 1);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.3.html
new file mode 100644
index 0000000000..2f4394f038
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.collinear.3.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arcTo.collinear.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.path.arcTo.collinear.3</h1>
+<p class="desc">arcTo() with all points on a line, and P0 between P1/P2, draws a straight line to P1</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("arcTo() with all points on a line, and P0 between P1/P2, draws a straight line to P1");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(100, 25, -100, 25, 1);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 25);
+  ctx.arcTo(200, 25, 0, 25, 1);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(-100, 25);
+  ctx.arcTo(0, 25, -200, 25, 1);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.1.html
new file mode 100644
index 0000000000..2781bcbba3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arcTo.ensuresubpath.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.path.arcTo.ensuresubpath.1</h1>
+<p class="desc">If there is no subpath, the first control point is added (and nothing is drawn up to it)</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("If there is no subpath, the first control point is added (and nothing is drawn up to it)");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.arcTo(100, 50, 200, 50, 0.1);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.2.html
new file mode 100644
index 0000000000..f5da07c1c6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.ensuresubpath.2.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.path.arcTo.ensuresubpath.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.path.arcTo.ensuresubpath.2</h1>
+<p class="desc">If there is no subpath, the first control point is added</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("If there is no subpath, the first control point is added");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.arcTo(0, 25, 50, 250, 0.1); // adds (x1,y1), draws nothing
+  ctx.lineTo(100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.negative.html
new file mode 100644
index 0000000000..0091ca2a67
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.negative.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.path.arcTo.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.path.arcTo.negative</h1>
+<p class="desc">arcTo() with negative radius throws an exception</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("arcTo() with negative radius throws an exception");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.arcTo(0, 0, 0, 0, -1); });
+  var path = new Path2D();
+  assert_throws_dom("INDEX_SIZE_ERR", function() { path.arcTo(10, 10, 20, 20, -5); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.nonfinite.html
new file mode 100644
index 0000000000..0d7be1d360
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.nonfinite.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arcTo.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.path.arcTo.nonfinite</h1>
+<p class="desc">arcTo() with Infinity/NaN is ignored</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("arcTo() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.arcTo(Infinity, 50, 0, 50, 0);
+  ctx.arcTo(-Infinity, 50, 0, 50, 0);
+  ctx.arcTo(NaN, 50, 0, 50, 0);
+  ctx.arcTo(0, Infinity, 0, 50, 0);
+  ctx.arcTo(0, -Infinity, 0, 50, 0);
+  ctx.arcTo(0, NaN, 0, 50, 0);
+  ctx.arcTo(0, 50, Infinity, 50, 0);
+  ctx.arcTo(0, 50, -Infinity, 50, 0);
+  ctx.arcTo(0, 50, NaN, 50, 0);
+  ctx.arcTo(0, 50, 0, Infinity, 0);
+  ctx.arcTo(0, 50, 0, -Infinity, 0);
+  ctx.arcTo(0, 50, 0, NaN, 0);
+  ctx.arcTo(0, 50, 0, 50, Infinity);
+  ctx.arcTo(0, 50, 0, 50, -Infinity);
+  ctx.arcTo(0, 50, 0, 50, NaN);
+  ctx.arcTo(Infinity, Infinity, 0, 50, 0);
+  ctx.arcTo(Infinity, Infinity, Infinity, 50, 0);
+  ctx.arcTo(Infinity, Infinity, Infinity, Infinity, 0);
+  ctx.arcTo(Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.arcTo(Infinity, Infinity, Infinity, 50, Infinity);
+  ctx.arcTo(Infinity, Infinity, 0, Infinity, 0);
+  ctx.arcTo(Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.arcTo(Infinity, Infinity, 0, 50, Infinity);
+  ctx.arcTo(Infinity, 50, Infinity, 50, 0);
+  ctx.arcTo(Infinity, 50, Infinity, Infinity, 0);
+  ctx.arcTo(Infinity, 50, Infinity, Infinity, Infinity);
+  ctx.arcTo(Infinity, 50, Infinity, 50, Infinity);
+  ctx.arcTo(Infinity, 50, 0, Infinity, 0);
+  ctx.arcTo(Infinity, 50, 0, Infinity, Infinity);
+  ctx.arcTo(Infinity, 50, 0, 50, Infinity);
+  ctx.arcTo(0, Infinity, Infinity, 50, 0);
+  ctx.arcTo(0, Infinity, Infinity, Infinity, 0);
+  ctx.arcTo(0, Infinity, Infinity, Infinity, Infinity);
+  ctx.arcTo(0, Infinity, Infinity, 50, Infinity);
+  ctx.arcTo(0, Infinity, 0, Infinity, 0);
+  ctx.arcTo(0, Infinity, 0, Infinity, Infinity);
+  ctx.arcTo(0, Infinity, 0, 50, Infinity);
+  ctx.arcTo(0, 50, Infinity, Infinity, 0);
+  ctx.arcTo(0, 50, Infinity, Infinity, Infinity);
+  ctx.arcTo(0, 50, Infinity, 50, Infinity);
+  ctx.arcTo(0, 50, 0, Infinity, Infinity);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.scale.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.scale.html
new file mode 100644
index 0000000000..6645f05260
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.scale.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.path.arcTo.scale</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.path.arcTo.scale</h1>
+<p class="desc">arcTo scales the curve, not just the control points</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("arcTo scales the curve, not just the control points");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 50);
+  ctx.translate(100, 0);
+  ctx.scale(0.1, 1);
+  ctx.arcTo(50, 50, 50, 0, 50);
+  ctx.lineTo(-1000, 0);
+  ctx.fill();
+
+  _assertPixel(canvas, 0,0, 0,255,0,255);
+  _assertPixel(canvas, 50,0, 0,255,0,255);
+  _assertPixel(canvas, 99,0, 0,255,0,255);
+  _assertPixel(canvas, 0,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 99,25, 0,255,0,255);
+  _assertPixel(canvas, 0,49, 0,255,0,255);
+  _assertPixel(canvas, 50,49, 0,255,0,255);
+  _assertPixel(canvas, 99,49, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve1.html
new file mode 100644
index 0000000000..4617b2cbbb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve1.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arcTo.shape.curve1</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.path.arcTo.shape.curve1</h1>
+<p class="desc">arcTo() curves in the right kind of shape</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("arcTo() curves in the right kind of shape");
+_addTest(function(canvas, ctx) {
+
+  var tol = 1.5; // tolerance to avoid antialiasing artifacts
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(10, 25);
+  ctx.arcTo(75, 25, 75, 60, 20);
+  ctx.stroke();
+
+  ctx.fillStyle = '#0f0';
+  ctx.beginPath();
+  ctx.rect(10, 20, 45, 10);
+  ctx.moveTo(80, 45);
+  ctx.arc(55, 45, 25+tol, 0, -Math.PI/2, true);
+  ctx.arc(55, 45, 15-tol, -Math.PI/2, 0, false);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 55,19, 0,255,0,255);
+  _assertPixel(canvas, 55,20, 0,255,0,255);
+  _assertPixel(canvas, 55,21, 0,255,0,255);
+  _assertPixel(canvas, 64,22, 0,255,0,255);
+  _assertPixel(canvas, 65,21, 0,255,0,255);
+  _assertPixel(canvas, 72,28, 0,255,0,255);
+  _assertPixel(canvas, 73,27, 0,255,0,255);
+  _assertPixel(canvas, 78,36, 0,255,0,255);
+  _assertPixel(canvas, 79,35, 0,255,0,255);
+  _assertPixel(canvas, 80,44, 0,255,0,255);
+  _assertPixel(canvas, 80,45, 0,255,0,255);
+  _assertPixel(canvas, 80,46, 0,255,0,255);
+  _assertPixel(canvas, 65,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve2.html
new file mode 100644
index 0000000000..bcc4326eea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.curve2.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.arcTo.shape.curve2</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.path.arcTo.shape.curve2</h1>
+<p class="desc">arcTo() curves in the right kind of shape</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("arcTo() curves in the right kind of shape");
+_addTest(function(canvas, ctx) {
+
+  var tol = 1.5; // tolerance to avoid antialiasing artifacts
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#f00';
+  ctx.beginPath();
+  ctx.rect(10, 20, 45, 10);
+  ctx.moveTo(80, 45);
+  ctx.arc(55, 45, 25-tol, 0, -Math.PI/2, true);
+  ctx.arc(55, 45, 15+tol, -Math.PI/2, 0, false);
+  ctx.fill();
+
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 10;
+  ctx.beginPath();
+  ctx.moveTo(10, 25);
+  ctx.arcTo(75, 25, 75, 60, 20);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 55,19, 0,255,0,255);
+  _assertPixel(canvas, 55,20, 0,255,0,255);
+  _assertPixel(canvas, 55,21, 0,255,0,255);
+  _assertPixel(canvas, 64,22, 0,255,0,255);
+  _assertPixel(canvas, 65,21, 0,255,0,255);
+  _assertPixel(canvas, 72,28, 0,255,0,255);
+  _assertPixel(canvas, 73,27, 0,255,0,255);
+  _assertPixel(canvas, 78,36, 0,255,0,255);
+  _assertPixel(canvas, 79,35, 0,255,0,255);
+  _assertPixel(canvas, 80,44, 0,255,0,255);
+  _assertPixel(canvas, 80,45, 0,255,0,255);
+  _assertPixel(canvas, 80,46, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.end.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.end.html
new file mode 100644
index 0000000000..829c70f5f4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.end.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.path.arcTo.shape.end</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.path.arcTo.shape.end</h1>
+<p class="desc">arcTo() does not draw anything from P1 to P2</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("arcTo() does not draw anything from P1 to P2");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.moveTo(-100, -100);
+  ctx.arcTo(-100, 25, 200, 25, 10);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.start.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.start.html
new file mode 100644
index 0000000000..0abeedf433
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.shape.start.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.path.arcTo.shape.start</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.path.arcTo.shape.start</h1>
+<p class="desc">arcTo() draws a straight line from P0 to P1</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("arcTo() draws a straight line from P0 to P1");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(200, 25, 200, 50, 10);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.transformation.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.transformation.html
new file mode 100644
index 0000000000..5aa8562b1d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.transformation.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.path.arcTo.transformation</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.path.arcTo.transformation</h1>
+<p class="desc">arcTo joins up to the last subpath point correctly</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("arcTo joins up to the last subpath point correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 50);
+  ctx.translate(100, 0);
+  ctx.arcTo(50, 50, 50, 0, 50);
+  ctx.lineTo(-100, 0);
+  ctx.fill();
+
+  _assertPixel(canvas, 0,0, 0,255,0,255);
+  _assertPixel(canvas, 50,0, 0,255,0,255);
+  _assertPixel(canvas, 99,0, 0,255,0,255);
+  _assertPixel(canvas, 0,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 99,25, 0,255,0,255);
+  _assertPixel(canvas, 0,49, 0,255,0,255);
+  _assertPixel(canvas, 50,49, 0,255,0,255);
+  _assertPixel(canvas, 99,49, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.1.html
new file mode 100644
index 0000000000..bb2cc1d3e3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.1.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.path.arcTo.zero.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.path.arcTo.zero.1</h1>
+<p class="desc">arcTo() with zero radius draws a straight line from P0 to P1</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("arcTo() with zero radius draws a straight line from P0 to P1");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(100, 25, 100, 100, 0);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(0, -25);
+  ctx.arcTo(50, -25, 50, 50, 0);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.2.html
new file mode 100644
index 0000000000..d2eeee535d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.arcTo.zero.2.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.path.arcTo.zero.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.path.arcTo.zero.2</h1>
+<p class="desc">arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear</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("arcTo() with zero radius draws a straight line from P0 to P1, even when all points are collinear");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.lineWidth = 50;
+
+  ctx.strokeStyle = '#0f0';
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.arcTo(100, 25, -100, 25, 0);
+  ctx.stroke();
+
+  ctx.strokeStyle = '#f00';
+  ctx.beginPath();
+  ctx.moveTo(100, 25);
+  ctx.arcTo(200, 25, 50, 25, 0);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.beginPath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.beginPath.html
new file mode 100644
index 0000000000..316f6af942
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.beginPath.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.path.beginPath</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.path.beginPath</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.rect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.fillStyle = '#f00';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.basic.html
new file mode 100644
index 0000000000..0c3d7f948b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.basic.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.path.bezierCurveTo.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.path.bezierCurveTo.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);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.bezierCurveTo(100, 25, 100, 25, 100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.1.html
new file mode 100644
index 0000000000..ebcce3f48c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.1.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.path.bezierCurveTo.ensuresubpath.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.path.bezierCurveTo.ensuresubpath.1</h1>
+<p class="desc">If there is no subpath, the first control point is added (and nothing is drawn up to it)</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("If there is no subpath, the first control point is added (and nothing is drawn up to it)");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.bezierCurveTo(100, 50, 200, 50, 200, 50);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 95,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.2.html
new file mode 100644
index 0000000000..c269b72d33
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.ensuresubpath.2.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.path.bezierCurveTo.ensuresubpath.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.path.bezierCurveTo.ensuresubpath.2</h1>
+<p class="desc">If there is no subpath, the first control point is added</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("If there is no subpath, the first control point is added");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.bezierCurveTo(0, 25, 100, 25, 100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 5,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.nonfinite.html
new file mode 100644
index 0000000000..6278a67283
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.nonfinite.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.bezierCurveTo.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.path.bezierCurveTo.nonfinite</h1>
+<p class="desc">bezierCurveTo() with Infinity/NaN is ignored</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("bezierCurveTo() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, 50);
+  ctx.bezierCurveTo(-Infinity, 50, 0, 50, 0, 50);
+  ctx.bezierCurveTo(NaN, 50, 0, 50, 0, 50);
+  ctx.bezierCurveTo(0, Infinity, 0, 50, 0, 50);
+  ctx.bezierCurveTo(0, -Infinity, 0, 50, 0, 50);
+  ctx.bezierCurveTo(0, NaN, 0, 50, 0, 50);
+  ctx.bezierCurveTo(0, 50, Infinity, 50, 0, 50);
+  ctx.bezierCurveTo(0, 50, -Infinity, 50, 0, 50);
+  ctx.bezierCurveTo(0, 50, NaN, 50, 0, 50);
+  ctx.bezierCurveTo(0, 50, 0, Infinity, 0, 50);
+  ctx.bezierCurveTo(0, 50, 0, -Infinity, 0, 50);
+  ctx.bezierCurveTo(0, 50, 0, NaN, 0, 50);
+  ctx.bezierCurveTo(0, 50, 0, 50, Infinity, 50);
+  ctx.bezierCurveTo(0, 50, 0, 50, -Infinity, 50);
+  ctx.bezierCurveTo(0, 50, 0, 50, NaN, 50);
+  ctx.bezierCurveTo(0, 50, 0, 50, 0, Infinity);
+  ctx.bezierCurveTo(0, 50, 0, 50, 0, -Infinity);
+  ctx.bezierCurveTo(0, 50, 0, 50, 0, NaN);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, Infinity, Infinity, 50, 0, Infinity);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, 50, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, Infinity, 0, 50, 0, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, 50);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, 50);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, 50, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, Infinity, 50, 0, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, 50);
+  ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, 50, 0, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, 0, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, 50);
+  ctx.bezierCurveTo(Infinity, 50, 0, 50, Infinity, Infinity);
+  ctx.bezierCurveTo(Infinity, 50, 0, 50, 0, Infinity);
+  ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, 50);
+  ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, 50);
+  ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(0, Infinity, Infinity, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, 50);
+  ctx.bezierCurveTo(0, Infinity, Infinity, 50, Infinity, Infinity);
+  ctx.bezierCurveTo(0, Infinity, Infinity, 50, 0, Infinity);
+  ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, 50);
+  ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(0, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(0, Infinity, 0, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, 50);
+  ctx.bezierCurveTo(0, Infinity, 0, 50, Infinity, Infinity);
+  ctx.bezierCurveTo(0, Infinity, 0, 50, 0, Infinity);
+  ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, 50);
+  ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(0, 50, Infinity, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(0, 50, Infinity, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, 50);
+  ctx.bezierCurveTo(0, 50, Infinity, 50, Infinity, Infinity);
+  ctx.bezierCurveTo(0, 50, Infinity, 50, 0, Infinity);
+  ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, 50);
+  ctx.bezierCurveTo(0, 50, 0, Infinity, Infinity, Infinity);
+  ctx.bezierCurveTo(0, 50, 0, Infinity, 0, Infinity);
+  ctx.bezierCurveTo(0, 50, 0, 50, Infinity, Infinity);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.scaled.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.scaled.html
new file mode 100644
index 0000000000..e7a5d8b524
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.scaled.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.path.bezierCurveTo.scaled</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.path.bezierCurveTo.scaled</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.scale(1000, 1000);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 0.055;
+  ctx.beginPath();
+  ctx.moveTo(-2, 3.1);
+  ctx.bezierCurveTo(-2, -1, 2.1, -1, 2.1, 3.1);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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/path-objects/2d.path.bezierCurveTo.shape.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.shape.html
new file mode 100644
index 0000000000..cbc2824425
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.bezierCurveTo.shape.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.path.bezierCurveTo.shape</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.path.bezierCurveTo.shape</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 55;
+  ctx.beginPath();
+  ctx.moveTo(-2000, 3100);
+  ctx.bezierCurveTo(-2000, -1000, 2100, -1000, 2100, 3100);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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/path-objects/2d.path.clip.basic.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.1.html
new file mode 100644
index 0000000000..a5515e4f7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.1.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.path.clip.basic.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.path.clip.basic.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 50);
+  ctx.clip();
+
+  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/path-objects/2d.path.clip.basic.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.2.html
new file mode 100644
index 0000000000..27e1ad0b0c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.basic.2.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.path.clip.basic.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.path.clip.basic.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';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.beginPath();
+  ctx.rect(-100, 0, 100, 50);
+  ctx.clip();
+
+  ctx.fillStyle = '#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/path-objects/2d.path.clip.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.empty.html
new file mode 100644
index 0000000000..17208ad797
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.empty.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.path.clip.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.path.clip.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);
+
+  ctx.beginPath();
+  ctx.clip();
+
+  ctx.fillStyle = '#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/path-objects/2d.path.clip.intersect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.intersect.html
new file mode 100644
index 0000000000..c1057f2645
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.intersect.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.path.clip.intersect</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.path.clip.intersect</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.beginPath();
+  ctx.rect(0, 0, 50, 50);
+  ctx.clip();
+  ctx.beginPath();
+  ctx.rect(50, 0, 50, 50)
+  ctx.clip();
+
+  ctx.fillStyle = '#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/path-objects/2d.path.clip.unaffected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.unaffected.html
new file mode 100644
index 0000000000..66f0379602
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.unaffected.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.path.clip.unaffected</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.path.clip.unaffected</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.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(0, 50);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(100, 0);
+  ctx.clip();
+
+  ctx.lineTo(0, 0);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.1.html
new file mode 100644
index 0000000000..46e4db9b6c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.1.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.path.clip.winding.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.path.clip.winding.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';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.beginPath();
+  ctx.moveTo(-10, -10);
+  ctx.lineTo(110, -10);
+  ctx.lineTo(110, 60);
+  ctx.lineTo(-10, 60);
+  ctx.lineTo(-10, -10);
+  ctx.lineTo(0, 0);
+  ctx.lineTo(0, 50);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(100, 0);
+  ctx.clip();
+
+  ctx.fillStyle = '#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/path-objects/2d.path.clip.winding.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.2.html
new file mode 100644
index 0000000000..9341353a8d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.clip.winding.2.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.path.clip.winding.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.path.clip.winding.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.beginPath();
+  ctx.moveTo(-10, -10);
+  ctx.lineTo(110, -10);
+  ctx.lineTo(110, 60);
+  ctx.lineTo(-10, 60);
+  ctx.lineTo(-10, -10);
+  ctx.clip();
+
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(0, 50);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(100, 0);
+  ctx.lineTo(0, 0);
+  ctx.clip();
+
+  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/path-objects/2d.path.closePath.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.empty.html
new file mode 100644
index 0000000000..898cdc5fa6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.empty.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.path.closePath.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.path.closePath.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);
+  ctx.closePath();
+  ctx.fillStyle = '#f00';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.newline.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.newline.html
new file mode 100644
index 0000000000..07ec4b2a82
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.newline.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.path.closePath.newline</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.path.closePath.newline</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.moveTo(-100, 25);
+  ctx.lineTo(-100, -100);
+  ctx.lineTo(200, -100);
+  ctx.lineTo(200, 25);
+  ctx.closePath();
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.nextpoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.nextpoint.html
new file mode 100644
index 0000000000..648d7ad37a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.closePath.nextpoint.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.path.closePath.nextpoint</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.path.closePath.nextpoint</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.moveTo(-100, 25);
+  ctx.lineTo(-100, -1000);
+  ctx.closePath();
+  ctx.lineTo(1000, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.ellipse.basics.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.ellipse.basics.html
new file mode 100644
index 0000000000..d46dc31d26
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.ellipse.basics.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.path.ellipse.basics</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.path.ellipse.basics</h1>
+<p class="desc">Verify canvas throws error when drawing ellipse with negative radii.</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("Verify canvas throws error when drawing ellipse with negative radii.");
+_addTest(function(canvas, ctx) {
+
+  ctx.ellipse(10, 10, 10, 5, 0, 0, 1, false);
+  ctx.ellipse(10, 10, 10, 0, 0, 0, 1, false);
+  ctx.ellipse(10, 10, -0, 5, 0, 0, 1, false);
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.ellipse(10, 10, -2, 5, 0, 0, 1, false); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.ellipse(10, 10, 0, -1.5, 0, 0, 1, false); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.ellipse(10, 10, -2, -5, 0, 0, 1, false); });
+  ctx.ellipse(80, 0, 10, 4294967277, Math.PI / -84, -Math.PI / 2147483436, false);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.basic.html
new file mode 100644
index 0000000000..010dbf43e1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.basic.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.path.fill.closed.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.path.fill.closed.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);
+
+  ctx.fillStyle = '#0f0';
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.unaffected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.unaffected.html
new file mode 100644
index 0000000000..e00a6c8f55
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.closed.unaffected.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.path.fill.closed.unaffected</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.path.fill.closed.unaffected</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 = '#00f';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.lineTo(100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fill();
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  _assertPixel(canvas, 90,10, 0,255,0,255);
+  _assertPixel(canvas, 10,40, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.html
new file mode 100644
index 0000000000..08782ed11e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.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.path.fill.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.path.fill.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.path.fill.overlap.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.rect(0, 0, 100, 50);
+  ctx.closePath();
+  ctx.rect(10, 10, 80, 30);
+  ctx.fill();
+
+  _assertPixelApprox(canvas, 50,25, 0,127,0,255, 1);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.png b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.png
new file mode 100644
index 0000000000..e2a35d48d4
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.overlap.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.add.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.add.html
new file mode 100644
index 0000000000..ef9a2a0f93
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.add.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.path.fill.winding.add</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.path.fill.winding.add</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.moveTo(-10, -10);
+  ctx.lineTo(110, -10);
+  ctx.lineTo(110, 60);
+  ctx.lineTo(-10, 60);
+  ctx.lineTo(-10, -10);
+  ctx.lineTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.1.html
new file mode 100644
index 0000000000..eecf0198e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.1.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.path.fill.winding.subtract.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.path.fill.winding.subtract.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';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#f00';
+  ctx.moveTo(-10, -10);
+  ctx.lineTo(110, -10);
+  ctx.lineTo(110, 60);
+  ctx.lineTo(-10, 60);
+  ctx.lineTo(-10, -10);
+  ctx.lineTo(0, 0);
+  ctx.lineTo(0, 50);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(100, 0);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.2.html
new file mode 100644
index 0000000000..cf8b6a6ce9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.2.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.path.fill.winding.subtract.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.path.fill.winding.subtract.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';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#f00';
+  ctx.moveTo(-10, -10);
+  ctx.lineTo(110, -10);
+  ctx.lineTo(110, 60);
+  ctx.lineTo(-10, 60);
+  ctx.moveTo(0, 0);
+  ctx.lineTo(0, 50);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(100, 0);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.3.html
new file mode 100644
index 0000000000..e056e33003
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.fill.winding.subtract.3.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.path.fill.winding.subtract.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.path.fill.winding.subtract.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.moveTo(-10, -10);
+  ctx.lineTo(110, -10);
+  ctx.lineTo(110, 60);
+  ctx.lineTo(-10, 60);
+  ctx.lineTo(-10, -10);
+  ctx.lineTo(-20, -20);
+  ctx.lineTo(120, -20);
+  ctx.lineTo(120, 70);
+  ctx.lineTo(-20, 70);
+  ctx.lineTo(-20, -20);
+  ctx.lineTo(0, 0);
+  ctx.lineTo(0, 50);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(100, 0);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.initial.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.initial.html
new file mode 100644
index 0000000000..a3de93a799
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.initial.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.path.initial</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.path.initial</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.closePath();
+  ctx.fillStyle = '#f00';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.arc.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.arc.html
new file mode 100644
index 0000000000..bc4bc560e5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.arc.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.path.isPointInPath.arc</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.path.isPointInPath.arc</h1>
+<p class="desc">isPointInPath() works on arcs</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("isPointInPath() works on arcs");
+_addTest(function(canvas, ctx) {
+
+  ctx.arc(50, 25, 10, 0, Math.PI, false);
+  _assertSame(ctx.isPointInPath(50, 10), false, "ctx.isPointInPath(50, 10)", "false");
+  _assertSame(ctx.isPointInPath(50, 20), false, "ctx.isPointInPath(50, 20)", "false");
+  _assertSame(ctx.isPointInPath(50, 30), true, "ctx.isPointInPath(50, 30)", "true");
+  _assertSame(ctx.isPointInPath(50, 40), false, "ctx.isPointInPath(50, 40)", "false");
+  _assertSame(ctx.isPointInPath(30, 20), false, "ctx.isPointInPath(30, 20)", "false");
+  _assertSame(ctx.isPointInPath(70, 20), false, "ctx.isPointInPath(70, 20)", "false");
+  _assertSame(ctx.isPointInPath(30, 30), false, "ctx.isPointInPath(30, 30)", "false");
+  _assertSame(ctx.isPointInPath(70, 30), false, "ctx.isPointInPath(70, 30)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.1.html
new file mode 100644
index 0000000000..22562c60a2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.1.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.path.isPointInPath.basic.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.path.isPointInPath.basic.1</h1>
+<p class="desc">isPointInPath() detects whether the point is inside the path</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("isPointInPath() detects whether the point is inside the path");
+_addTest(function(canvas, ctx) {
+
+  ctx.rect(0, 0, 20, 20);
+  _assertSame(ctx.isPointInPath(10, 10), true, "ctx.isPointInPath(10, 10)", "true");
+  _assertSame(ctx.isPointInPath(30, 10), false, "ctx.isPointInPath(30, 10)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.2.html
new file mode 100644
index 0000000000..9fc1060df8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.2.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.path.isPointInPath.basic.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.path.isPointInPath.basic.2</h1>
+<p class="desc">isPointInPath() detects whether the point is inside the path</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("isPointInPath() detects whether the point is inside the path");
+_addTest(function(canvas, ctx) {
+
+  ctx.rect(20, 0, 20, 20);
+  _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false");
+  _assertSame(ctx.isPointInPath(30, 10), true, "ctx.isPointInPath(30, 10)", "true");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.html
new file mode 100644
index 0000000000..5e3edfcc80
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.basic.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.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.path.isPointInPath.basic</h1>
+<p class="desc">Verify the winding rule in isPointInPath works for for rect path.</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("Verify the winding rule in isPointInPath works for for rect path.");
+_addTest(function(canvas, ctx) {
+
+  canvas.width = 200;
+  canvas.height = 200;
+
+  // Testing default isPointInPath
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 100);
+  ctx.rect(25, 25, 50, 50);
+  _assertSame(ctx.isPointInPath(50, 50), true, "ctx.isPointInPath(50, 50)", "true");
+  _assertSame(ctx.isPointInPath(NaN, 50), false, "ctx.isPointInPath(NaN, 50)", "false");
+  _assertSame(ctx.isPointInPath(50, NaN), false, "ctx.isPointInPath(50, NaN)", "false");
+
+  // Testing nonzero isPointInPath
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 100);
+  ctx.rect(25, 25, 50, 50);
+  _assertSame(ctx.isPointInPath(50, 50, 'nonzero'), true, "ctx.isPointInPath(50, 50, 'nonzero')", "true");
+
+  // Testing evenodd isPointInPath
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 100);
+  ctx.rect(25, 25, 50, 50);
+  _assertSame(ctx.isPointInPath(50, 50, 'evenodd'), false, "ctx.isPointInPath(50, 50, 'evenodd')", "false");
+
+  // Testing extremely large scale
+  ctx.save();
+  ctx.scale(Number.MAX_VALUE, Number.MAX_VALUE);
+  ctx.beginPath();
+  ctx.rect(-10, -10, 20, 20);
+  _assertSame(ctx.isPointInPath(0, 0, 'nonzero'), true, "ctx.isPointInPath(0, 0, 'nonzero')", "true");
+  _assertSame(ctx.isPointInPath(0, 0, 'evenodd'), true, "ctx.isPointInPath(0, 0, 'evenodd')", "true");
+  ctx.restore();
+
+  // Check with non-invertible ctm.
+  ctx.save();
+  ctx.scale(0, 0);
+  ctx.beginPath();
+  ctx.rect(-10, -10, 20, 20);
+  _assertSame(ctx.isPointInPath(0, 0, 'nonzero'), false, "ctx.isPointInPath(0, 0, 'nonzero')", "false");
+  _assertSame(ctx.isPointInPath(0, 0, 'evenodd'), false, "ctx.isPointInPath(0, 0, 'evenodd')", "false");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bezier.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bezier.html
new file mode 100644
index 0000000000..b2f2d23724
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bezier.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.bezier</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.path.isPointInPath.bezier</h1>
+<p class="desc">isPointInPath() works on Bezier curves</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("isPointInPath() works on Bezier curves");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(25, 25);
+  ctx.bezierCurveTo(50, -50, 50, 100, 75, 25);
+  _assertSame(ctx.isPointInPath(25, 20), false, "ctx.isPointInPath(25, 20)", "false");
+  _assertSame(ctx.isPointInPath(25, 30), false, "ctx.isPointInPath(25, 30)", "false");
+  _assertSame(ctx.isPointInPath(30, 20), true, "ctx.isPointInPath(30, 20)", "true");
+  _assertSame(ctx.isPointInPath(30, 30), false, "ctx.isPointInPath(30, 30)", "false");
+  _assertSame(ctx.isPointInPath(40, 2), false, "ctx.isPointInPath(40, 2)", "false");
+  _assertSame(ctx.isPointInPath(40, 20), true, "ctx.isPointInPath(40, 20)", "true");
+  _assertSame(ctx.isPointInPath(40, 30), false, "ctx.isPointInPath(40, 30)", "false");
+  _assertSame(ctx.isPointInPath(40, 47), false, "ctx.isPointInPath(40, 47)", "false");
+  _assertSame(ctx.isPointInPath(45, 20), true, "ctx.isPointInPath(45, 20)", "true");
+  _assertSame(ctx.isPointInPath(45, 30), false, "ctx.isPointInPath(45, 30)", "false");
+  _assertSame(ctx.isPointInPath(55, 20), false, "ctx.isPointInPath(55, 20)", "false");
+  _assertSame(ctx.isPointInPath(55, 30), true, "ctx.isPointInPath(55, 30)", "true");
+  _assertSame(ctx.isPointInPath(60, 2), false, "ctx.isPointInPath(60, 2)", "false");
+  _assertSame(ctx.isPointInPath(60, 20), false, "ctx.isPointInPath(60, 20)", "false");
+  _assertSame(ctx.isPointInPath(60, 30), true, "ctx.isPointInPath(60, 30)", "true");
+  _assertSame(ctx.isPointInPath(60, 47), false, "ctx.isPointInPath(60, 47)", "false");
+  _assertSame(ctx.isPointInPath(70, 20), false, "ctx.isPointInPath(70, 20)", "false");
+  _assertSame(ctx.isPointInPath(70, 30), true, "ctx.isPointInPath(70, 30)", "true");
+  _assertSame(ctx.isPointInPath(75, 20), false, "ctx.isPointInPath(75, 20)", "false");
+  _assertSame(ctx.isPointInPath(75, 30), false, "ctx.isPointInPath(75, 30)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bigarc.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bigarc.html
new file mode 100644
index 0000000000..77cb495137
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.bigarc.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.path.isPointInPath.bigarc</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.path.isPointInPath.bigarc</h1>
+<p class="desc">isPointInPath() works on unclosed arcs larger than 2pi</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("isPointInPath() works on unclosed arcs larger than 2pi");
+_addTest(function(canvas, ctx) {
+
+  ctx.arc(50, 25, 10, 0, 7, false);
+  _assertSame(ctx.isPointInPath(50, 10), false, "ctx.isPointInPath(50, 10)", "false");
+  _assertSame(ctx.isPointInPath(50, 20), true, "ctx.isPointInPath(50, 20)", "true");
+  _assertSame(ctx.isPointInPath(50, 30), true, "ctx.isPointInPath(50, 30)", "true");
+  _assertSame(ctx.isPointInPath(50, 40), false, "ctx.isPointInPath(50, 40)", "false");
+  _assertSame(ctx.isPointInPath(30, 20), false, "ctx.isPointInPath(30, 20)", "false");
+  _assertSame(ctx.isPointInPath(70, 20), false, "ctx.isPointInPath(70, 20)", "false");
+  _assertSame(ctx.isPointInPath(30, 30), false, "ctx.isPointInPath(30, 30)", "false");
+  _assertSame(ctx.isPointInPath(70, 30), false, "ctx.isPointInPath(70, 30)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.edge.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.edge.html
new file mode 100644
index 0000000000..b00da5a2a7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.edge.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.path.isPointInPath.edge</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.path.isPointInPath.edge</h1>
+<p class="desc">isPointInPath() counts points on the path as being inside</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("isPointInPath() counts points on the path as being inside");
+_addTest(function(canvas, ctx) {
+
+  ctx.rect(0, 0, 20, 20);
+  _assertSame(ctx.isPointInPath(0, 0), true, "ctx.isPointInPath(0, 0)", "true");
+  _assertSame(ctx.isPointInPath(10, 0), true, "ctx.isPointInPath(10, 0)", "true");
+  _assertSame(ctx.isPointInPath(20, 0), true, "ctx.isPointInPath(20, 0)", "true");
+  _assertSame(ctx.isPointInPath(20, 10), true, "ctx.isPointInPath(20, 10)", "true");
+  _assertSame(ctx.isPointInPath(20, 20), true, "ctx.isPointInPath(20, 20)", "true");
+  _assertSame(ctx.isPointInPath(10, 20), true, "ctx.isPointInPath(10, 20)", "true");
+  _assertSame(ctx.isPointInPath(0, 20), true, "ctx.isPointInPath(0, 20)", "true");
+  _assertSame(ctx.isPointInPath(0, 10), true, "ctx.isPointInPath(0, 10)", "true");
+  _assertSame(ctx.isPointInPath(10, -0.01), false, "ctx.isPointInPath(10, -0.01)", "false");
+  _assertSame(ctx.isPointInPath(10, 20.01), false, "ctx.isPointInPath(10, 20.01)", "false");
+  _assertSame(ctx.isPointInPath(-0.01, 10), false, "ctx.isPointInPath(-0.01, 10)", "false");
+  _assertSame(ctx.isPointInPath(20.01, 10), false, "ctx.isPointInPath(20.01, 10)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.empty.html
new file mode 100644
index 0000000000..3edfe01a2a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.empty.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.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.path.isPointInPath.empty</h1>
+<p class="desc">isPointInPath() works when there is no path</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("isPointInPath() works when there is no path");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.isPointInPath(0, 0), false, "ctx.isPointInPath(0, 0)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.nonfinite.html
new file mode 100644
index 0000000000..4ef541a431
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.nonfinite.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.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.path.isPointInPath.nonfinite</h1>
+<p class="desc">isPointInPath() returns false for non-finite arguments</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("isPointInPath() returns false for non-finite arguments");
+_addTest(function(canvas, ctx) {
+
+  ctx.rect(-100, -50, 200, 100);
+  _assertSame(ctx.isPointInPath(Infinity, 0), false, "ctx.isPointInPath(Infinity, 0)", "false");
+  _assertSame(ctx.isPointInPath(-Infinity, 0), false, "ctx.isPointInPath(-Infinity, 0)", "false");
+  _assertSame(ctx.isPointInPath(NaN, 0), false, "ctx.isPointInPath(NaN, 0)", "false");
+  _assertSame(ctx.isPointInPath(0, Infinity), false, "ctx.isPointInPath(0, Infinity)", "false");
+  _assertSame(ctx.isPointInPath(0, -Infinity), false, "ctx.isPointInPath(0, -Infinity)", "false");
+  _assertSame(ctx.isPointInPath(0, NaN), false, "ctx.isPointInPath(0, NaN)", "false");
+  _assertSame(ctx.isPointInPath(NaN, NaN), false, "ctx.isPointInPath(NaN, NaN)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.outside.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.outside.html
new file mode 100644
index 0000000000..6431879eb6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.outside.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.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.path.isPointInPath.outside</h1>
+<p class="desc">isPointInPath() works on paths outside the canvas</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("isPointInPath() works on paths outside the canvas");
+_addTest(function(canvas, ctx) {
+
+  ctx.rect(0, -100, 20, 20);
+  ctx.rect(20, -10, 20, 20);
+  _assertSame(ctx.isPointInPath(10, -110), false, "ctx.isPointInPath(10, -110)", "false");
+  _assertSame(ctx.isPointInPath(10, -90), true, "ctx.isPointInPath(10, -90)", "true");
+  _assertSame(ctx.isPointInPath(10, -70), false, "ctx.isPointInPath(10, -70)", "false");
+  _assertSame(ctx.isPointInPath(30, -20), false, "ctx.isPointInPath(30, -20)", "false");
+  _assertSame(ctx.isPointInPath(30, 0), true, "ctx.isPointInPath(30, 0)", "true");
+  _assertSame(ctx.isPointInPath(30, 20), false, "ctx.isPointInPath(30, 20)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.subpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.subpath.html
new file mode 100644
index 0000000000..5d664557d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.subpath.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.subpath</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.path.isPointInPath.subpath</h1>
+<p class="desc">isPointInPath() uses the current path, not just the subpath</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("isPointInPath() uses the current path, not just the subpath");
+_addTest(function(canvas, ctx) {
+
+  ctx.rect(0, 0, 20, 20);
+  ctx.beginPath();
+  ctx.rect(20, 0, 20, 20);
+  ctx.closePath();
+  ctx.rect(40, 0, 20, 20);
+  _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false");
+  _assertSame(ctx.isPointInPath(30, 10), true, "ctx.isPointInPath(30, 10)", "true");
+  _assertSame(ctx.isPointInPath(50, 10), true, "ctx.isPointInPath(50, 10)", "true");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.1.html
new file mode 100644
index 0000000000..7268c3255f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.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.path.isPointInPath.transform.1</h1>
+<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.translate(50, 0);
+  ctx.rect(0, 0, 20, 20);
+  _assertSame(ctx.isPointInPath(-40, 10), false, "ctx.isPointInPath(-40, 10)", "false");
+  _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false");
+  _assertSame(ctx.isPointInPath(49, 10), false, "ctx.isPointInPath(49, 10)", "false");
+  _assertSame(ctx.isPointInPath(51, 10), true, "ctx.isPointInPath(51, 10)", "true");
+  _assertSame(ctx.isPointInPath(69, 10), true, "ctx.isPointInPath(69, 10)", "true");
+  _assertSame(ctx.isPointInPath(71, 10), false, "ctx.isPointInPath(71, 10)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.2.html
new file mode 100644
index 0000000000..3adac7a419
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.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.path.isPointInPath.transform.2</h1>
+<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.rect(50, 0, 20, 20);
+  ctx.translate(50, 0);
+  _assertSame(ctx.isPointInPath(-40, 10), false, "ctx.isPointInPath(-40, 10)", "false");
+  _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false");
+  _assertSame(ctx.isPointInPath(49, 10), false, "ctx.isPointInPath(49, 10)", "false");
+  _assertSame(ctx.isPointInPath(51, 10), true, "ctx.isPointInPath(51, 10)", "true");
+  _assertSame(ctx.isPointInPath(69, 10), true, "ctx.isPointInPath(69, 10)", "true");
+  _assertSame(ctx.isPointInPath(71, 10), false, "ctx.isPointInPath(71, 10)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.3.html
new file mode 100644
index 0000000000..8769c8a593
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInPath.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.path.isPointInPath.transform.3</h1>
+<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.scale(-1, 1);
+  ctx.rect(-70, 0, 20, 20);
+  _assertSame(ctx.isPointInPath(-40, 10), false, "ctx.isPointInPath(-40, 10)", "false");
+  _assertSame(ctx.isPointInPath(10, 10), false, "ctx.isPointInPath(10, 10)", "false");
+  _assertSame(ctx.isPointInPath(49, 10), false, "ctx.isPointInPath(49, 10)", "false");
+  _assertSame(ctx.isPointInPath(51, 10), true, "ctx.isPointInPath(51, 10)", "true");
+  _assertSame(ctx.isPointInPath(69, 10), true, "ctx.isPointInPath(69, 10)", "true");
+  _assertSame(ctx.isPointInPath(71, 10), false, "ctx.isPointInPath(71, 10)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.4.html
new file mode 100644
index 0000000000..1bcc0bc3a3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.transform.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.path.isPointInPath.transform.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.path.isPointInPath.transform.4</h1>
+<p class="desc">isPointInPath() handles transformations correctly</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("isPointInPath() handles transformations correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.translate(50, 0);
+  ctx.rect(50, 0, 20, 20);
+  ctx.translate(0, 50);
+  _assertSame(ctx.isPointInPath(60, 10), false, "ctx.isPointInPath(60, 10)", "false");
+  _assertSame(ctx.isPointInPath(110, 10), true, "ctx.isPointInPath(110, 10)", "true");
+  _assertSame(ctx.isPointInPath(110, 60), false, "ctx.isPointInPath(110, 60)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.unclosed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.unclosed.html
new file mode 100644
index 0000000000..2e3b711129
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.unclosed.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.path.isPointInPath.unclosed</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.path.isPointInPath.unclosed</h1>
+<p class="desc">isPointInPath() works on unclosed subpaths</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("isPointInPath() works on unclosed subpaths");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(20, 0);
+  ctx.lineTo(20, 20);
+  ctx.lineTo(0, 20);
+  _assertSame(ctx.isPointInPath(10, 10), true, "ctx.isPointInPath(10, 10)", "true");
+  _assertSame(ctx.isPointInPath(30, 10), false, "ctx.isPointInPath(30, 10)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.winding.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.winding.html
new file mode 100644
index 0000000000..ec22570797
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInPath.winding.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.path.isPointInPath.winding</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.path.isPointInPath.winding</h1>
+<p class="desc">isPointInPath() uses the non-zero winding number rule</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("isPointInPath() uses the non-zero winding number rule");
+_addTest(function(canvas, ctx) {
+
+  // Create a square ring, using opposite windings to make a hole in the centre
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 0);
+  ctx.lineTo(50, 50);
+  ctx.lineTo(0, 50);
+  ctx.lineTo(0, 0);
+  ctx.lineTo(10, 10);
+  ctx.lineTo(10, 40);
+  ctx.lineTo(40, 40);
+  ctx.lineTo(40, 10);
+  ctx.lineTo(10, 10);
+
+  _assertSame(ctx.isPointInPath(5, 5), true, "ctx.isPointInPath(5, 5)", "true");
+  _assertSame(ctx.isPointInPath(25, 5), true, "ctx.isPointInPath(25, 5)", "true");
+  _assertSame(ctx.isPointInPath(45, 5), true, "ctx.isPointInPath(45, 5)", "true");
+  _assertSame(ctx.isPointInPath(5, 25), true, "ctx.isPointInPath(5, 25)", "true");
+  _assertSame(ctx.isPointInPath(25, 25), false, "ctx.isPointInPath(25, 25)", "false");
+  _assertSame(ctx.isPointInPath(45, 25), true, "ctx.isPointInPath(45, 25)", "true");
+  _assertSame(ctx.isPointInPath(5, 45), true, "ctx.isPointInPath(5, 45)", "true");
+  _assertSame(ctx.isPointInPath(25, 45), true, "ctx.isPointInPath(25, 45)", "true");
+  _assertSame(ctx.isPointInPath(45, 45), true, "ctx.isPointInPath(45, 45)", "true");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInStroke.scaleddashes.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInStroke.scaleddashes.html
new file mode 100644
index 0000000000..e27baa1549
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInStroke.scaleddashes.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.path.isPointInStroke.scaleddashes</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.path.isPointInStroke.scaleddashes</h1>
+<p class="desc">isPointInStroke() should return correct results on dashed paths at high scale factors</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("isPointInStroke() should return correct results on dashed paths at high scale factors");
+_addTest(function(canvas, ctx) {
+
+  var scale = 20;
+  ctx.setLineDash([10, 21.4159]); // dash from t=0 to t=10 along the circle
+  ctx.scale(scale, scale);
+  ctx.ellipse(6, 10, 5, 5, 0, 2*Math.PI, false);
+  ctx.stroke();
+
+  // hit-test the beginning of the dash (t=0)
+  _assertSame(ctx.isPointInStroke(11*scale, 10*scale), true, "ctx.isPointInStroke(11*scale, 10*scale)", "true");
+  // hit-test the middle of the dash (t=5)
+  _assertSame(ctx.isPointInStroke(8.70*scale, 14.21*scale), true, "ctx.isPointInStroke(8.70*scale, 14.21*scale)", "true");
+  // hit-test the end of the dash (t=9.8)
+  _assertSame(ctx.isPointInStroke(4.10*scale, 14.63*scale), true, "ctx.isPointInStroke(4.10*scale, 14.63*scale)", "true");
+  // hit-test past the end of the dash (t=10.2)
+  _assertSame(ctx.isPointInStroke(3.74*scale, 14.46*scale), false, "ctx.isPointInStroke(3.74*scale, 14.46*scale)", "false");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.invalid.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.invalid.html
new file mode 100644
index 0000000000..301c7c447d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.invalid.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.isPointInpath.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.path.isPointInpath.invalid</h1>
+<p class="desc">Verify isPointInPath throws exceptions 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("Verify isPointInPath throws exceptions with invalid inputs.");
+_addTest(function(canvas, ctx) {
+
+  canvas.width = 200;
+  canvas.height = 200;
+  path = new Path2D();
+  path.rect(0, 0, 100, 100);
+  path.rect(25, 25, 50, 50);
+  // Testing invalid enumeration isPointInPath (w/ and w/o Path object');
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(path, 50, 50, 'gazonk'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(50, 50, 'gazonk'); });
+
+  // Testing invalid type isPointInPath with Path object');
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50, 'nonzero'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50, 'evenodd'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(null, 50, 50, null); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(path, 50, 50, null); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50, 'nonzero'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50, 'evenodd'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath(undefined, 50, 50, undefined); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath([], 50, 50); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath([], 50, 50, 'nonzero'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath([], 50, 50, 'evenodd'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath({}, 50, 50); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath({}, 50, 50, 'nonzero'); });
+  assert_throws_js(TypeError, function() { ctx.isPointInPath({}, 50, 50, 'evenodd'); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.multi.path.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.multi.path.html
new file mode 100644
index 0000000000..d71bd8a4c4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.isPointInpath.multi.path.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.path.isPointInpath.multi.path</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.path.isPointInpath.multi.path</h1>
+<p class="desc">Verify the winding rule in isPointInPath works for path object.</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("Verify the winding rule in isPointInPath works for path object.");
+_addTest(function(canvas, ctx) {
+
+  canvas.width = 200;
+  canvas.height = 200;
+
+  // Testing default isPointInPath with Path object');
+  path = new Path2D();
+  path.rect(0, 0, 100, 100);
+  path.rect(25, 25, 50, 50);
+  _assertSame(ctx.isPointInPath(path, 50, 50), true, "ctx.isPointInPath(path, 50, 50)", "true");
+  _assertSame(ctx.isPointInPath(path, 50, 50, undefined), true, "ctx.isPointInPath(path, 50, 50, undefined)", "true");
+  _assertSame(ctx.isPointInPath(path, NaN, 50), false, "ctx.isPointInPath(path, NaN, 50)", "false");
+  _assertSame(ctx.isPointInPath(path, 50, NaN), false, "ctx.isPointInPath(path, 50, NaN)", "false");
+
+  // Testing nonzero isPointInPath with Path object');
+  path = new Path2D();
+  path.rect(0, 0, 100, 100);
+  path.rect(25, 25, 50, 50);
+  _assertSame(ctx.isPointInPath(path, 50, 50, 'nonzero'), true, "ctx.isPointInPath(path, 50, 50, 'nonzero')", "true");
+
+  // Testing evenodd isPointInPath with Path object');
+  path = new Path2D();
+  path.rect(0, 0, 100, 100);
+  path.rect(25, 25, 50, 50);
+  assert_false(ctx.isPointInPath(path, 50, 50, 'evenodd'));
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.basic.html
new file mode 100644
index 0000000000..c6f2caa196
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.basic.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.path.lineTo.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.path.lineTo.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);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.lineTo(100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.1.html
new file mode 100644
index 0000000000..ada8f0ca29
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.lineTo.ensuresubpath.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.path.lineTo.ensuresubpath.1</h1>
+<p class="desc">If there is no subpath, the point is added and nothing is drawn</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("If there is no subpath, the point is added and nothing is drawn");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.lineTo(100, 50);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.2.html
new file mode 100644
index 0000000000..ac1f9238ff
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.ensuresubpath.2.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.path.lineTo.ensuresubpath.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.path.lineTo.ensuresubpath.2</h1>
+<p class="desc">If there is no subpath, the point is added and used for subsequent drawing</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("If there is no subpath, the point is added and used for subsequent drawing");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.lineTo(0, 25);
+  ctx.lineTo(100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nextpoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nextpoint.html
new file mode 100644
index 0000000000..f403c6b508
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nextpoint.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.path.lineTo.nextpoint</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.path.lineTo.nextpoint</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.moveTo(-100, -100);
+  ctx.lineTo(0, 25);
+  ctx.lineTo(100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.details.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.details.html
new file mode 100644
index 0000000000..d7595db7d1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.details.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.path.lineTo.nonfinite.details</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.path.lineTo.nonfinite.details</h1>
+<p class="desc">lineTo() with Infinity/NaN for first arg still converts the second arg</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/clear-100x50.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("lineTo() with Infinity/NaN for first arg still converts the second arg");
+_addTest(function(canvas, ctx) {
+
+  for (var arg1 of [Infinity, -Infinity, NaN]) {
+    var converted = false;
+    ctx.lineTo(arg1, { valueOf: function() { converted = true; return 0; } });
+    _assert(converted, "converted");
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.html
new file mode 100644
index 0000000000..8246064ea3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.lineTo.nonfinite.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.path.lineTo.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.path.lineTo.nonfinite</h1>
+<p class="desc">lineTo() with Infinity/NaN is ignored</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("lineTo() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.lineTo(Infinity, 50);
+  ctx.lineTo(-Infinity, 50);
+  ctx.lineTo(NaN, 50);
+  ctx.lineTo(0, Infinity);
+  ctx.lineTo(0, -Infinity);
+  ctx.lineTo(0, NaN);
+  ctx.lineTo(Infinity, Infinity);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.basic.html
new file mode 100644
index 0000000000..d08d67621e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.basic.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.path.moveTo.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.path.moveTo.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);
+  ctx.rect(0, 0, 10, 50);
+  ctx.moveTo(100, 0);
+  ctx.lineTo(10, 0);
+  ctx.lineTo(10, 50);
+  ctx.lineTo(100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 90,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.multiple.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.multiple.html
new file mode 100644
index 0000000000..384d9fb437
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.multiple.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.path.moveTo.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.path.moveTo.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="/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.moveTo(0, 25);
+  ctx.moveTo(100, 25);
+  ctx.moveTo(0, 25);
+  ctx.lineTo(100, 25);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.newsubpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.newsubpath.html
new file mode 100644
index 0000000000..2a3d69b637
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.newsubpath.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.path.moveTo.newsubpath</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.path.moveTo.newsubpath</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.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.moveTo(100, 0);
+  ctx.moveTo(100, 50);
+  ctx.moveTo(0, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.nonfinite.html
new file mode 100644
index 0000000000..c6cd6f8178
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.moveTo.nonfinite.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.path.moveTo.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.path.moveTo.nonfinite</h1>
+<p class="desc">moveTo() with Infinity/NaN is ignored</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("moveTo() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.moveTo(Infinity, 50);
+  ctx.moveTo(-Infinity, 50);
+  ctx.moveTo(NaN, 50);
+  ctx.moveTo(0, Infinity);
+  ctx.moveTo(0, -Infinity);
+  ctx.moveTo(0, NaN);
+  ctx.moveTo(Infinity, Infinity);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.basic.html
new file mode 100644
index 0000000000..ffbf039440
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.basic.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.path.quadraticCurveTo.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.path.quadraticCurveTo.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);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.moveTo(0, 25);
+  ctx.quadraticCurveTo(100, 25, 100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.1.html
new file mode 100644
index 0000000000..f8b8b515ba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.1.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.path.quadraticCurveTo.ensuresubpath.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.path.quadraticCurveTo.ensuresubpath.1</h1>
+<p class="desc">If there is no subpath, the first control point is added (and nothing is drawn up to it)</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("If there is no subpath, the first control point is added (and nothing is drawn up to it)");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.quadraticCurveTo(100, 50, 200, 50);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 95,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.2.html
new file mode 100644
index 0000000000..189c744c65
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.ensuresubpath.2.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.path.quadraticCurveTo.ensuresubpath.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.path.quadraticCurveTo.ensuresubpath.2</h1>
+<p class="desc">If there is no subpath, the first control point is added</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("If there is no subpath, the first control point is added");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.beginPath();
+  ctx.quadraticCurveTo(0, 25, 100, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 5,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.nonfinite.html
new file mode 100644
index 0000000000..1488e78a00
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.nonfinite.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.quadraticCurveTo.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.path.quadraticCurveTo.nonfinite</h1>
+<p class="desc">quadraticCurveTo() with Infinity/NaN is ignored</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("quadraticCurveTo() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.quadraticCurveTo(Infinity, 50, 0, 50);
+  ctx.quadraticCurveTo(-Infinity, 50, 0, 50);
+  ctx.quadraticCurveTo(NaN, 50, 0, 50);
+  ctx.quadraticCurveTo(0, Infinity, 0, 50);
+  ctx.quadraticCurveTo(0, -Infinity, 0, 50);
+  ctx.quadraticCurveTo(0, NaN, 0, 50);
+  ctx.quadraticCurveTo(0, 50, Infinity, 50);
+  ctx.quadraticCurveTo(0, 50, -Infinity, 50);
+  ctx.quadraticCurveTo(0, 50, NaN, 50);
+  ctx.quadraticCurveTo(0, 50, 0, Infinity);
+  ctx.quadraticCurveTo(0, 50, 0, -Infinity);
+  ctx.quadraticCurveTo(0, 50, 0, NaN);
+  ctx.quadraticCurveTo(Infinity, Infinity, 0, 50);
+  ctx.quadraticCurveTo(Infinity, Infinity, Infinity, 50);
+  ctx.quadraticCurveTo(Infinity, Infinity, Infinity, Infinity);
+  ctx.quadraticCurveTo(Infinity, Infinity, 0, Infinity);
+  ctx.quadraticCurveTo(Infinity, 50, Infinity, 50);
+  ctx.quadraticCurveTo(Infinity, 50, Infinity, Infinity);
+  ctx.quadraticCurveTo(Infinity, 50, 0, Infinity);
+  ctx.quadraticCurveTo(0, Infinity, Infinity, 50);
+  ctx.quadraticCurveTo(0, Infinity, Infinity, Infinity);
+  ctx.quadraticCurveTo(0, Infinity, 0, Infinity);
+  ctx.quadraticCurveTo(0, 50, Infinity, Infinity);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.scaled.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.scaled.html
new file mode 100644
index 0000000000..90973a8f97
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.scaled.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.path.quadraticCurveTo.scaled</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.path.quadraticCurveTo.scaled</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.scale(1000, 1000);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 0.055;
+  ctx.beginPath();
+  ctx.moveTo(-1, 1.05);
+  ctx.quadraticCurveTo(0, -1, 1.2, 1.05);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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/path-objects/2d.path.quadraticCurveTo.shape.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.shape.html
new file mode 100644
index 0000000000..23725c2421
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.quadraticCurveTo.shape.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.path.quadraticCurveTo.shape</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.path.quadraticCurveTo.shape</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 55;
+  ctx.beginPath();
+  ctx.moveTo(-1000, 1050);
+  ctx.quadraticCurveTo(0, -1000, 1200, 1050);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _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/path-objects/2d.path.rect.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.basic.html
new file mode 100644
index 0000000000..716cd29af7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.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.path.rect.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.path.rect.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);
+  ctx.fillStyle = '#0f0';
+  ctx.rect(0, 0, 100, 50);
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.closed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.closed.html
new file mode 100644
index 0000000000..385a88ab7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.closed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.closed</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.path.rect.closed</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 200;
+  ctx.lineJoin = 'miter';
+  ctx.rect(100, 50, 100, 100);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.1.html
new file mode 100644
index 0000000000..e1fd8052d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.end.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.path.rect.end.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.rect(200, 100, 400, 1000);
+  ctx.lineTo(-2000, -1000);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.2.html
new file mode 100644
index 0000000000..d30bb111f1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.end.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.path.rect.end.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.path.rect.end.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 450;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'bevel';
+  ctx.rect(150, 150, 2000, 2000);
+  ctx.lineTo(160, 160);
+  ctx.stroke();
+  _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/path-objects/2d.path.rect.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.negative.html
new file mode 100644
index 0000000000..b917137bae
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.negative.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.path.rect.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.path.rect.negative</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.fillRect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.fillStyle = '#0f0';
+  ctx.rect(0, 0, 50, 25);
+  ctx.rect(100, 0, -50, 25);
+  ctx.rect(0, 50, 50, -25);
+  ctx.rect(100, 50, -50, -25);
+  ctx.fill();
+  _assertPixel(canvas, 25,12, 0,255,0,255);
+  _assertPixel(canvas, 75,12, 0,255,0,255);
+  _assertPixel(canvas, 25,37, 0,255,0,255);
+  _assertPixel(canvas, 75,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.newsubpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.newsubpath.html
new file mode 100644
index 0000000000..32b70ff2d8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.newsubpath.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.path.rect.newsubpath</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.path.rect.newsubpath</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.beginPath();
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.moveTo(-100, 25);
+  ctx.lineTo(-50, 25);
+  ctx.rect(200, 25, 1, 1);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.nonfinite.html
new file mode 100644
index 0000000000..c0d245a49c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.nonfinite.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.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.path.rect.nonfinite</h1>
+<p class="desc">rect() with Infinity/NaN is ignored</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("rect() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.rect(Infinity, 50, 1, 1);
+  ctx.rect(-Infinity, 50, 1, 1);
+  ctx.rect(NaN, 50, 1, 1);
+  ctx.rect(0, Infinity, 1, 1);
+  ctx.rect(0, -Infinity, 1, 1);
+  ctx.rect(0, NaN, 1, 1);
+  ctx.rect(0, 50, Infinity, 1);
+  ctx.rect(0, 50, -Infinity, 1);
+  ctx.rect(0, 50, NaN, 1);
+  ctx.rect(0, 50, 1, Infinity);
+  ctx.rect(0, 50, 1, -Infinity);
+  ctx.rect(0, 50, 1, NaN);
+  ctx.rect(Infinity, Infinity, 1, 1);
+  ctx.rect(Infinity, Infinity, Infinity, 1);
+  ctx.rect(Infinity, Infinity, Infinity, Infinity);
+  ctx.rect(Infinity, Infinity, 1, Infinity);
+  ctx.rect(Infinity, 50, Infinity, 1);
+  ctx.rect(Infinity, 50, Infinity, Infinity);
+  ctx.rect(Infinity, 50, 1, Infinity);
+  ctx.rect(0, Infinity, Infinity, 1);
+  ctx.rect(0, Infinity, Infinity, Infinity);
+  ctx.rect(0, Infinity, 1, Infinity);
+  ctx.rect(0, 50, Infinity, Infinity);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.selfintersect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.selfintersect.html
new file mode 100644
index 0000000000..8ebbf0c1f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.selfintersect.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.selfintersect</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.path.rect.selfintersect</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 90;
+  ctx.beginPath();
+  ctx.rect(45, 20, 10, 10);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.winding.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.winding.html
new file mode 100644
index 0000000000..d7350ef38c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.winding.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.path.rect.winding</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.path.rect.winding</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 = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.fillStyle = '#f00';
+  ctx.rect(0, 0, 50, 50);
+  ctx.rect(100, 50, -50, -50);
+  ctx.rect(0, 25, 100, -25);
+  ctx.rect(100, 25, -100, 25);
+  ctx.fill();
+  _assertPixel(canvas, 25,12, 0,255,0,255);
+  _assertPixel(canvas, 75,12, 0,255,0,255);
+  _assertPixel(canvas, 25,37, 0,255,0,255);
+  _assertPixel(canvas, 75,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.1.html
new file mode 100644
index 0000000000..c773ef61d0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.zero.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.path.rect.zero.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.rect(0, 50, 100, 0);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.2.html
new file mode 100644
index 0000000000..5888231fc6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.zero.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.path.rect.zero.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.rect(50, -100, 0, 250);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.3.html
new file mode 100644
index 0000000000..c000b008fb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.zero.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.path.rect.zero.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';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.rect(50, 25, 0, 0);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.4.html
new file mode 100644
index 0000000000..bb3ecb3aa5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.4.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.zero.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.path.rect.zero.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.rect(100, 25, 0, 0);
+  ctx.lineTo(0, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.5.html
new file mode 100644
index 0000000000..081c753d91
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.5.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.rect.zero.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.path.rect.zero.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';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.moveTo(0, 0);
+  ctx.rect(100, 25, 0, 0);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.6.html
new file mode 100644
index 0000000000..dafb273d56
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.rect.zero.6.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.path.rect.zero.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.path.rect.zero.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';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineJoin = 'miter';
+  ctx.miterLimit = 1.5;
+  ctx.lineWidth = 200;
+  ctx.beginPath();
+  ctx.rect(100, 25, 1000, 0);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.html
new file mode 100644
index 0000000000..3bb890ae96
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.1.radius.dompoint</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.path.roundrect.1.radius.dompoint</h1>
+<p class="desc">Verify that when one radius is given to roundRect(), specified as a DOMPoint, it applies to all corners.</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("Verify that when one radius is given to roundRect(), specified as a DOMPoint, it applies to all corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20)]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.single argument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.single argument.html
new file mode 100644
index 0000000000..96e933870b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompoint.single argument.html	
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.1.radius.dompoint.single argument</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.path.roundrect.1.radius.dompoint.single argument</h1>
+<p class="desc">Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPoint, it applies to all corners.</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("Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPoint, it applies to all corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, new DOMPoint(40, 20));
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.html
new file mode 100644
index 0000000000..1315233d79
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.1.radius.dompointinit</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.path.roundrect.1.radius.dompointinit</h1>
+<p class="desc">Verify that when one radius is given to roundRect(), specified as a DOMPointInit, applies to all corners.</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("Verify that when one radius is given to roundRect(), specified as a DOMPointInit, applies to all corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.single.argument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.single.argument.html
new file mode 100644
index 0000000000..f5c6d00959
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.dompointinit.single.argument.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.1.radius.dompointinit.single.argument</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.path.roundrect.1.radius.dompointinit.single.argument</h1>
+<p class="desc">Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPointInit, applies to all corners.</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("Verify that when one radius is given to roundRect() as a non-array argument, specified as a DOMPointInit, applies to all corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, {x: 40, y: 20});
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.html
new file mode 100644
index 0000000000..402631a7a0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.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.path.roundrect.1.radius.double</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.path.roundrect.1.radius.double</h1>
+<p class="desc">Verify that when one radius is given to roundRect(), specified as a double, it applies to all corners.</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("Verify that when one radius is given to roundRect(), specified as a double, it applies to all corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [20]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.single.argument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.single.argument.html
new file mode 100644
index 0000000000..ed4887c2de
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.1.radius.double.single.argument.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.path.roundrect.1.radius.double.single.argument</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.path.roundrect.1.radius.double.single.argument</h1>
+<p class="desc">Verify that when one radius is given to roundRect() as a non-array argument, specified as a double, it applies to all corners.</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("Verify that when one radius is given to roundRect() as a non-array argument, specified as a double, it applies to all corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, 20);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompoint.html
new file mode 100644
index 0000000000..00a9c14582
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompoint.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.path.roundrect.2.radii.1.dompoint</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.path.roundrect.2.radii.1.dompoint</h1>
+<p class="desc">Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left and bottom-right corners.</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("Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left and bottom-right corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20), 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompointinit.html
new file mode 100644
index 0000000000..e9b3a7bf79
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.dompointinit.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.path.roundrect.2.radii.1.dompointinit</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.path.roundrect.2.radii.1.dompointinit</h1>
+<p class="desc">Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left and bottom-right corners.</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("Verify that when two radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left and bottom-right corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.double.html
new file mode 100644
index 0000000000..a2f02104e2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.1.double.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.path.roundrect.2.radii.1.double</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.path.roundrect.2.radii.1.double</h1>
+<p class="desc">Verify that when two radii are given to roundRect(), the first radius, specified as a double, applies to the top-left and bottom-right corners.</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("Verify that when two radii are given to roundRect(), the first radius, specified as a double, applies to the top-left and bottom-right corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [20, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompoint.html
new file mode 100644
index 0000000000..57df30d5ae
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompoint.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.path.roundrect.2.radii.2.dompoint</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.path.roundrect.2.radii.2.dompoint</h1>
+<p class="desc">Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.</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("Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, new DOMPoint(40, 20)]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompointinit.html
new file mode 100644
index 0000000000..5942ab750f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.dompointinit.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.path.roundrect.2.radii.2.dompointinit</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.path.roundrect.2.radii.2.dompointinit</h1>
+<p class="desc">Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right and bottom-left corners.</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("Verify that when two radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right and bottom-left corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, {x: 40, y: 20}]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.double.html
new file mode 100644
index 0000000000..2390a61dfd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.2.radii.2.double.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.path.roundrect.2.radii.2.double</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.path.roundrect.2.radii.2.double</h1>
+<p class="desc">Verify that when two radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners.</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("Verify that when two radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 20]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompoint.html
new file mode 100644
index 0000000000..f4fa76afac
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompoint.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.path.roundrect.3.radii.1.dompoint</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.path.roundrect.3.radii.1.dompoint</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner.</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("Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20), 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompointinit.html
new file mode 100644
index 0000000000..4e7dc947f4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.dompointinit.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.path.roundrect.3.radii.1.dompointinit</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.path.roundrect.3.radii.1.dompointinit</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner.</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("Verify that when three radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}, 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.double.html
new file mode 100644
index 0000000000..d7888da6d9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.1.double.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.path.roundrect.3.radii.1.double</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.path.roundrect.3.radii.1.double</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner.</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("Verify that when three radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [20, 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompoint.html
new file mode 100644
index 0000000000..38a8baac53
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompoint.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.path.roundrect.3.radii.2.dompoint</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.path.roundrect.3.radii.2.dompoint</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.</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("Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, new DOMPoint(40, 20), 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompointinit.html
new file mode 100644
index 0000000000..5e867caf42
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.dompointinit.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.path.roundrect.3.radii.2.dompointinit</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.path.roundrect.3.radii.2.dompointinit</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.</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("Verify that when three radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right and bottom-left corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, {x: 40, y: 20}, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.double.html
new file mode 100644
index 0000000000..41edff205c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.2.double.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.path.roundrect.3.radii.2.double</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.path.roundrect.3.radii.2.double</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners.</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("Verify that when three radii are given to roundRect(), the second radius, specified as a double, applies to the top-right and bottom-left corners.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 20, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompoint.html
new file mode 100644
index 0000000000..6d6a1a6ae0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompoint.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.path.roundrect.3.radii.3.dompoint</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.path.roundrect.3.radii.3.dompoint</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner.</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("Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, new DOMPoint(40, 20)]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompointinit.html
new file mode 100644
index 0000000000..132420e343
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.dompointinit.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.path.roundrect.3.radii.3.dompointinit</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.path.roundrect.3.radii.3.dompointinit</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner.</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("Verify that when three radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, {x: 40, y: 20}]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.double.html
new file mode 100644
index 0000000000..75a8e924ff
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.3.radii.3.double.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.path.roundrect.3.radii.3.double</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.path.roundrect.3.radii.3.double</h1>
+<p class="desc">Verify that when three radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner.</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("Verify that when three radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, 20]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompoint.html
new file mode 100644
index 0000000000..b681b59f4e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompoint.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.path.roundrect.4.radii.1.dompoint</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.path.roundrect.4.radii.1.dompoint</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner.</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("Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPoint, applies to the top-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [new DOMPoint(40, 20), 0, 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompointinit.html
new file mode 100644
index 0000000000..e5542894b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.dompointinit.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.path.roundrect.4.radii.1.dompointinit</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.path.roundrect.4.radii.1.dompointinit</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner.</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("Verify that when four radii are given to roundRect(), the first radius, specified as a DOMPointInit, applies to the top-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [{x: 40, y: 20}, 0, 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-left corner
+  _assertPixel(canvas, 20,1, 255,0,0,255);
+  _assertPixel(canvas, 41,1, 0,255,0,255);
+  _assertPixel(canvas, 1,10, 255,0,0,255);
+  _assertPixel(canvas, 1,21, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.double.html
new file mode 100644
index 0000000000..028effa82b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.1.double.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.path.roundrect.4.radii.1.double</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.path.roundrect.4.radii.1.double</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner.</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("Verify that when four radii are given to roundRect(), the first radius, specified as a double, applies to the top-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [20, 0, 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompoint.html
new file mode 100644
index 0000000000..d3c16eb493
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompoint.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.path.roundrect.4.radii.2.dompoint</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.path.roundrect.4.radii.2.dompoint</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right corner.</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("Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPoint, applies to the top-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, new DOMPoint(40, 20), 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompointinit.html
new file mode 100644
index 0000000000..ab5ad3f4da
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.dompointinit.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.path.roundrect.4.radii.2.dompointinit</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.path.roundrect.4.radii.2.dompointinit</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right corner.</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("Verify that when four radii are given to roundRect(), the second radius, specified as a DOMPointInit, applies to the top-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, {x: 40, y: 20}, 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // top-right corner
+  _assertPixel(canvas, 79,1, 255,0,0,255);
+  _assertPixel(canvas, 58,1, 0,255,0,255);
+  _assertPixel(canvas, 98,10, 255,0,0,255);
+  _assertPixel(canvas, 98,21, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.double.html
new file mode 100644
index 0000000000..ec229e396a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.2.double.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.path.roundrect.4.radii.2.double</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.path.roundrect.4.radii.2.double</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the second radius, specified as a double, applies to the top-right corner.</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("Verify that when four radii are given to roundRect(), the second radius, specified as a double, applies to the top-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 20, 0, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompoint.html
new file mode 100644
index 0000000000..5367543fa3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompoint.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.path.roundrect.4.radii.3.dompoint</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.path.roundrect.4.radii.3.dompoint</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner.</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("Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPoint, applies to the bottom-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, new DOMPoint(40, 20), 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompointinit.html
new file mode 100644
index 0000000000..89df524d53
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.dompointinit.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.path.roundrect.4.radii.3.dompointinit</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.path.roundrect.4.radii.3.dompointinit</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner.</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("Verify that when four radii are given to roundRect(), the third radius, specified as a DOMPointInit, applies to the bottom-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, {x: 40, y: 20}, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // bottom-right corner
+  _assertPixel(canvas, 79,48, 255,0,0,255);
+  _assertPixel(canvas, 58,48, 0,255,0,255);
+  _assertPixel(canvas, 98,39, 255,0,0,255);
+  _assertPixel(canvas, 98,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.double.html
new file mode 100644
index 0000000000..22ba747b37
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.3.double.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.path.roundrect.4.radii.3.double</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.path.roundrect.4.radii.3.double</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner.</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("Verify that when four radii are given to roundRect(), the third radius, specified as a double, applies to the bottom-right corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, 20, 0]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompoint.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompoint.html
new file mode 100644
index 0000000000..b15c291884
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompoint.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.path.roundrect.4.radii.4.dompoint</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.path.roundrect.4.radii.4.dompoint</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPoint, applies to the bottom-left corner.</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("Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPoint, applies to the bottom-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, 0, new DOMPoint(40, 20)]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompointinit.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompointinit.html
new file mode 100644
index 0000000000..d9b03a1225
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.dompointinit.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.path.roundrect.4.radii.4.dompointinit</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.path.roundrect.4.radii.4.dompointinit</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPointInit, applies to the bottom-left corner.</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("Verify that when four radii are given to roundRect(), the fourth radius, specified as a DOMPointInit, applies to the bottom-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, 0, {x: 40, y: 20}]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  // bottom-left corner
+  _assertPixel(canvas, 20,48, 255,0,0,255);
+  _assertPixel(canvas, 41,48, 0,255,0,255);
+  _assertPixel(canvas, 1,39, 255,0,0,255);
+  _assertPixel(canvas, 1,28, 0,255,0,255);
+
+  // other corners
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.double.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.double.html
new file mode 100644
index 0000000000..62ccf85958
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.4.radii.4.double.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.path.roundrect.4.radii.4.double</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.path.roundrect.4.radii.4.double</h1>
+<p class="desc">Verify that when four radii are given to roundRect(), the fourth radius, specified as a double, applies to the bottom-left corner.</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("Verify that when four radii are given to roundRect(), the fourth radius, specified as a double, applies to the bottom-left corner.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [0, 0, 0, 20]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 98,1, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.badinput.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.badinput.html
new file mode 100644
index 0000000000..39e1d0c655
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.badinput.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.badinput</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.path.roundrect.badinput</h1>
+<p class="desc">roundRect() throws or does not throw errors given the strange 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("roundRect() throws or does not throw errors given the strange inputs.");
+_addTest(function(canvas, ctx) {
+
+  ctx.roundRect(0, 0, 100, 100, { foo: "bar" });  //=> DOMPointInit
+  ctx.roundRect(0, 0, 100, 100, undefined);       //=> "missing" -> 0
+  ctx.roundRect(0, 0, 100, 100, [[]]);            //=> « DOMPointInit »
+  ctx.roundRect(0, 0, 100, 100, [[25]]);          //=> « DOMPointInit »
+  ctx.roundRect(0, 0, 100, 100, [undefined]);     //=> « DOMPointInit »
+  assert_throws_js(TypeError, function() { ctx.roundRect(0, 0, 100, 100, 0n); });
+  assert_throws_js(TypeError, function() { ctx.roundRect(0, 0, 100, 100, { x: 0n }); });
+  assert_throws_js(TypeError, function() { ctx.roundRect(0, 0, 100, 100, [{ x: 0n }]); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.closed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.closed.html
new file mode 100644
index 0000000000..89aeb3b865
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.closed.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.closed</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.path.roundrect.closed</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.strokeStyle = '#0f0';
+  ctx.lineWidth = 200;
+  ctx.lineJoin = 'miter';
+  ctx.roundRect(100, 50, 100, 100, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.1.html
new file mode 100644
index 0000000000..be98ce5841
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.end.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.path.roundrect.end.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.roundRect(200, 100, 400, 1000, [0]);
+  ctx.lineTo(-2000, -1000);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.2.html
new file mode 100644
index 0000000000..16131ad345
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.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.path.roundrect.end.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.path.roundrect.end.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 450;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'bevel';
+  ctx.roundRect(150, 150, 2000, 2000, [0]);
+  ctx.lineTo(160, 160);
+  ctx.stroke();
+  _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/path-objects/2d.path.roundrect.end.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.3.html
new file mode 100644
index 0000000000..f9454080eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.3.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.path.roundrect.end.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.path.roundrect.end.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.roundRect(101, 51, 2000, 2000, [500, 500, 500, 500]);
+  ctx.lineTo(-1, -1);
+  ctx.stroke();
+  _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/path-objects/2d.path.roundrect.end.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.4.html
new file mode 100644
index 0000000000..52d49c32e7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.end.4.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.path.roundrect.end.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.path.roundrect.end.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';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 10;
+  ctx.roundRect(-1, -1, 2000, 2000, [1000, 1000, 1000, 1000]);
+  ctx.lineTo(-150, -150);
+  ctx.stroke();
+  _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/path-objects/2d.path.roundrect.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.negative.html
new file mode 100644
index 0000000000..66e1172432
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.negative.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.path.roundrect.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.path.roundrect.negative</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.fillRect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.fillStyle = '#0f0';
+  ctx.roundRect(0, 0, 50, 25, [10, 0, 0, 0]);
+  ctx.roundRect(100, 0, -50, 25, [10, 0, 0, 0]);
+  ctx.roundRect(0, 50, 50, -25, [10, 0, 0, 0]);
+  ctx.roundRect(100, 50, -50, -25, [10, 0, 0, 0]);
+  ctx.fill();
+  // All rects drawn
+  _assertPixel(canvas, 25,12, 0,255,0,255);
+  _assertPixel(canvas, 75,12, 0,255,0,255);
+  _assertPixel(canvas, 25,37, 0,255,0,255);
+  _assertPixel(canvas, 75,37, 0,255,0,255);
+  // Correct corners are rounded.
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.newsubpath.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.newsubpath.html
new file mode 100644
index 0000000000..df3990a376
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.newsubpath.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.path.roundrect.newsubpath</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.path.roundrect.newsubpath</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.beginPath();
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.moveTo(-100, 25);
+  ctx.lineTo(-50, 25);
+  ctx.roundRect(200, 25, 1, 1, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.nonfinite.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.nonfinite.html
new file mode 100644
index 0000000000..5f0f0b6eaf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.nonfinite.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.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.path.roundrect.nonfinite</h1>
+<p class="desc">roundRect() with Infinity/NaN is ignored</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("roundRect() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+  ctx.roundRect(Infinity, 50, 1, 1, [0]);
+  ctx.roundRect(-Infinity, 50, 1, 1, [0]);
+  ctx.roundRect(NaN, 50, 1, 1, [0]);
+  ctx.roundRect(0, Infinity, 1, 1, [0]);
+  ctx.roundRect(0, -Infinity, 1, 1, [0]);
+  ctx.roundRect(0, NaN, 1, 1, [0]);
+  ctx.roundRect(0, 50, Infinity, 1, [0]);
+  ctx.roundRect(0, 50, -Infinity, 1, [0]);
+  ctx.roundRect(0, 50, NaN, 1, [0]);
+  ctx.roundRect(0, 50, 1, Infinity, [0]);
+  ctx.roundRect(0, 50, 1, -Infinity, [0]);
+  ctx.roundRect(0, 50, 1, NaN, [0]);
+  ctx.roundRect(0, 50, 1, 1, [Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [-Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [NaN]);
+  ctx.roundRect(0, 50, 1, 1, [Infinity,0]);
+  ctx.roundRect(0, 50, 1, 1, [-Infinity,0]);
+  ctx.roundRect(0, 50, 1, 1, [NaN,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [0,-Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [0,NaN]);
+  ctx.roundRect(0, 50, 1, 1, [Infinity,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [-Infinity,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [NaN,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,Infinity,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,-Infinity,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,NaN,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,-Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,NaN]);
+  ctx.roundRect(0, 50, 1, 1, [Infinity,0,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [-Infinity,0,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [NaN,0,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,Infinity,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,-Infinity,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,NaN,0,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,Infinity,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,-Infinity,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,NaN,0]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,0,Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,0,-Infinity]);
+  ctx.roundRect(0, 50, 1, 1, [0,0,0,NaN]);
+  ctx.roundRect(Infinity, Infinity, 1, 1, [0]);
+  ctx.roundRect(Infinity, Infinity, Infinity, 1, [0]);
+  ctx.roundRect(Infinity, Infinity, Infinity, Infinity, [0]);
+  ctx.roundRect(Infinity, Infinity, Infinity, Infinity, [Infinity]);
+  ctx.roundRect(Infinity, Infinity, Infinity, 1, [Infinity]);
+  ctx.roundRect(Infinity, Infinity, 1, Infinity, [0]);
+  ctx.roundRect(Infinity, Infinity, 1, Infinity, [Infinity]);
+  ctx.roundRect(Infinity, Infinity, 1, 1, [Infinity]);
+  ctx.roundRect(Infinity, 50, Infinity, 1, [0]);
+  ctx.roundRect(Infinity, 50, Infinity, Infinity, [0]);
+  ctx.roundRect(Infinity, 50, Infinity, Infinity, [Infinity]);
+  ctx.roundRect(Infinity, 50, Infinity, 1, [Infinity]);
+  ctx.roundRect(Infinity, 50, 1, Infinity, [0]);
+  ctx.roundRect(Infinity, 50, 1, Infinity, [Infinity]);
+  ctx.roundRect(Infinity, 50, 1, 1, [Infinity]);
+  ctx.roundRect(0, Infinity, Infinity, 1, [0]);
+  ctx.roundRect(0, Infinity, Infinity, Infinity, [0]);
+  ctx.roundRect(0, Infinity, Infinity, Infinity, [Infinity]);
+  ctx.roundRect(0, Infinity, Infinity, 1, [Infinity]);
+  ctx.roundRect(0, Infinity, 1, Infinity, [0]);
+  ctx.roundRect(0, Infinity, 1, Infinity, [Infinity]);
+  ctx.roundRect(0, Infinity, 1, 1, [Infinity]);
+  ctx.roundRect(0, 50, Infinity, Infinity, [0]);
+  ctx.roundRect(0, 50, Infinity, Infinity, [Infinity]);
+  ctx.roundRect(0, 50, Infinity, 1, [Infinity]);
+  ctx.roundRect(0, 50, 1, Infinity, [Infinity]);
+  ctx.roundRect(0, 0, 100, 100, [new DOMPoint(10, Infinity)]);
+  ctx.roundRect(0, 0, 100, 100, [new DOMPoint(10, -Infinity)]);
+  ctx.roundRect(0, 0, 100, 100, [new DOMPoint(10, NaN)]);
+  ctx.roundRect(0, 0, 100, 100, [new DOMPoint(Infinity, 10)]);
+  ctx.roundRect(0, 0, 100, 100, [new DOMPoint(-Infinity, 10)]);
+  ctx.roundRect(0, 0, 100, 100, [new DOMPoint(NaN, 10)]);
+  ctx.roundRect(0, 0, 100, 100, [{x: 10, y: Infinity}]);
+  ctx.roundRect(0, 0, 100, 100, [{x: 10, y: -Infinity}]);
+  ctx.roundRect(0, 0, 100, 100, [{x: 10, y: NaN}]);
+  ctx.roundRect(0, 0, 100, 100, [{x: Infinity, y: 10}]);
+  ctx.roundRect(0, 0, 100, 100, [{x: -Infinity, y: 10}]);
+  ctx.roundRect(0, 0, 100, 100, [{x: NaN, y: 10}]);
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 90,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.1.html
new file mode 100644
index 0000000000..913b17e45e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.1.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.path.roundrect.radius.intersecting.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.path.roundrect.radius.intersecting.1</h1>
+<p class="desc">Check that roundRects with intersecting corner arcs are rendered correctly.</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("Check that roundRects with intersecting corner arcs are rendered correctly.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [40, 40, 40, 40]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 2,25, 0,255,0,255);
+  _assertPixel(canvas, 50,1, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 50,48, 0,255,0,255);
+  _assertPixel(canvas, 97,25, 0,255,0,255);
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.2.html
new file mode 100644
index 0000000000..abd7f86088
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.intersecting.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.path.roundrect.radius.intersecting.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.path.roundrect.radius.intersecting.2</h1>
+<p class="desc">Check that roundRects with intersecting corner arcs are rendered correctly.</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("Check that roundRects with intersecting corner arcs are rendered correctly.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(0, 0, 100, 50, [1000, 1000, 1000, 1000]);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 2,25, 0,255,0,255);
+  _assertPixel(canvas, 50,1, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 50,48, 0,255,0,255);
+  _assertPixel(canvas, 97,25, 0,255,0,255);
+  _assertPixel(canvas, 1,1, 255,0,0,255);
+  _assertPixel(canvas, 98,1, 255,0,0,255);
+  _assertPixel(canvas, 1,48, 255,0,0,255);
+  _assertPixel(canvas, 98,48, 255,0,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.negative.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.negative.html
new file mode 100644
index 0000000000..ac2532dcfe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.negative.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.path.roundrect.radius.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.path.roundrect.radius.negative</h1>
+<p class="desc">roundRect() with negative radius throws an exception</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("roundRect() with negative radius throws an exception");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [-1])});
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [1, -1])});
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [new DOMPoint(-1, 1), 1])});
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [new DOMPoint(1, -1)])});
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [{x: -1, y: 1}, 1])});
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 0, 0, [{x: 1, y: -1}])});
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noargument.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noargument.html
new file mode 100644
index 0000000000..cfaf87ecf2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noargument.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.path.roundrect.radius.noargument</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.path.roundrect.radius.noargument</h1>
+<p class="desc">Check that roundRect draws a rectangle when no radii are provided.</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("Check that roundRect draws a rectangle when no radii are provided.");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.roundRect(10, 10, 80, 30);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  // upper left corner (10, 10)
+  _assertPixel(canvas, 10,9, 255,0,0,255);
+  _assertPixel(canvas, 9,10, 255,0,0,255);
+  _assertPixel(canvas, 10,10, 0,255,0,255);
+
+  // upper right corner (89, 10)
+  _assertPixel(canvas, 90,10, 255,0,0,255);
+  _assertPixel(canvas, 89,9, 255,0,0,255);
+  _assertPixel(canvas, 89,10, 0,255,0,255);
+
+  // lower right corner (89, 39)
+  _assertPixel(canvas, 89,40, 255,0,0,255);
+  _assertPixel(canvas, 90,39, 255,0,0,255);
+  _assertPixel(canvas, 89,39, 0,255,0,255);
+
+  // lower left corner (10, 30)
+  _assertPixel(canvas, 9,39, 255,0,0,255);
+  _assertPixel(canvas, 10,40, 255,0,0,255);
+  _assertPixel(canvas, 10,39, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noarugment.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noarugment.html
new file mode 100644
index 0000000000..08f576b379
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.noarugment.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.path.roundrect.radius.noarugment</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.path.roundrect.radius.noarugment</h1>
+<p class="desc">Check that roundRect draws a rectangle when no radii are provided.</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("Check that roundRect draws a rectangle when no radii are provided.");
+_addTest(function(canvas, ctx) {
+
+ctx.fillStyle = '#f00';
+ctx.fillRect(0, 0, 100, 50);
+ctx.roundRect(10, 10, 80, 30);
+ctx.fillStyle = '#0f0';
+ctx.fill();
+// upper left corner (10, 10)
+_assertPixel(canvas, 10,9, 255,0,0,255);
+_assertPixel(canvas, 9,10, 255,0,0,255);
+_assertPixel(canvas, 10,10, 0,255,0,255);
+
+// upper right corner (89, 10)
+_assertPixel(canvas, 90,10, 255,0,0,255);
+_assertPixel(canvas, 89,9, 255,0,0,255);
+_assertPixel(canvas, 89,10, 0,255,0,255);
+
+// lower right corner (89, 39)
+_assertPixel(canvas, 89,40, 255,0,0,255);
+_assertPixel(canvas, 90,39, 255,0,0,255);
+_assertPixel(canvas, 89,39, 0,255,0,255);
+
+// lower left corner (10, 30)
+_assertPixel(canvas, 9,39, 255,0,0,255);
+_assertPixel(canvas, 10,40, 255,0,0,255);
+_assertPixel(canvas, 10,39, 0,255,0,255);
+
+
+});
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.none.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.none.html
new file mode 100644
index 0000000000..8363285ffc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.none.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.radius.none</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.path.roundrect.radius.none</h1>
+<p class="desc">Check that roundRect throws an RangeError if radii is an empty array.</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("Check that roundRect throws an RangeError if radii is an empty array.");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 100, 50, [])});
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.toomany.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.toomany.html
new file mode 100644
index 0000000000..d8fe4bb45c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.radius.toomany.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.radius.toomany</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.path.roundrect.radius.toomany</h1>
+<p class="desc">Check that roundRect throws an IndeSizeError if radii has more than four items.</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("Check that roundRect throws an IndeSizeError if radii has more than four items.");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(RangeError, () => { ctx.roundRect(0, 0, 100, 50, [0, 0, 0, 0, 0])});
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.selfintersect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.selfintersect.html
new file mode 100644
index 0000000000..7a69aaf4c6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.selfintersect.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.selfintersect</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.path.roundrect.selfintersect</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.roundRect(0, 0, 100, 50, [0]);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 90;
+  ctx.beginPath();
+  ctx.roundRect(45, 20, 10, 10, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.winding.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.winding.html
new file mode 100644
index 0000000000..9c1f985eb9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.winding.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.path.roundrect.winding</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.path.roundrect.winding</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 = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.beginPath();
+  ctx.fillStyle = '#f00';
+  ctx.roundRect(0, 0, 50, 50, [0]);
+  ctx.roundRect(100, 50, -50, -50, [0]);
+  ctx.roundRect(0, 25, 100, -25, [0]);
+  ctx.roundRect(100, 25, -100, 25, [0]);
+  ctx.fill();
+  _assertPixel(canvas, 25,12, 0,255,0,255);
+  _assertPixel(canvas, 75,12, 0,255,0,255);
+  _assertPixel(canvas, 25,37, 0,255,0,255);
+  _assertPixel(canvas, 75,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.1.html
new file mode 100644
index 0000000000..4e9a804dc2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.zero.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.path.roundrect.zero.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.roundRect(0, 50, 100, 0, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.2.html
new file mode 100644
index 0000000000..ac64fa7818
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.zero.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.path.roundrect.zero.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.roundRect(50, -100, 0, 250, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.3.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.3.html
new file mode 100644
index 0000000000..a807715b35
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.3.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.zero.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.path.roundrect.zero.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';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.beginPath();
+  ctx.roundRect(50, 25, 0, 0, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.4.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.4.html
new file mode 100644
index 0000000000..fc51918c27
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.4.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.zero.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.path.roundrect.zero.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 = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 50;
+  ctx.roundRect(100, 25, 0, 0, [0]);
+  ctx.lineTo(0, 25);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.5.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.5.html
new file mode 100644
index 0000000000..de7d41b68f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.5.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.roundrect.zero.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.path.roundrect.zero.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';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.moveTo(0, 0);
+  ctx.roundRect(100, 25, 0, 0, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.6.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.6.html
new file mode 100644
index 0000000000..1e8e338a73
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.roundrect.zero.6.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.path.roundrect.zero.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.path.roundrect.zero.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';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.lineJoin = 'miter';
+  ctx.miterLimit = 1.5;
+  ctx.lineWidth = 200;
+  ctx.beginPath();
+  ctx.roundRect(100, 25, 1000, 0, [0]);
+  ctx.stroke();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.empty.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.empty.html
new file mode 100644
index 0000000000..aa459ec986
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.empty.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.path.stroke.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.path.stroke.empty</h1>
+<p class="desc">Empty subpaths are not stroked</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("Empty subpaths are not stroked");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(40, 25);
+  ctx.moveTo(60, 25);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.html
new file mode 100644
index 0000000000..a577f22769
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.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.path.stroke.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.path.stroke.overlap</h1>
+<p class="desc">Stroked subpaths are combined before being drawn</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.path.stroke.overlap.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Stroked subpaths are combined before being drawn");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = 'rgba(0, 255, 0, 0.5)';
+  ctx.lineWidth = 50;
+  ctx.moveTo(0, 20);
+  ctx.lineTo(100, 20);
+  ctx.moveTo(0, 30);
+  ctx.lineTo(100, 30);
+  ctx.stroke();
+
+  _assertPixelApprox(canvas, 50,25, 0,127,0,255, 1);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.png b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.png
new file mode 100644
index 0000000000..e2a35d48d4
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.overlap.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.html
new file mode 100644
index 0000000000..6474a15424
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.arc.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.path.stroke.prune.arc</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.path.stroke.prune.arc</h1>
+<p class="desc">Zero-length line segments from arcTo and arc are removed before stroking</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("Zero-length line segments from arcTo and arc are removed before stroking");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.arcTo(50, 25, 150, 25, 10);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(60, 25);
+  ctx.arc(50, 25, 10, 0, 0, false);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.html
new file mode 100644
index 0000000000..16b46852a1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.closed.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.path.stroke.prune.closed</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.path.stroke.prune.closed</h1>
+<p class="desc">Zero-length line segments from closed paths are removed before stroking</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("Zero-length line segments from closed paths are removed before stroking");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.closePath();
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.corner.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.corner.html
new file mode 100644
index 0000000000..226fccc6d4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.corner.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.path.stroke.prune.corner</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.path.stroke.prune.corner</h1>
+<p class="desc">Zero-length line segments are removed before stroking with miters</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("Zero-length line segments are removed before stroking with miters");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 400;
+  ctx.lineJoin = 'miter';
+  ctx.miterLimit = 1.4;
+
+  ctx.beginPath();
+  ctx.moveTo(-1000, 200);
+  ctx.lineTo(-100, 200);
+  ctx.lineTo(-100, 200);
+  ctx.lineTo(-100, 200);
+  ctx.lineTo(-100, 1000);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.html
new file mode 100644
index 0000000000..8023b7b3f9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.curve.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.path.stroke.prune.curve</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.path.stroke.prune.curve</h1>
+<p class="desc">Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking</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("Zero-length line segments from quadraticCurveTo and bezierCurveTo are removed before stroking");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.quadraticCurveTo(50, 25, 50, 25);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.bezierCurveTo(50, 25, 50, 25, 50, 25);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.html
new file mode 100644
index 0000000000..97f88847c0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.line.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.path.stroke.prune.line</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.path.stroke.prune.line</h1>
+<p class="desc">Zero-length line segments from lineTo are removed before stroking</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("Zero-length line segments from lineTo are removed before stroking");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.moveTo(50, 25);
+  ctx.lineTo(50, 25);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.rect.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.rect.html
new file mode 100644
index 0000000000..bf1fc9aa20
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.prune.rect.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.path.stroke.prune.rect</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.path.stroke.prune.rect</h1>
+<p class="desc">Zero-length line segments from rect and strokeRect are removed before stroking</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("Zero-length line segments from rect and strokeRect are removed before stroking");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 100;
+  ctx.lineCap = 'round';
+  ctx.lineJoin = 'round';
+
+  ctx.beginPath();
+  ctx.rect(50, 25, 0, 0);
+  ctx.stroke();
+
+  ctx.strokeRect(50, 25, 0, 0);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale1.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale1.html
new file mode 100644
index 0000000000..3e4651ec4a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale1.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.path.stroke.scale1</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.path.stroke.scale1</h1>
+<p class="desc">Stroke line widths are scaled by the current transformation matrix</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("Stroke line widths are scaled by the current transformation matrix");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.beginPath();
+  ctx.rect(25, 12.5, 50, 25);
+  ctx.save();
+  ctx.scale(50, 25);
+  ctx.strokeStyle = '#0f0';
+  ctx.stroke();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.rect(-25, -12.5, 150, 75);
+  ctx.save();
+  ctx.scale(50, 25);
+  ctx.strokeStyle = '#f00';
+  ctx.stroke();
+  ctx.restore();
+
+  _assertPixel(canvas, 0,0, 0,255,0,255);
+  _assertPixel(canvas, 50,0, 0,255,0,255);
+  _assertPixel(canvas, 99,0, 0,255,0,255);
+  _assertPixel(canvas, 0,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 99,25, 0,255,0,255);
+  _assertPixel(canvas, 0,49, 0,255,0,255);
+  _assertPixel(canvas, 50,49, 0,255,0,255);
+  _assertPixel(canvas, 99,49, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale2.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale2.html
new file mode 100644
index 0000000000..099efec76c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.scale2.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.scale2</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.path.stroke.scale2</h1>
+<p class="desc">Stroke line widths are scaled by the current transformation matrix</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("Stroke line widths are scaled by the current transformation matrix");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.beginPath();
+  ctx.rect(25, 12.5, 50, 25);
+  ctx.save();
+  ctx.rotate(Math.PI/2);
+  ctx.scale(25, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.stroke();
+  ctx.restore();
+
+  ctx.beginPath();
+  ctx.rect(-25, -12.5, 150, 75);
+  ctx.save();
+  ctx.rotate(Math.PI/2);
+  ctx.scale(25, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.stroke();
+  ctx.restore();
+
+  _assertPixel(canvas, 0,0, 0,255,0,255);
+  _assertPixel(canvas, 50,0, 0,255,0,255);
+  _assertPixel(canvas, 99,0, 0,255,0,255);
+  _assertPixel(canvas, 0,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 99,25, 0,255,0,255);
+  _assertPixel(canvas, 0,49, 0,255,0,255);
+  _assertPixel(canvas, 50,49, 0,255,0,255);
+  _assertPixel(canvas, 99,49, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.skew.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.skew.html
new file mode 100644
index 0000000000..86f3eebf1d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.skew.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.path.stroke.skew</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.path.stroke.skew</h1>
+<p class="desc">Strokes lines are skewed by the current transformation matrix</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("Strokes lines are skewed by the current transformation matrix");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(49, -50);
+  ctx.lineTo(201, -50);
+  ctx.rotate(Math.PI/4);
+  ctx.scale(1, 283);
+  ctx.strokeStyle = '#0f0';
+  ctx.stroke();
+  ctx.restore();
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.translate(-150, 0);
+  ctx.moveTo(49, -50);
+  ctx.lineTo(199, -50);
+  ctx.rotate(Math.PI/4);
+  ctx.scale(1, 142);
+  ctx.strokeStyle = '#f00';
+  ctx.stroke();
+  ctx.restore();
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.translate(-150, 0);
+  ctx.moveTo(49, -50);
+  ctx.lineTo(199, -50);
+  ctx.rotate(Math.PI/4);
+  ctx.scale(1, 142);
+  ctx.strokeStyle = '#f00';
+  ctx.stroke();
+  ctx.restore();
+
+  _assertPixel(canvas, 0,0, 0,255,0,255);
+  _assertPixel(canvas, 50,0, 0,255,0,255);
+  _assertPixel(canvas, 99,0, 0,255,0,255);
+  _assertPixel(canvas, 0,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 99,25, 0,255,0,255);
+  _assertPixel(canvas, 0,49, 0,255,0,255);
+  _assertPixel(canvas, 50,49, 0,255,0,255);
+  _assertPixel(canvas, 99,49, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.unaffected.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.unaffected.html
new file mode 100644
index 0000000000..8e6b41946f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.unaffected.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.path.stroke.unaffected</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.path.stroke.unaffected</h1>
+<p class="desc">Stroking does not start a new path or subpath</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("Stroking does not start a new path or subpath");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.lineWidth = 50;
+  ctx.moveTo(-100, 25);
+  ctx.lineTo(-100, -100);
+  ctx.lineTo(200, -100);
+  ctx.lineTo(200, 25);
+  ctx.strokeStyle = '#f00';
+  ctx.stroke();
+
+  ctx.closePath();
+  ctx.strokeStyle = '#0f0';
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.union.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.union.html
new file mode 100644
index 0000000000..73198ab24d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.stroke.union.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.path.stroke.union</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.path.stroke.union</h1>
+<p class="desc">Strokes in opposite directions are unioned, not subtracted</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("Strokes in opposite directions are unioned, not subtracted");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 40;
+  ctx.moveTo(0, 10);
+  ctx.lineTo(100, 10);
+  ctx.moveTo(100, 40);
+  ctx.lineTo(0, 40);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.basic.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.basic.html
new file mode 100644
index 0000000000..1cdc81e4f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.basic.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.path.transformation.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.path.transformation.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);
+
+  ctx.translate(-100, 0);
+  ctx.rect(100, 0, 100, 50);
+  ctx.translate(0, -100);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.changing.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.changing.html
new file mode 100644
index 0000000000..8f711b6b9a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.changing.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.path.transformation.changing</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.path.transformation.changing</h1>
+<p class="desc">Transformations are applied while building paths, not when drawing</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("Transformations are applied while building paths, not when drawing");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.moveTo(0, 0);
+  ctx.translate(100, 0);
+  ctx.lineTo(0, 0);
+  ctx.translate(0, 50);
+  ctx.lineTo(0, 0);
+  ctx.translate(-100, 0);
+  ctx.lineTo(0, 0);
+  ctx.translate(1000, 1000);
+  ctx.rotate(Math.PI/2);
+  ctx.scale(0.1, 0.1);
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.multiple.html b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.multiple.html
new file mode 100644
index 0000000000..af06c06371
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/path-objects/2d.path.transformation.multiple.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.path.transformation.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.path.transformation.multiple</h1>
+<p class="desc">Transformations are applied while building paths, not when drawing</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("Transformations are applied while building paths, not when drawing");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#f00';
+  ctx.translate(-100, 0);
+  ctx.rect(0, 0, 100, 50);
+  ctx.fill();
+  ctx.translate(100, 0);
+  ctx.fill();
+
+  ctx.beginPath();
+  ctx.strokeStyle = '#f00';
+  ctx.lineWidth = 50;
+  ctx.translate(0, -50);
+  ctx.moveTo(0, 25);
+  ctx.lineTo(100, 25);
+  ctx.stroke();
+  ctx.translate(0, 50);
+  ctx.stroke();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create.and.resize.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create.and.resize.html
new file mode 100644
index 0000000000..1ecd3fbd65
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create.and.resize.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.imageData.create.and.resize</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.imageData.create.and.resize</h1>
+<p class="desc">Verify no crash when resizing an image bitmap to zero.</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("Verify no crash when resizing an image bitmap to zero.");
+_addTest(function(canvas, ctx) {
+
+  var image = new Image();
+  image.onload = t.step_func(function() {
+    var options = { resizeHeight: 0 };
+    var p1 = createImageBitmap(image, options);
+    p1.catch(function(error){});
+    t.done();
+  });
+  image.src = 'red.png';
+
+});
+</script>
+<img src="/images/red.png" id="red.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.basic.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.basic.html
new file mode 100644
index 0000000000..1ea73690e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.basic.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.create1.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.imageData.create1.basic</h1>
+<p class="desc">createImageData(imgdata) exists and returns something</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("createImageData(imgdata) exists and returns something");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(ctx.createImageData(ctx.createImageData(1, 1)), null, "ctx.createImageData(ctx.createImageData(1, 1))", "null");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.initial.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.initial.html
new file mode 100644
index 0000000000..8709623a0c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.initial.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.imageData.create1.initial</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.imageData.create1.initial</h1>
+<p class="desc">createImageData(imgdata) returns transparent black data of the right size</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("createImageData(imgdata) returns transparent black data of the right size");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  var imgdata1 = ctx.getImageData(0, 0, 10, 20);
+  var imgdata2 = ctx.createImageData(imgdata1);
+  _assertSame(imgdata2.data.length, imgdata1.data.length, "imgdata2.data.length", "imgdata1.data.length");
+  _assertSame(imgdata2.width, imgdata1.width, "imgdata2.width", "imgdata1.width");
+  _assertSame(imgdata2.height, imgdata1.height, "imgdata2.height", "imgdata1.height");
+  var isTransparentBlack = true;
+  for (var i = 0; i < imgdata2.data.length; ++i)
+      if (imgdata2.data[i] !== 0)
+          isTransparentBlack = false;
+  _assert(isTransparentBlack, "isTransparentBlack");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.this.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.this.html
new file mode 100644
index 0000000000..dd4b80ec08
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.this.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.imageData.create1.this</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.imageData.create1.this</h1>
+<p class="desc">createImageData(imgdata) should throw when called with the wrong |this|</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("createImageData(imgdata) should throw when called with the wrong |this|");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.createImageData(1, 1);
+  assert_throws_js(TypeError, function() { CanvasRenderingContext2D.prototype.createImageData.call(null, imgdata); });
+  assert_throws_js(TypeError, function() { CanvasRenderingContext2D.prototype.createImageData.call(undefined, imgdata); });
+  assert_throws_js(TypeError, function() { CanvasRenderingContext2D.prototype.createImageData.call({}, imgdata); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.type.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.type.html
new file mode 100644
index 0000000000..36f3db99be
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.type.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.imageData.create1.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.imageData.create1.type</h1>
+<p class="desc">createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object</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("createImageData(imgdata) returns an ImageData object containing a Uint8ClampedArray object");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(window.ImageData, undefined, "window.ImageData", "undefined");
+  _assertDifferent(window.Uint8ClampedArray, undefined, "window.Uint8ClampedArray", "undefined");
+  window.ImageData.prototype.thisImplementsImageData = true;
+  window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
+  var imgdata = ctx.createImageData(ctx.createImageData(1, 1));
+  _assert(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
+  _assert(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.zero.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.zero.html
new file mode 100644
index 0000000000..02619376a1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create1.zero.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.create1.zero</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.imageData.create1.zero</h1>
+<p class="desc">createImageData(null) throws TypeError</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("createImageData(null) throws TypeError");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.createImageData(null); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.basic.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.basic.html
new file mode 100644
index 0000000000..807b6dbfa2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.basic.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.create2.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.imageData.create2.basic</h1>
+<p class="desc">createImageData(sw, sh) exists and returns something</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("createImageData(sw, sh) exists and returns something");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(ctx.createImageData(1, 1), null, "ctx.createImageData(1, 1)", "null");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.double.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.double.html
new file mode 100644
index 0000000000..31aa42d5a8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.double.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.imageData.create2.double</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.imageData.create2.double</h1>
+<p class="desc">createImageData(w, h) double is converted to long</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("createImageData(w, h) double is converted to long");
+_addTest(function(canvas, ctx) {
+
+  var imgdata1 = ctx.createImageData(10.01, 10.99);
+  var imgdata2 = ctx.createImageData(-10.01, -10.99);
+  _assertSame(imgdata1.width, 10, "imgdata1.width", "10");
+  _assertSame(imgdata1.height, 10, "imgdata1.height", "10");
+  _assertSame(imgdata2.width, 10, "imgdata2.width", "10");
+  _assertSame(imgdata2.height, 10, "imgdata2.height", "10");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.initial.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.initial.html
new file mode 100644
index 0000000000..c2a69b4c06
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.initial.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.imageData.create2.initial</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.imageData.create2.initial</h1>
+<p class="desc">createImageData(sw, sh) returns transparent black data of the right size</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("createImageData(sw, sh) returns transparent black data of the right size");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.createImageData(10, 20);
+  _assertSame(imgdata.data.length, imgdata.width*imgdata.height*4, "imgdata.data.length", "imgdata.width*imgdata.height*4");
+  _assert(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
+  _assert(imgdata.width > 0, "imgdata.width > 0");
+  var isTransparentBlack = true;
+  for (var i = 0; i < imgdata.data.length; ++i)
+      if (imgdata.data[i] !== 0)
+          isTransparentBlack = false;
+  _assert(isTransparentBlack, "isTransparentBlack");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.large.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.large.html
new file mode 100644
index 0000000000..73b2a1c19f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.large.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.imageData.create2.large</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.imageData.create2.large</h1>
+<p class="desc">createImageData(sw, sh) works for sizes much larger than the canvas</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("createImageData(sw, sh) works for sizes much larger than the canvas");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.createImageData(1000, 2000);
+  _assertSame(imgdata.data.length, imgdata.width*imgdata.height*4, "imgdata.data.length", "imgdata.width*imgdata.height*4");
+  _assert(imgdata.width < imgdata.height, "imgdata.width < imgdata.height");
+  _assert(imgdata.width > 0, "imgdata.width > 0");
+  var isTransparentBlack = true;
+  for (var i = 0; i < imgdata.data.length; i += 7813) // check ~1024 points (assuming normal scaling)
+      if (imgdata.data[i] !== 0)
+          isTransparentBlack = false;
+  _assert(isTransparentBlack, "isTransparentBlack");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.negative.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.negative.html
new file mode 100644
index 0000000000..7c4a3944eb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.negative.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.imageData.create2.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.imageData.create2.negative</h1>
+<p class="desc">createImageData(sw, sh) takes the absolute magnitude of the size arguments</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("createImageData(sw, sh) takes the absolute magnitude of the size arguments");
+_addTest(function(canvas, ctx) {
+
+  var imgdata1 = ctx.createImageData(10, 20);
+  var imgdata2 = ctx.createImageData(-10, 20);
+  var imgdata3 = ctx.createImageData(10, -20);
+  var imgdata4 = ctx.createImageData(-10, -20);
+  _assertSame(imgdata1.data.length, imgdata2.data.length, "imgdata1.data.length", "imgdata2.data.length");
+  _assertSame(imgdata2.data.length, imgdata3.data.length, "imgdata2.data.length", "imgdata3.data.length");
+  _assertSame(imgdata3.data.length, imgdata4.data.length, "imgdata3.data.length", "imgdata4.data.length");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.nonfinite.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.nonfinite.html
new file mode 100644
index 0000000000..af30dc9124
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.nonfinite.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.imageData.create2.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.imageData.create2.nonfinite</h1>
+<p class="desc">createImageData() 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("createImageData() throws TypeError if arguments are not finite");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.createImageData(Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(-Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(NaN, 10); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(10, -Infinity); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(10, NaN); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(Infinity, Infinity); });
+  var posinfobj = { valueOf: function() { return Infinity; } },
+      neginfobj = { valueOf: function() { return -Infinity; } },
+      nanobj = { valueOf: function() { return -Infinity; } };
+  assert_throws_js(TypeError, function() { ctx.createImageData(posinfobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(neginfobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(nanobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(10, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(10, neginfobj); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(10, nanobj); });
+  assert_throws_js(TypeError, function() { ctx.createImageData(posinfobj, posinfobj); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.round.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.round.html
new file mode 100644
index 0000000000..c62243f418
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.round.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.imageData.create2.round</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.imageData.create2.round</h1>
+<p class="desc">createImageData(w, h) is rounded the same as getImageData(0, 0, w, h)</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("createImageData(w, h) is rounded the same as getImageData(0, 0, w, h)");
+_addTest(function(canvas, ctx) {
+
+  var imgdata1 = ctx.createImageData(10.01, 10.99);
+  var imgdata2 = ctx.getImageData(0, 0, 10.01, 10.99);
+  _assertSame(imgdata1.width, imgdata2.width, "imgdata1.width", "imgdata2.width");
+  _assertSame(imgdata1.height, imgdata2.height, "imgdata1.height", "imgdata2.height");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.this.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.this.html
new file mode 100644
index 0000000000..f5373d0edd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.this.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.imageData.create2.this</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.imageData.create2.this</h1>
+<p class="desc">createImageData(sw, sh) should throw when called with the wrong |this|</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("createImageData(sw, sh) should throw when called with the wrong |this|");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { CanvasRenderingContext2D.prototype.createImageData.call(null, 1, 1); });
+  assert_throws_js(TypeError, function() { CanvasRenderingContext2D.prototype.createImageData.call(undefined, 1, 1); });
+  assert_throws_js(TypeError, function() { CanvasRenderingContext2D.prototype.createImageData.call({}, 1, 1); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.type.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.type.html
new file mode 100644
index 0000000000..d595d33845
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.type.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.imageData.create2.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.imageData.create2.type</h1>
+<p class="desc">createImageData(sw, sh) returns an ImageData object containing a Uint8ClampedArray object</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("createImageData(sw, sh) returns an ImageData object containing a Uint8ClampedArray object");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(window.ImageData, undefined, "window.ImageData", "undefined");
+  _assertDifferent(window.Uint8ClampedArray, undefined, "window.Uint8ClampedArray", "undefined");
+  window.ImageData.prototype.thisImplementsImageData = true;
+  window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
+  var imgdata = ctx.createImageData(1, 1);
+  _assert(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
+  _assert(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.zero.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.zero.html
new file mode 100644
index 0000000000..cc949162d3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.create2.zero.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.imageData.create2.zero</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.imageData.create2.zero</h1>
+<p class="desc">createImageData(sw, sh) throws INDEX_SIZE_ERR if size is zero</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("createImageData(sw, sh) throws INDEX_SIZE_ERR if size is zero");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createImageData(10, 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createImageData(0, 10); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createImageData(0, 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createImageData(0.99, 10); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.createImageData(10, 0.1); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.basic.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.basic.html
new file mode 100644
index 0000000000..5f8f199540
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.basic.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.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.imageData.get.basic</h1>
+<p class="desc">getImageData() exists and returns something</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("getImageData() exists and returns something");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(ctx.getImageData(0, 0, 100, 50), null, "ctx.getImageData(0, 0, 100, 50)", "null");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.clamp.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.clamp.html
new file mode 100644
index 0000000000..0047e910b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.clamp.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.imageData.get.clamp</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.imageData.get.clamp</h1>
+<p class="desc">getImageData() clamps colors to the range [0, 255]</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("getImageData() clamps colors to the range [0, 255]");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgb(-100, -200, -300)';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = 'rgb(256, 300, 400)';
+  ctx.fillRect(20, 10, 60, 10);
+  var imgdata1 = ctx.getImageData(10, 5, 1, 1);
+  _assertSame(imgdata1.data[0], 0, "imgdata1.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata1.data[1], 0, "imgdata1.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata1.data[2], 0, "imgdata1.data[\""+(2)+"\"]", "0");
+  var imgdata2 = ctx.getImageData(30, 15, 1, 1);
+  _assertSame(imgdata2.data[0], 255, "imgdata2.data[\""+(0)+"\"]", "255");
+  _assertSame(imgdata2.data[1], 255, "imgdata2.data[\""+(1)+"\"]", "255");
+  _assertSame(imgdata2.data[2], 255, "imgdata2.data[\""+(2)+"\"]", "255");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.double.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.double.html
new file mode 100644
index 0000000000..5cea5fcbc2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.double.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.imageData.get.double</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.imageData.get.double</h1>
+<p class="desc">createImageData(w, h) double is converted to long</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("createImageData(w, h) double is converted to long");
+_addTest(function(canvas, ctx) {
+
+  var imgdata1 = ctx.getImageData(0, 0, 10.01, 10.99);
+  var imgdata2 = ctx.getImageData(0, 0, -10.01, -10.99);
+  _assertSame(imgdata1.width, 10, "imgdata1.width", "10");
+  _assertSame(imgdata1.height, 10, "imgdata1.height", "10");
+  _assertSame(imgdata2.width, 10, "imgdata2.width", "10");
+  _assertSame(imgdata2.height, 10, "imgdata2.height", "10");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.invalid.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.invalid.html
new file mode 100644
index 0000000000..689e72f69b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.invalid.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.imageData.get.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.imageData.get.invalid</h1>
+<p class="desc">Verify getImageData() behavior in invalid cases.</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("Verify getImageData() behavior in invalid cases.");
+_addTest(function(canvas, ctx) {
+
+  imageData = ctx.getImageData(0,0,2,2);
+  var testValues = [NaN, true, false, "\"garbage\"", "-1",
+                    "0", "1", "2", Infinity, -Infinity,
+                    -5, -0.5, 0, 0.5, 5,
+                    5.4, 255, 256, null, undefined];
+  var testResults = [0, 1, 0, 0, 0,
+                     0, 1, 2, 255, 0,
+                     0, 0, 0, 0, 5,
+                     5, 255, 255, 0, 0];
+  for (var i = 0; i < testValues.length; i++) {
+      imageData.data[0] = testValues[i];
+      _assert(imageData.data[0] == testResults[i], "imageData.data[\""+(0)+"\"] == testResults[\""+(i)+"\"]");
+  }
+  imageData.data['foo']='garbage';
+  _assert(imageData.data['foo'] == 'garbage', "imageData.data['foo'] == 'garbage'");
+  imageData.data[-1]='garbage';
+  _assert(imageData.data[-1] == undefined, "imageData.data[-1] == undefined");
+  imageData.data[17]='garbage';
+  _assert(imageData.data[17] == undefined, "imageData.data[\""+(17)+"\"] == undefined");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.large.crash.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.large.crash.html
new file mode 100644
index 0000000000..f41eec7b9b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.large.crash.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.large.crash</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.imageData.get.large.crash</h1>
+<p class="desc">Test that canvas crash when image data cannot be allocated.</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("Test that canvas crash when image data cannot be allocated.");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 0xffffffff, 2147483647, 10); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.length.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.length.html
new file mode 100644
index 0000000000..41b9832025
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.length.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.imageData.get.length</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.imageData.get.length</h1>
+<p class="desc">getImageData() returns a correctly-sized Uint8ClampedArray</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("getImageData() returns a correctly-sized Uint8ClampedArray");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  _assertSame(imgdata.data.length, imgdata.width*imgdata.height*4, "imgdata.data.length", "imgdata.width*imgdata.height*4");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonfinite.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonfinite.html
new file mode 100644
index 0000000000..a80e905cfd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonfinite.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.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.imageData.get.nonfinite</h1>
+<p class="desc">getImageData() 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("getImageData() throws TypeError if arguments are not finite");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(-Infinity, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(NaN, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, -Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, NaN, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, -Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, NaN, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, 10, -Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, 10, NaN); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(Infinity, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, Infinity, Infinity); });
+  var posinfobj = { valueOf: function() { return Infinity; } },
+      neginfobj = { valueOf: function() { return -Infinity; } },
+      nanobj = { valueOf: function() { return -Infinity; } };
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(neginfobj, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(nanobj, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, posinfobj, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, neginfobj, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, nanobj, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, posinfobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, neginfobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, nanobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, 10, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, 10, neginfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, 10, nanobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, posinfobj, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, posinfobj, posinfobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, posinfobj, posinfobj, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, posinfobj, 10, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, 10, posinfobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, 10, posinfobj, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(posinfobj, 10, 10, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, posinfobj, posinfobj, 10); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, posinfobj, posinfobj, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, posinfobj, 10, posinfobj); });
+  assert_throws_js(TypeError, function() { ctx.getImageData(10, 10, posinfobj, posinfobj); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonpremul.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonpremul.html
new file mode 100644
index 0000000000..bc833c2198
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.nonpremul.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.nonpremul</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.imageData.get.nonpremul</h1>
+<p class="desc">getImageData() returns non-premultiplied colors</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("getImageData() returns non-premultiplied colors");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  var imgdata = ctx.getImageData(10, 10, 10, 10);
+  _assert(imgdata.data[0] > 200, "imgdata.data[\""+(0)+"\"] > 200");
+  _assert(imgdata.data[1] > 200, "imgdata.data[\""+(1)+"\"] > 200");
+  _assert(imgdata.data[2] > 200, "imgdata.data[\""+(2)+"\"] > 200");
+  _assert(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
+  _assert(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.alpha.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.alpha.html
new file mode 100644
index 0000000000..e5b57f650e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.alpha.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.imageData.get.order.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.imageData.get.order.alpha</h1>
+<p class="desc">getImageData() returns A in the fourth component</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("getImageData() returns A in the fourth component");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+  ctx.fillRect(0, 0, 100, 50);
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  _assert(imgdata.data[3] < 200, "imgdata.data[\""+(3)+"\"] < 200");
+  _assert(imgdata.data[3] > 100, "imgdata.data[\""+(3)+"\"] > 100");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.cols.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.cols.html
new file mode 100644
index 0000000000..66fd984ebd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.cols.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.order.cols</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.imageData.get.order.cols</h1>
+<p class="desc">getImageData() returns leftmost columns first</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("getImageData() returns leftmost columns first");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 2, 50);
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata.data[Math.round(imgdata.width/2*4)], 255, "imgdata.data[Math.round(imgdata.width/2*4)]", "255");
+  _assertSame(imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)], 0, "imgdata.data[Math.round((imgdata.height/2)*imgdata.width*4)]", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rgb.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rgb.html
new file mode 100644
index 0000000000..4d15ce7927
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rgb.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.imageData.get.order.rgb</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.imageData.get.order.rgb</h1>
+<p class="desc">getImageData() returns R then G then B</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("getImageData() returns R then G then B");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#48c';
+  ctx.fillRect(0, 0, 100, 50);
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  _assertSame(imgdata.data[0], 0x44, "imgdata.data[\""+(0)+"\"]", "0x44");
+  _assertSame(imgdata.data[1], 0x88, "imgdata.data[\""+(1)+"\"]", "0x88");
+  _assertSame(imgdata.data[2], 0xCC, "imgdata.data[\""+(2)+"\"]", "0xCC");
+  _assertSame(imgdata.data[3], 255, "imgdata.data[\""+(3)+"\"]", "255");
+  _assertSame(imgdata.data[4], 0x44, "imgdata.data[\""+(4)+"\"]", "0x44");
+  _assertSame(imgdata.data[5], 0x88, "imgdata.data[\""+(5)+"\"]", "0x88");
+  _assertSame(imgdata.data[6], 0xCC, "imgdata.data[\""+(6)+"\"]", "0xCC");
+  _assertSame(imgdata.data[7], 255, "imgdata.data[\""+(7)+"\"]", "255");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rows.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rows.html
new file mode 100644
index 0000000000..086ce322e0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.order.rows.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.order.rows</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.imageData.get.order.rows</h1>
+<p class="desc">getImageData() returns topmost rows first</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("getImageData() returns topmost rows first");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 2);
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata.data[Math.floor(imgdata.width/2*4)], 0, "imgdata.data[Math.floor(imgdata.width/2*4)]", "0");
+  _assertSame(imgdata.data[(imgdata.height/2)*imgdata.width*4], 255, "imgdata.data[(imgdata.height/2)*imgdata.width*4]", "255");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.range.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.range.html
new file mode 100644
index 0000000000..d921191772
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.range.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.range</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.imageData.get.range</h1>
+<p class="desc">getImageData() returns values in the range [0, 255]</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("getImageData() returns values in the range [0, 255]");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(20, 10, 60, 10);
+  var imgdata1 = ctx.getImageData(10, 5, 1, 1);
+  _assertSame(imgdata1.data[0], 0, "imgdata1.data[\""+(0)+"\"]", "0");
+  var imgdata2 = ctx.getImageData(30, 15, 1, 1);
+  _assertSame(imgdata2.data[0], 255, "imgdata2.data[\""+(0)+"\"]", "255");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.rounding.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.rounding.html
new file mode 100644
index 0000000000..9255be087b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.rounding.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.imageData.get.rounding</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.imageData.get.rounding</h1>
+<p class="desc">Test the handling of non-integer source coordinates in getImageData().</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("Test the handling of non-integer source coordinates in getImageData().");
+_addTest(function(canvas, ctx) {
+
+  function testDimensions(sx, sy, sw, sh, width, height)
+  {
+      imageData = ctx.getImageData(sx, sy, sw, sh);
+      _assert(imageData.width == width, "imageData.width == width");
+      _assert(imageData.height == height, "imageData.height == height");
+  }
+
+  testDimensions(0, 0, 20, 10, 20, 10);
+
+  testDimensions(.1, .2, 20, 10, 20, 10);
+  testDimensions(.9, .8, 20, 10, 20, 10);
+
+  testDimensions(0, 0, 20.9, 10.9, 20, 10);
+  testDimensions(0, 0, 20.1, 10.1, 20, 10);
+
+  testDimensions(-1, -1, 20, 10, 20, 10);
+
+  testDimensions(-1.1, 0, 20, 10, 20, 10);
+  testDimensions(-1.9,  0, 20, 10, 20, 10);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.negative.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.negative.html
new file mode 100644
index 0000000000..0b84b1caca
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.negative.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.imageData.get.source.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.imageData.get.source.negative</h1>
+<p class="desc">getImageData() works with negative width and height, and returns top-to-bottom left-to-right</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("getImageData() works with negative width and height, and returns top-to-bottom left-to-right");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#fff';
+  ctx.fillRect(20, 10, 60, 10);
+
+  var imgdata1 = ctx.getImageData(85, 25, -10, -10);
+  _assertSame(imgdata1.data[0], 255, "imgdata1.data[\""+(0)+"\"]", "255");
+  _assertSame(imgdata1.data[1], 255, "imgdata1.data[\""+(1)+"\"]", "255");
+  _assertSame(imgdata1.data[2], 255, "imgdata1.data[\""+(2)+"\"]", "255");
+  _assertSame(imgdata1.data[3], 255, "imgdata1.data[\""+(3)+"\"]", "255");
+  _assertSame(imgdata1.data[imgdata1.data.length-4+0], 0, "imgdata1.data[imgdata1.data.length-4+0]", "0");
+  _assertSame(imgdata1.data[imgdata1.data.length-4+1], 0, "imgdata1.data[imgdata1.data.length-4+1]", "0");
+  _assertSame(imgdata1.data[imgdata1.data.length-4+2], 0, "imgdata1.data[imgdata1.data.length-4+2]", "0");
+  _assertSame(imgdata1.data[imgdata1.data.length-4+3], 255, "imgdata1.data[imgdata1.data.length-4+3]", "255");
+
+  var imgdata2 = ctx.getImageData(0, 0, -1, -1);
+  _assertSame(imgdata2.data[0], 0, "imgdata2.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata2.data[1], 0, "imgdata2.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata2.data[2], 0, "imgdata2.data[\""+(2)+"\"]", "0");
+  _assertSame(imgdata2.data[3], 0, "imgdata2.data[\""+(3)+"\"]", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.outside.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.outside.html
new file mode 100644
index 0000000000..fca97f2e6f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.outside.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.get.source.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.imageData.get.source.outside</h1>
+<p class="desc">getImageData() returns transparent black outside the canvas</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("getImageData() returns transparent black outside the canvas");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#08f';
+  ctx.fillRect(0, 0, 100, 50);
+
+  var imgdata1 = ctx.getImageData(-10, 5, 1, 1);
+  _assertSame(imgdata1.data[0], 0, "imgdata1.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata1.data[1], 0, "imgdata1.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata1.data[2], 0, "imgdata1.data[\""+(2)+"\"]", "0");
+  _assertSame(imgdata1.data[3], 0, "imgdata1.data[\""+(3)+"\"]", "0");
+
+  var imgdata2 = ctx.getImageData(10, -5, 1, 1);
+  _assertSame(imgdata2.data[0], 0, "imgdata2.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata2.data[1], 0, "imgdata2.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata2.data[2], 0, "imgdata2.data[\""+(2)+"\"]", "0");
+  _assertSame(imgdata2.data[3], 0, "imgdata2.data[\""+(3)+"\"]", "0");
+
+  var imgdata3 = ctx.getImageData(200, 5, 1, 1);
+  _assertSame(imgdata3.data[0], 0, "imgdata3.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata3.data[1], 0, "imgdata3.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata3.data[2], 0, "imgdata3.data[\""+(2)+"\"]", "0");
+  _assertSame(imgdata3.data[3], 0, "imgdata3.data[\""+(3)+"\"]", "0");
+
+  var imgdata4 = ctx.getImageData(10, 60, 1, 1);
+  _assertSame(imgdata4.data[0], 0, "imgdata4.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata4.data[1], 0, "imgdata4.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata4.data[2], 0, "imgdata4.data[\""+(2)+"\"]", "0");
+  _assertSame(imgdata4.data[3], 0, "imgdata4.data[\""+(3)+"\"]", "0");
+
+  var imgdata5 = ctx.getImageData(100, 10, 1, 1);
+  _assertSame(imgdata5.data[0], 0, "imgdata5.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata5.data[1], 0, "imgdata5.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata5.data[2], 0, "imgdata5.data[\""+(2)+"\"]", "0");
+  _assertSame(imgdata5.data[3], 0, "imgdata5.data[\""+(3)+"\"]", "0");
+
+  var imgdata6 = ctx.getImageData(0, 10, 1, 1);
+  _assertSame(imgdata6.data[0], 0, "imgdata6.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata6.data[1], 136, "imgdata6.data[\""+(1)+"\"]", "136");
+  _assertSame(imgdata6.data[2], 255, "imgdata6.data[\""+(2)+"\"]", "255");
+  _assertSame(imgdata6.data[3], 255, "imgdata6.data[\""+(3)+"\"]", "255");
+
+  var imgdata7 = ctx.getImageData(-10, 10, 20, 20);
+  _assertSame(imgdata7.data[ 0*4+0], 0, "imgdata7.data[ 0*4+0]", "0");
+  _assertSame(imgdata7.data[ 0*4+1], 0, "imgdata7.data[ 0*4+1]", "0");
+  _assertSame(imgdata7.data[ 0*4+2], 0, "imgdata7.data[ 0*4+2]", "0");
+  _assertSame(imgdata7.data[ 0*4+3], 0, "imgdata7.data[ 0*4+3]", "0");
+  _assertSame(imgdata7.data[ 9*4+0], 0, "imgdata7.data[ 9*4+0]", "0");
+  _assertSame(imgdata7.data[ 9*4+1], 0, "imgdata7.data[ 9*4+1]", "0");
+  _assertSame(imgdata7.data[ 9*4+2], 0, "imgdata7.data[ 9*4+2]", "0");
+  _assertSame(imgdata7.data[ 9*4+3], 0, "imgdata7.data[ 9*4+3]", "0");
+  _assertSame(imgdata7.data[10*4+0], 0, "imgdata7.data[10*4+0]", "0");
+  _assertSame(imgdata7.data[10*4+1], 136, "imgdata7.data[10*4+1]", "136");
+  _assertSame(imgdata7.data[10*4+2], 255, "imgdata7.data[10*4+2]", "255");
+  _assertSame(imgdata7.data[10*4+3], 255, "imgdata7.data[10*4+3]", "255");
+  _assertSame(imgdata7.data[19*4+0], 0, "imgdata7.data[19*4+0]", "0");
+  _assertSame(imgdata7.data[19*4+1], 136, "imgdata7.data[19*4+1]", "136");
+  _assertSame(imgdata7.data[19*4+2], 255, "imgdata7.data[19*4+2]", "255");
+  _assertSame(imgdata7.data[19*4+3], 255, "imgdata7.data[19*4+3]", "255");
+  _assertSame(imgdata7.data[20*4+0], 0, "imgdata7.data[20*4+0]", "0");
+  _assertSame(imgdata7.data[20*4+1], 0, "imgdata7.data[20*4+1]", "0");
+  _assertSame(imgdata7.data[20*4+2], 0, "imgdata7.data[20*4+2]", "0");
+  _assertSame(imgdata7.data[20*4+3], 0, "imgdata7.data[20*4+3]", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.size.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.size.html
new file mode 100644
index 0000000000..800edb8baf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.source.size.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.imageData.get.source.size</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.imageData.get.source.size</h1>
+<p class="desc">getImageData() returns bigger ImageData for bigger source rectangle</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("getImageData() returns bigger ImageData for bigger source rectangle");
+_addTest(function(canvas, ctx) {
+
+  var imgdata1 = ctx.getImageData(0, 0, 10, 10);
+  var imgdata2 = ctx.getImageData(0, 0, 20, 20);
+  _assert(imgdata2.width > imgdata1.width, "imgdata2.width > imgdata1.width");
+  _assert(imgdata2.height > imgdata1.height, "imgdata2.height > imgdata1.height");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.type.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.type.html
new file mode 100644
index 0000000000..748d46b166
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.type.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.imageData.get.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.imageData.get.type</h1>
+<p class="desc">getImageData() returns an ImageData object containing a Uint8ClampedArray object</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("getImageData() returns an ImageData object containing a Uint8ClampedArray object");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(window.ImageData, undefined, "window.ImageData", "undefined");
+  _assertDifferent(window.Uint8ClampedArray, undefined, "window.Uint8ClampedArray", "undefined");
+  window.ImageData.prototype.thisImplementsImageData = true;
+  window.Uint8ClampedArray.prototype.thisImplementsUint8ClampedArray = true;
+  var imgdata = ctx.getImageData(0, 0, 1, 1);
+  _assert(imgdata.thisImplementsImageData, "imgdata.thisImplementsImageData");
+  _assert(imgdata.data.thisImplementsUint8ClampedArray, "imgdata.data.thisImplementsUint8ClampedArray");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.unaffected.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.unaffected.html
new file mode 100644
index 0000000000..f2f4a2e4fa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.unaffected.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.imageData.get.unaffected</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.imageData.get.unaffected</h1>
+<p class="desc">getImageData() is not affected by context state</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("getImageData() is not affected by context state");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 50)
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(50, 0, 50, 50)
+  ctx.save();
+  ctx.translate(50, 0);
+  ctx.globalAlpha = 0.1;
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.shadowColor = '#f00';
+  ctx.rect(0, 0, 5, 5);
+  ctx.clip();
+  var imgdata = ctx.getImageData(0, 0, 50, 50);
+  ctx.restore();
+  ctx.putImageData(imgdata, 50, 0);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.zero.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.zero.html
new file mode 100644
index 0000000000..438bc2fb1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.get.zero.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.imageData.get.zero</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.imageData.get.zero</h1>
+<p class="desc">getImageData() throws INDEX_SIZE_ERR if size is zero</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("getImageData() throws INDEX_SIZE_ERR if size is zero");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.getImageData(1, 1, 10, 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.getImageData(1, 1, 0, 10); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.getImageData(1, 1, 0, 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.getImageData(1, 1, 0.1, 10); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.getImageData(1, 1, 10, 0.99); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.getImageData(1, 1, -0.1, 10); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { ctx.getImageData(1, 1, 10, -0.99); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.clamp.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.clamp.html
new file mode 100644
index 0000000000..df8ef1ba20
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.clamp.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.object.clamp</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.imageData.object.clamp</h1>
+<p class="desc">ImageData.data clamps numbers to [0, 255]</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("ImageData.data clamps numbers to [0, 255]");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+
+  imgdata.data[0] = 100;
+  imgdata.data[0] = 300;
+  _assertSame(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255");
+  imgdata.data[0] = 100;
+  imgdata.data[0] = -100;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+
+  imgdata.data[0] = 100;
+  imgdata.data[0] = 200+Math.pow(2, 32);
+  _assertSame(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255");
+  imgdata.data[0] = 100;
+  imgdata.data[0] = -200-Math.pow(2, 32);
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+
+  imgdata.data[0] = 100;
+  imgdata.data[0] = Math.pow(10, 39);
+  _assertSame(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255");
+  imgdata.data[0] = 100;
+  imgdata.data[0] = -Math.pow(10, 39);
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+
+  imgdata.data[0] = 100;
+  imgdata.data[0] = -Infinity;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  imgdata.data[0] = 100;
+  imgdata.data[0] = Infinity;
+  _assertSame(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.bounds.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.bounds.html
new file mode 100644
index 0000000000..01affeb947
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.bounds.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.object.ctor.array.bounds</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.imageData.object.ctor.array.bounds</h1>
+<p class="desc">ImageData has a usable constructor</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("ImageData has a usable constructor");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(window.ImageData, undefined, "window.ImageData", "undefined");
+
+  assert_throws_dom("INVALID_STATE_ERR", function() { new ImageData(new Uint8ClampedArray(0), 1); });
+  assert_throws_dom("INVALID_STATE_ERR", function() { new ImageData(new Uint8ClampedArray(3), 1); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(new Uint8ClampedArray(4), 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(new Uint8ClampedArray(4), 1, 2); });
+  assert_throws_js(TypeError, function() { new ImageData(new Uint8Array(8), 1, 2); });
+  assert_throws_js(TypeError, function() { new ImageData(new Int8Array(8), 1, 2); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.html
new file mode 100644
index 0000000000..0cdc025764
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.array.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.imageData.object.ctor.array</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.imageData.object.ctor.array</h1>
+<p class="desc">ImageData has a usable constructor</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("ImageData has a usable constructor");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(window.ImageData, undefined, "window.ImageData", "undefined");
+
+  var array = new Uint8ClampedArray(8);
+  var imgdata = new window.ImageData(array, 1, 2);
+  _assertSame(imgdata.width, 1, "imgdata.width", "1");
+  _assertSame(imgdata.height, 2, "imgdata.height", "2");
+  _assertSame(imgdata.data, array, "imgdata.data", "array");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.html
new file mode 100644
index 0000000000..f7811e7441
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.basics.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.object.ctor.basics</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.imageData.object.ctor.basics</h1>
+<p class="desc">Testing different type of ImageData constructor</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("Testing different type of ImageData constructor");
+_addTest(function(canvas, ctx) {
+
+  function setRGBA(imageData, i, rgba)
+  {
+      var s = i * 4;
+      imageData[s] = rgba[0];
+      imageData[s + 1] = rgba[1];
+      imageData[s + 2] = rgba[2];
+      imageData[s + 3] = rgba[3];
+  }
+
+  function getRGBA(imageData, i)
+  {
+      var result = [];
+      var s = i * 4;
+      for (var j = 0; j < 4; j++) {
+          result[j] = imageData[s + j];
+      }
+      return result;
+  }
+
+  function assertArrayEquals(actual, expected)
+  {
+      _assertSame(typeof actual, "object", "typeof actual", "\"object\"");
+      _assertDifferent(actual, null, "actual", "null");
+      _assertSame("length" in actual, true, "\"length\" in actual", "true");
+      _assertSame(actual.length, expected.length, "actual.length", "expected.length");
+      for (var i = 0; i < actual.length; i++) {
+          _assertSame(actual.hasOwnProperty(i), expected.hasOwnProperty(i), "actual.hasOwnProperty(i)", "expected.hasOwnProperty(i)");
+          _assertSame(actual[i], expected[i], "actual[\""+(i)+"\"]", "expected[\""+(i)+"\"]");
+      }
+  }
+
+  _assertDifferent(ImageData, undefined, "ImageData", "undefined");
+  imageData = new ImageData(100, 50);
+
+  _assertDifferent(imageData, null, "imageData", "null");
+  _assertDifferent(imageData.data, null, "imageData.data", "null");
+  _assertSame(imageData.width, 100, "imageData.width", "100");
+  _assertSame(imageData.height, 50, "imageData.height", "50");
+  assertArrayEquals(getRGBA(imageData.data, 4), [0, 0, 0, 0]);
+
+  var testColor = [0, 255, 255, 128];
+  setRGBA(imageData.data, 4, testColor);
+  assertArrayEquals(getRGBA(imageData.data, 4), testColor);
+
+  assert_throws_js(TypeError, function() { ImageData(1, 1); });
+  assert_throws_js(TypeError, function() { new ImageData(10); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(0, 10); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(10, 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData('width', 'height'); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(1 << 31, 1 << 31); });
+  assert_throws_js(TypeError, function() { new ImageData(new Uint8ClampedArray(0)); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(new Uint8Array(100), 25); });
+  assert_throws_dom("INVALID_STATE_ERR", function() { new ImageData(new Uint8ClampedArray(27), 2); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(new Uint8ClampedArray(28), 7, 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(new Uint8ClampedArray(104), 14); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(new Uint8ClampedArray([12, 34, 168, 65328]), 1, 151); });
+  assert_throws_js(TypeError, function() { new ImageData(self, 4, 4); });
+  assert_throws_js(TypeError, function() { new ImageData(null, 4, 4); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(imageData.data, 0); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(imageData.data, 13); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(imageData.data, 1 << 31); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(imageData.data, 'biggish'); });
+  assert_throws_dom("INDEX_SIZE_ERR", function() { new ImageData(imageData.data, 1 << 24, 1 << 31); });
+  _assertSame(new ImageData(new Uint8ClampedArray(28), 7).height, 1, "new ImageData(new Uint8ClampedArray(28), 7).height", "1");
+
+  imageDataFromData = new ImageData(imageData.data, 100);
+  _assertSame(imageDataFromData.width, 100, "imageDataFromData.width", "100");
+  _assertSame(imageDataFromData.height, 50, "imageDataFromData.height", "50");
+  _assertSame(imageDataFromData.data, imageData.data, "imageDataFromData.data", "imageData.data");
+  assertArrayEquals(getRGBA(imageDataFromData.data, 10), getRGBA(imageData.data, 10));
+  setRGBA(imageData.data, 10, testColor);
+  assertArrayEquals(getRGBA(imageDataFromData.data, 10), getRGBA(imageData.data, 10));
+
+  var data = new Uint8ClampedArray(400);
+  data[22] = 129;
+  imageDataFromData = new ImageData(data, 20, 5);
+  _assertSame(imageDataFromData.width, 20, "imageDataFromData.width", "20");
+  _assertSame(imageDataFromData.height, 5, "imageDataFromData.height", "5");
+  _assertSame(imageDataFromData.data, data, "imageDataFromData.data", "data");
+  assertArrayEquals(getRGBA(imageDataFromData.data, 2), getRGBA(data, 2));
+  setRGBA(imageDataFromData.data, 2, testColor);
+  assertArrayEquals(getRGBA(imageDataFromData.data, 2), getRGBA(data, 2));
+
+  if (window.SharedArrayBuffer) {
+      assert_throws_js(TypeError, function() { new ImageData(new Uint16Array(new SharedArrayBuffer(32)), 4, 2); });
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.bounds.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.bounds.html
new file mode 100644
index 0000000000..5ea899ac86
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.bounds.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.imageData.object.ctor.size.bounds</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.imageData.object.ctor.size.bounds</h1>
+<p class="desc">ImageData has a usable constructor</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("ImageData has a usable constructor");
+_addTest(function(canvas, ctx) {
+
+_assertDifferent(window.ImageData, undefined, "window.ImageData", "undefined");
+assert_throws_dom("INDEX_SIZE_ERR", function() { new window.ImageData(0, 0); });
+assert_throws_dom("INDEX_SIZE_ERR", function() { new window.ImageData(0, 1); });
+assert_throws_dom("INDEX_SIZE_ERR", function() { new window.ImageData(1, 0); });
+
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.html
new file mode 100644
index 0000000000..a11d8e2340
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.ctor.size.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.imageData.object.ctor.size</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.imageData.object.ctor.size</h1>
+<p class="desc">ImageData has a usable constructor</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("ImageData has a usable constructor");
+_addTest(function(canvas, ctx) {
+
+  _assertDifferent(window.ImageData, undefined, "window.ImageData", "undefined");
+
+  var imgdata = new window.ImageData(2, 3);
+  _assertSame(imgdata.width, 2, "imgdata.width", "2");
+  _assertSame(imgdata.height, 3, "imgdata.height", "3");
+  _assertSame(imgdata.data.length, 2 * 3 * 4, "imgdata.data.length", "2 * 3 * 4");
+  for (var i = 0; i < imgdata.data.length; ++i) {
+    _assertSame(imgdata.data[i], 0, "imgdata.data[\""+(i)+"\"]", "0");
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.nan.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.nan.html
new file mode 100644
index 0000000000..974b5898a3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.nan.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.imageData.object.nan</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.imageData.object.nan</h1>
+<p class="desc">ImageData.data converts NaN to 0</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("ImageData.data converts NaN to 0");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  imgdata.data[0] = 100;
+  imgdata.data[0] = NaN;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  imgdata.data[0] = 100;
+  imgdata.data[0] = "cheese";
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.properties.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.properties.html
new file mode 100644
index 0000000000..7eefdb2f55
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.properties.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.imageData.object.properties</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.imageData.object.properties</h1>
+<p class="desc">ImageData objects have the right properties</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("ImageData objects have the right properties");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  _assertSame(typeof(imgdata.width), 'number', "typeof(imgdata.width)", "'number'");
+  _assertSame(typeof(imgdata.height), 'number', "typeof(imgdata.height)", "'number'");
+  _assertSame(typeof(imgdata.data), 'object', "typeof(imgdata.data)", "'object'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.readonly.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.readonly.html
new file mode 100644
index 0000000000..f002466bab
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.readonly.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.imageData.object.readonly</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.imageData.object.readonly</h1>
+<p class="desc">ImageData objects properties are read-only</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("ImageData objects properties are read-only");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  var w = imgdata.width;
+  var h = imgdata.height;
+  var d = imgdata.data;
+  imgdata.width = 123;
+  imgdata.height = 123;
+  imgdata.data = [100,100,100,100];
+  _assertSame(imgdata.width, w, "imgdata.width", "w");
+  _assertSame(imgdata.height, h, "imgdata.height", "h");
+  _assertSame(imgdata.data, d, "imgdata.data", "d");
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  _assertSame(imgdata.data[1], 0, "imgdata.data[\""+(1)+"\"]", "0");
+  _assertSame(imgdata.data[2], 0, "imgdata.data[\""+(2)+"\"]", "0");
+  _assertSame(imgdata.data[3], 0, "imgdata.data[\""+(3)+"\"]", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.round.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.round.html
new file mode 100644
index 0000000000..0f7da4fff5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.round.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.object.round</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.imageData.object.round</h1>
+<p class="desc">ImageData.data rounds numbers with round-to-zero</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("ImageData.data rounds numbers with round-to-zero");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  imgdata.data[0] = 0.499;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  imgdata.data[0] = 0.5;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  imgdata.data[0] = 0.501;
+  _assertSame(imgdata.data[0], 1, "imgdata.data[\""+(0)+"\"]", "1");
+  imgdata.data[0] = 1.499;
+  _assertSame(imgdata.data[0], 1, "imgdata.data[\""+(0)+"\"]", "1");
+  imgdata.data[0] = 1.5;
+  _assertSame(imgdata.data[0], 2, "imgdata.data[\""+(0)+"\"]", "2");
+  imgdata.data[0] = 1.501;
+  _assertSame(imgdata.data[0], 2, "imgdata.data[\""+(0)+"\"]", "2");
+  imgdata.data[0] = 2.5;
+  _assertSame(imgdata.data[0], 2, "imgdata.data[\""+(0)+"\"]", "2");
+  imgdata.data[0] = 3.5;
+  _assertSame(imgdata.data[0], 4, "imgdata.data[\""+(0)+"\"]", "4");
+  imgdata.data[0] = 252.5;
+  _assertSame(imgdata.data[0], 252, "imgdata.data[\""+(0)+"\"]", "252");
+  imgdata.data[0] = 253.5;
+  _assertSame(imgdata.data[0], 254, "imgdata.data[\""+(0)+"\"]", "254");
+  imgdata.data[0] = 254.5;
+  _assertSame(imgdata.data[0], 254, "imgdata.data[\""+(0)+"\"]", "254");
+  imgdata.data[0] = 256.5;
+  _assertSame(imgdata.data[0], 255, "imgdata.data[\""+(0)+"\"]", "255");
+  imgdata.data[0] = -0.5;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+  imgdata.data[0] = -1.5;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.set.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.set.html
new file mode 100644
index 0000000000..3d03bd6769
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.set.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.imageData.object.set</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.imageData.object.set</h1>
+<p class="desc">ImageData.data can be modified</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("ImageData.data can be modified");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  imgdata.data[0] = 100;
+  _assertSame(imgdata.data[0], 100, "imgdata.data[\""+(0)+"\"]", "100");
+  imgdata.data[0] = 200;
+  _assertSame(imgdata.data[0], 200, "imgdata.data[\""+(0)+"\"]", "200");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.string.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.string.html
new file mode 100644
index 0000000000..eda6f2838d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.string.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.imageData.object.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.imageData.object.string</h1>
+<p class="desc">ImageData.data converts strings to numbers with ToNumber</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("ImageData.data converts strings to numbers with ToNumber");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  imgdata.data[0] = 100;
+  imgdata.data[0] = "110";
+  _assertSame(imgdata.data[0], 110, "imgdata.data[\""+(0)+"\"]", "110");
+  imgdata.data[0] = 100;
+  imgdata.data[0] = "0x78";
+  _assertSame(imgdata.data[0], 120, "imgdata.data[\""+(0)+"\"]", "120");
+  imgdata.data[0] = 100;
+  imgdata.data[0] = " +130e0 ";
+  _assertSame(imgdata.data[0], 130, "imgdata.data[\""+(0)+"\"]", "130");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.undefined.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.undefined.html
new file mode 100644
index 0000000000..96867bec4a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.object.undefined.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.imageData.object.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.imageData.object.undefined</h1>
+<p class="desc">ImageData.data converts undefined to 0</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("ImageData.data converts undefined to 0");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  imgdata.data[0] = 100;
+  imgdata.data[0] = undefined;
+  _assertSame(imgdata.data[0], 0, "imgdata.data[\""+(0)+"\"]", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.html
new file mode 100644
index 0000000000..6ee38802f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.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.imageData.put.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.imageData.put.alpha</h1>
+<p class="desc">putImageData() puts non-solid image data correctly</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.imageData.put.alpha.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("putImageData() puts non-solid image data correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = 'rgba(0, 255, 0, 0.25)';
+  ctx.fillRect(0, 0, 100, 50)
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.putImageData(imgdata, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,64, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.png b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.png
new file mode 100644
index 0000000000..5428c65524
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.alpha.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.basic.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.basic.html
new file mode 100644
index 0000000000..17f7d3e8e6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.basic.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.imageData.put.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.imageData.put.basic</h1>
+<p class="desc">putImageData() puts image data from getImageData() onto the canvas</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("putImageData() puts image data from getImageData() onto the canvas");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.putImageData(imgdata, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.clip.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.clip.html
new file mode 100644
index 0000000000..948f617095
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.clip.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.imageData.put.clip</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.imageData.put.clip</h1>
+<p class="desc">putImageData() is not affected by clipping regions</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("putImageData() is not affected by clipping regions");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.beginPath();
+  ctx.rect(0, 0, 50, 50);
+  ctx.clip();
+  ctx.putImageData(imgdata, 0, 0);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.created.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.created.html
new file mode 100644
index 0000000000..4db45873a1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.created.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.imageData.put.created</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.imageData.put.created</h1>
+<p class="desc">putImageData() puts image data from createImageData() onto the canvas</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("putImageData() puts image data from createImageData() onto the canvas");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.createImageData(100, 50);
+  for (var i = 0; i < imgdata.data.length; i += 4) {
+      imgdata.data[i] = 0;
+      imgdata.data[i+1] = 255;
+      imgdata.data[i+2] = 0;
+      imgdata.data[i+3] = 255;
+  }
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.putImageData(imgdata, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.cross.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.cross.html
new file mode 100644
index 0000000000..10226834a3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.cross.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.imageData.put.cross</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.imageData.put.cross</h1>
+<p class="desc">putImageData() accepts image data got from a different canvas</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("putImageData() accepts image data got from a different canvas");
+_addTest(function(canvas, ctx) {
+
+  var canvas2 = document.createElement('canvas');
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.fillStyle = '#0f0';
+  ctx2.fillRect(0, 0, 100, 50)
+  var imgdata = ctx2.getImageData(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.putImageData(imgdata, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.negative.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.negative.html
new file mode 100644
index 0000000000..efaa6f2550
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.negative.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.imageData.put.dirty.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.imageData.put.dirty.negative</h1>
+<p class="desc">putImageData() handles negative-sized dirty rectangles correctly</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("putImageData() handles negative-sized dirty rectangles correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 20, 20)
+
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(40, 20, 20, 20)
+  ctx.putImageData(imgdata, 40, 20, 20, 20, -20, -20);
+
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 35,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 65,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,15, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,45, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.outside.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.outside.html
new file mode 100644
index 0000000000..86a77369f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.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.imageData.put.dirty.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.imageData.put.dirty.outside</h1>
+<p class="desc">putImageData() handles dirty rectangles outside the canvas correctly</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("putImageData() handles dirty rectangles outside the canvas correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+
+  ctx.putImageData(imgdata, 100, 20, 20, 20, -20, -20);
+  ctx.putImageData(imgdata, 200, 200, 0, 0, 100, 50);
+  ctx.putImageData(imgdata, 40, 20, -30, -20, 30, 20);
+  ctx.putImageData(imgdata, -30, 20, 0, 0, 30, 20);
+
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,15, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 98,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 1,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 1,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 1,45, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect1.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect1.html
new file mode 100644
index 0000000000..786db5ac4f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect1.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.imageData.put.dirty.rect1</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.imageData.put.dirty.rect1</h1>
+<p class="desc">putImageData() only modifies areas inside the dirty rectangle, using width and height</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("putImageData() only modifies areas inside the dirty rectangle, using width and height");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 20, 20)
+
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(40, 20, 20, 20)
+  ctx.putImageData(imgdata, 40, 20, 0, 0, 20, 20);
+
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 35,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 65,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,15, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,45, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect2.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect2.html
new file mode 100644
index 0000000000..f5f8a3a0d1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.rect2.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.imageData.put.dirty.rect2</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.imageData.put.dirty.rect2</h1>
+<p class="desc">putImageData() only modifies areas inside the dirty rectangle, using x and y</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("putImageData() only modifies areas inside the dirty rectangle, using x and y");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(60, 30, 20, 20)
+
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(40, 20, 20, 20)
+  ctx.putImageData(imgdata, -20, -10, 60, 30, 20, 20);
+
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 35,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 65,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,15, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,45, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.zero.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.zero.html
new file mode 100644
index 0000000000..d3799104dd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.dirty.zero.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.imageData.put.dirty.zero</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.imageData.put.dirty.zero</h1>
+<p class="desc">putImageData() with zero-sized dirty rectangle puts nothing</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("putImageData() with zero-sized dirty rectangle puts nothing");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.putImageData(imgdata, 0, 0, 0, 0, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.modified.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.modified.html
new file mode 100644
index 0000000000..70b70a866f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.modified.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.imageData.put.modified</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.imageData.put.modified</h1>
+<p class="desc">putImageData() puts modified image data correctly</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("putImageData() puts modified image data correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(45, 20, 10, 10)
+  var imgdata = ctx.getImageData(45, 20, 10, 10);
+  for (var i = 0, len = imgdata.width*imgdata.height*4; i < len; i += 4)
+  {
+      imgdata.data[i] = 0;
+      imgdata.data[i+1] = 255;
+  }
+  ctx.putImageData(imgdata, 45, 20);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.nonfinite.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.nonfinite.html
new file mode 100644
index 0000000000..ab03f9f20f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.nonfinite.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.put.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.imageData.put.nonfinite</h1>
+<p class="desc">putImageData() 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("putImageData() throws TypeError if arguments are not finite");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = ctx.getImageData(0, 0, 10, 10);
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, -Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, NaN, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, -Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, NaN); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, -Infinity, 10, 10, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, NaN, 10, 10, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, -Infinity, 10, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, NaN, 10, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, -Infinity, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, NaN, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, -Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, NaN, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, 10, -Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, 10, NaN, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, 10, 10, -Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, 10, 10, NaN); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, Infinity, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, Infinity, 10, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, Infinity, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, Infinity, 10, 10, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, Infinity, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, Infinity, 10, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, Infinity, 10, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, 10); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, Infinity, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, Infinity, 10, Infinity); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 10, 10, 10, 10, Infinity, Infinity); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.null.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.null.html
new file mode 100644
index 0000000000..4ed429fe7c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.null.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.put.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.imageData.put.null</h1>
+<p class="desc">putImageData() with null imagedata throws TypeError</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("putImageData() with null imagedata throws TypeError");
+_addTest(function(canvas, ctx) {
+
+  assert_throws_js(TypeError, function() { ctx.putImageData(null, 0, 0); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.path.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.path.html
new file mode 100644
index 0000000000..e32d7cc257
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.path.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.imageData.put.path</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.imageData.put.path</h1>
+<p class="desc">putImageData() does not affect the current path</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("putImageData() does not affect the current path");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.rect(0, 0, 100, 50);
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+  ctx.putImageData(imgdata, 0, 0);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unaffected.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unaffected.html
new file mode 100644
index 0000000000..bad06b745f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unaffected.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.imageData.put.unaffected</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.imageData.put.unaffected</h1>
+<p class="desc">putImageData() is not affected by context state</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("putImageData() is not affected by context state");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50)
+  var imgdata = ctx.getImageData(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50)
+  ctx.globalAlpha = 0.1;
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.shadowColor = '#f00';
+  ctx.shadowBlur = 1;
+  ctx.translate(100, 50);
+  ctx.scale(0.1, 0.1);
+  ctx.putImageData(imgdata, 0, 0);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unchanged.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unchanged.html
new file mode 100644
index 0000000000..026e4347ed
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.unchanged.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.imageData.put.unchanged</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.imageData.put.unchanged</h1>
+<p class="desc">putImageData(getImageData(...), ...) has no effect</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("putImageData(getImageData(...), ...) has no effect");
+_addTest(function(canvas, ctx) {
+
+  var i = 0;
+  for (var y = 0; y < 16; ++y) {
+      for (var x = 0; x < 16; ++x, ++i) {
+          ctx.fillStyle = 'rgba(' + i + ',' + (Math.floor(i*1.5) % 256) + ',' + (Math.floor(i*23.3) % 256) + ',' + (i/256) + ')';
+          ctx.fillRect(x, y, 1, 1);
+      }
+  }
+  var imgdata1 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
+  var olddata = [];
+  for (var i = 0; i < imgdata1.data.length; ++i)
+      olddata[i] = imgdata1.data[i];
+
+  ctx.putImageData(imgdata1, 0.1, 0.2);
+
+  var imgdata2 = ctx.getImageData(0.1, 0.2, 15.8, 15.9);
+  for (var i = 0; i < imgdata2.data.length; ++i) {
+      _assertSame(olddata[i], imgdata2.data[i], "olddata[\""+(i)+"\"]", "imgdata2.data[\""+(i)+"\"]");
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.wrongtype.html b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.wrongtype.html
new file mode 100644
index 0000000000..9e43b1fbe9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/pixel-manipulation/2d.imageData.put.wrongtype.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.imageData.put.wrongtype</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.imageData.put.wrongtype</h1>
+<p class="desc">putImageData() does not accept non-ImageData 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("putImageData() does not accept non-ImageData objects");
+_addTest(function(canvas, ctx) {
+
+  var imgdata = { width: 1, height: 1, data: [255, 0, 0, 255] };
+  assert_throws_js(TypeError, function() { ctx.putImageData(imgdata, 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.putImageData("cheese", 0, 0); });
+  assert_throws_js(TypeError, function() { ctx.putImageData(42, 0, 0); });
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.basic.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.basic.html
new file mode 100644
index 0000000000..0753ec6da8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.basic.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.reset.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.reset.basic</h1>
+<p class="desc">reset clears to transparent black</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("reset clears to transparent black");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.reset();
+  _assertPixel(canvas, 0,0, 0,0,0,0);
+  _assertPixel(canvas, 50,25, 0,0,0,0);
+  _assertPixel(canvas, 25,50, 0,0,0,0);
+  _assertPixel(canvas, 100,50, 0,0,0,0);
+  _assertPixel(canvas, 0,50, 0,0,0,0);
+  _assertPixel(canvas, 100,0, 0,0,0,0);
+  t.done();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow-expected.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow-expected.html
new file mode 100644
index 0000000000..182f7e40cd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.reset.render.drop_shadow</title>
+<h1>2d.reset.render.drop_shadow</h1>
+<p class="desc">check that drop shadows are correctly rendered after reset</p>
+<canvas id="canvas" width="500" height="500">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillRect(100, 100, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow.html
new file mode 100644
index 0000000000..264355c8b3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.drop_shadow.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.reset.render.drop_shadow-expected.html">
+<title>Canvas test: 2d.reset.render.drop_shadow</title>
+<h1>2d.reset.render.drop_shadow</h1>
+<p class="desc">check that drop shadows are correctly rendered after reset</p>
+<canvas id="canvas" width="500" height="500">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.shadowOffsetX = 10;
+  ctx.shadowOffsetY = 10;
+  ctx.shadowColor = "red";
+  ctx.shadowBlur = 10;
+
+  ctx.reset();
+
+  ctx.fillRect(100, 100, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation-expected.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation-expected.html
new file mode 100644
index 0000000000..1f9d247634
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.reset.render.global_composite_operation</title>
+<h1>2d.reset.render.global_composite_operation</h1>
+<p class="desc">check that canvas correctly renders rectangles with the default global composite operation after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillRect(10, 10, 100, 100);
+  ctx.fillRect(50, 50, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation.html
new file mode 100644
index 0000000000..fc851b84b8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.global_composite_operation.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.reset.render.global_composite_operation-expected.html">
+<title>Canvas test: 2d.reset.render.global_composite_operation</title>
+<h1>2d.reset.render.global_composite_operation</h1>
+<p class="desc">check that canvas correctly renders rectangles with the default global composite operation after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.globalCompositeOperation = "xor";
+
+  ctx.reset();
+
+  ctx.fillRect(10, 10, 100, 100);
+  ctx.fillRect(50, 50, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line-expected.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line-expected.html
new file mode 100644
index 0000000000..dcd648d8c3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line-expected.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.reset.render.line</title>
+<h1>2d.reset.render.line</h1>
+<p class="desc">check that lines are correctly rendered after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginPath();
+  ctx.moveTo(100, 100);
+  ctx.lineTo(100, 300);
+  ctx.lineTo(300, 300);
+  ctx.lineTo(300, 100);
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line.html
new file mode 100644
index 0000000000..0dda7c7a7e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.line.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.reset.render.line-expected.html">
+<title>Canvas test: 2d.reset.render.line</title>
+<h1>2d.reset.render.line</h1>
+<p class="desc">check that lines are correctly rendered after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.lineWidth = 10;
+  ctx.lineCap = "round";
+  ctx.lineJoin = "bevel";
+  ctx.lineDashOffset = 10;
+  ctx.setLineDash([20]);
+
+  ctx.reset();
+
+  ctx.beginPath();
+  ctx.moveTo(100, 100);
+  ctx.lineTo(100, 300);
+  ctx.lineTo(300, 300);
+  ctx.lineTo(300, 100);
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc-expected.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc-expected.html
new file mode 100644
index 0000000000..c359e6b42e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.reset.render.misc</title>
+<h1>2d.reset.render.misc</h1>
+<p class="desc">check that canvas correctly renders rectangles after reset (states not covered by other tests)</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillRect(0, 0, 100, 100);
+  ctx.strokeRect(150, 150, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc.html
new file mode 100644
index 0000000000..61d2dbe2f0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.misc.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.reset.render.misc-expected.html">
+<title>Canvas test: 2d.reset.render.misc</title>
+<h1>2d.reset.render.misc</h1>
+<p class="desc">check that canvas correctly renders rectangles after reset (states not covered by other tests)</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillStyle = "red";
+  ctx.strokeStyle = "red";
+  ctx.globalAlpha = 0.5;
+  ctx.filter = "blur(2px)";
+
+  ctx.reset();
+
+  ctx.fillRect(0, 0, 100, 100);
+  ctx.strokeRect(150, 150, 100, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit-expected.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit-expected.html
new file mode 100644
index 0000000000..c91f485c53
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit-expected.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.reset.render.miter_limit</title>
+<h1>2d.reset.render.miter_limit</h1>
+<p class="desc">check that the lines are correctly rendered with the default miter limit after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.lineWidth = 10;
+
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (let i = 0; i < 24; i++) {
+    const dy = i % 2 === 0 ? 25 : -25;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit.html
new file mode 100644
index 0000000000..f6eaed00f6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.miter_limit.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.reset.render.miter_limit-expected.html">
+<title>Canvas test: 2d.reset.render.miter_limit</title>
+<h1>2d.reset.render.miter_limit</h1>
+<p class="desc">check that the lines are correctly rendered with the default miter limit after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.miterLimit = 6;
+
+  ctx.reset();
+
+  ctx.lineWidth = 10;
+
+  ctx.beginPath();
+  ctx.moveTo(0, 100);
+  for (let i = 0; i < 24; i++) {
+    const dy = i % 2 === 0 ? 25 : -25;
+    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
+  }
+  ctx.stroke();
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text-expected.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text-expected.html
new file mode 100644
index 0000000000..7221483b02
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.reset.render.text</title>
+<h1>2d.reset.render.text</h1>
+<p class="desc">check that text is correctly rendered after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text.html
new file mode 100644
index 0000000000..3d76ddf292
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.render.text.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.reset.render.text-expected.html">
+<title>Canvas test: 2d.reset.render.text</title>
+<h1>2d.reset.render.text</h1>
+<p class="desc">check that text is correctly rendered after reset</p>
+<canvas id="canvas" width="400" height="400">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "24px serif";
+  ctx.textAlign = "center";
+  ctx.textBaseline = "hanging";
+  ctx.direction = "rtl";
+  ctx.letterSpacing = "10px";
+  ctx.fontKerning = "none";
+  ctx.fontStretch = "semi-condensed";
+  ctx.fontVariantCaps = "tilting-caps";
+  ctx.textRendering = "optimizeLegibility";
+  ctx.wordSpacing = "20px";
+
+  ctx.reset();
+
+  ctx.fillText("Lorem ipsum dolor sit amet, consectetur adipiscing elit", 0, 10);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip-expected.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip-expected.html
new file mode 100644
index 0000000000..974b37fab4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip-expected.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.reset.state.clip</title>
+<h1>2d.reset.state.clip</h1>
+<p class="desc">check that the clip is reset</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.fillRect(0, 0, 200, 200);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip.html
new file mode 100644
index 0000000000..ab3fa1081c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.clip.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.reset.state.clip-expected.html">
+<title>Canvas test: 2d.reset.state.clip</title>
+<h1>2d.reset.state.clip</h1>
+<p class="desc">check that the clip is reset</p>
+<canvas id="canvas" width="200" height="200">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.beginPath();
+  ctx.rect(0, 0, 100, 100);
+  ctx.clip();
+
+  ctx.fillRect(0, 0, 200, 200);
+
+  ctx.reset();
+
+  ctx.fillRect(0, 0, 200, 200);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.direction.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.direction.html
new file mode 100644
index 0000000000..8b27e3cfe4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.direction.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.reset.state.direction</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.reset.state.direction</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.direction;
+
+  ctx.direction = 'rtl';
+  _assert(ctx.direction == 'rtl', "ctx.direction == 'rtl'");
+
+  ctx.reset();
+  _assert(ctx.direction == default_value, "ctx.direction == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.fill_style.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.fill_style.html
new file mode 100644
index 0000000000..1239e2ec7f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.fill_style.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.reset.state.fill_style</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.reset.state.fill_style</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.fillStyle;
+
+  ctx.fillStyle = '#ffffff';
+  _assert(ctx.fillStyle == '#ffffff', "ctx.fillStyle == '#ffffff'");
+
+  ctx.reset();
+  _assert(ctx.fillStyle == default_value, "ctx.fillStyle == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.filter.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.filter.html
new file mode 100644
index 0000000000..80ccd22bb2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.filter.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.reset.state.filter</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.reset.state.filter</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.filter;
+
+  ctx.filter = 'blur(10px)';
+  _assert(ctx.filter == 'blur(10px)', "ctx.filter == 'blur(10px)'");
+
+  ctx.reset();
+  _assert(ctx.filter == default_value, "ctx.filter == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font.html
new file mode 100644
index 0000000000..c93d038a62
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font.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.reset.state.font</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.reset.state.font</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.font;
+
+  ctx.font = '16px sans-serif';
+  _assert(ctx.font == '16px sans-serif', "ctx.font == '16px sans-serif'");
+
+  ctx.reset();
+  _assert(ctx.font == default_value, "ctx.font == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_kerning.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_kerning.html
new file mode 100644
index 0000000000..d3ad9d386c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_kerning.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.reset.state.font_kerning</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.reset.state.font_kerning</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.fontKerning;
+
+  ctx.fontKerning = 'normal';
+  _assert(ctx.fontKerning == 'normal', "ctx.fontKerning == 'normal'");
+
+  ctx.reset();
+  _assert(ctx.fontKerning == default_value, "ctx.fontKerning == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_stretch.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_stretch.html
new file mode 100644
index 0000000000..0a91c640b2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_stretch.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.reset.state.font_stretch</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.reset.state.font_stretch</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.fontStretch;
+
+  ctx.fontStretch = 'ultra-condensed';
+  _assert(ctx.fontStretch == 'ultra-condensed', "ctx.fontStretch == 'ultra-condensed'");
+
+  ctx.reset();
+  _assert(ctx.fontStretch == default_value, "ctx.fontStretch == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_variant_caps.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_variant_caps.html
new file mode 100644
index 0000000000..262c4fc4d3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.font_variant_caps.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.reset.state.font_variant_caps</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.reset.state.font_variant_caps</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.fontVariantCaps;
+
+  ctx.fontVariantCaps = 'unicase';
+  _assert(ctx.fontVariantCaps == 'unicase', "ctx.fontVariantCaps == 'unicase'");
+
+  ctx.reset();
+  _assert(ctx.fontVariantCaps == default_value, "ctx.fontVariantCaps == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_alpha.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_alpha.html
new file mode 100644
index 0000000000..18b825e60f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_alpha.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.reset.state.global_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.reset.state.global_alpha</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.globalAlpha;
+
+  ctx.globalAlpha = 0.5;
+  _assert(ctx.globalAlpha == 0.5, "ctx.globalAlpha == 0.5");
+
+  ctx.reset();
+  _assert(ctx.globalAlpha == default_value, "ctx.globalAlpha == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_composite_operation.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_composite_operation.html
new file mode 100644
index 0000000000..aee6841d95
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.global_composite_operation.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.reset.state.global_composite_operation</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.reset.state.global_composite_operation</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.globalCompositeOperation;
+
+  ctx.globalCompositeOperation = 'destination-over';
+  _assert(ctx.globalCompositeOperation == 'destination-over', "ctx.globalCompositeOperation == 'destination-over'");
+
+  ctx.reset();
+  _assert(ctx.globalCompositeOperation == default_value, "ctx.globalCompositeOperation == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_enabled.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_enabled.html
new file mode 100644
index 0000000000..e865967a38
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_enabled.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.reset.state.image_smoothing_enabled</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.reset.state.image_smoothing_enabled</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.imageSmoothingEnabled;
+
+  ctx.imageSmoothingEnabled = false;
+  _assert(ctx.imageSmoothingEnabled == false, "ctx.imageSmoothingEnabled == false");
+
+  ctx.reset();
+  _assert(ctx.imageSmoothingEnabled == default_value, "ctx.imageSmoothingEnabled == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_quality.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_quality.html
new file mode 100644
index 0000000000..e78abfce77
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.image_smoothing_quality.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.reset.state.image_smoothing_quality</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.reset.state.image_smoothing_quality</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.imageSmoothingQuality;
+
+  ctx.imageSmoothingQuality = 'high';
+  _assert(ctx.imageSmoothingQuality == 'high', "ctx.imageSmoothingQuality == 'high'");
+
+  ctx.reset();
+  _assert(ctx.imageSmoothingQuality == default_value, "ctx.imageSmoothingQuality == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.letter_spacing.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.letter_spacing.html
new file mode 100644
index 0000000000..3e732b1fa0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.letter_spacing.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.reset.state.letter_spacing</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.reset.state.letter_spacing</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.letterSpacing;
+
+  ctx.letterSpacing = '12px';
+  _assert(ctx.letterSpacing == '12px', "ctx.letterSpacing == '12px'");
+
+  ctx.reset();
+  _assert(ctx.letterSpacing == default_value, "ctx.letterSpacing == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_cap.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_cap.html
new file mode 100644
index 0000000000..8020e284a7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_cap.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.reset.state.line_cap</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.reset.state.line_cap</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.lineCap;
+
+  ctx.lineCap = 'square';
+  _assert(ctx.lineCap == 'square', "ctx.lineCap == 'square'");
+
+  ctx.reset();
+  _assert(ctx.lineCap == default_value, "ctx.lineCap == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash.html
new file mode 100644
index 0000000000..ca68ae5158
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash.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.reset.state.line_dash</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.reset.state.line_dash</h1>
+<p class="desc">check that the line dash is reset</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("check that the line dash is reset");
+_addTest(function(canvas, ctx) {
+
+  ctx.setLineDash([1, 2]);
+
+  ctx.reset();
+  _assert(ctx.getLineDash().length == 0, "ctx.getLineDash().length == 0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash_offset.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash_offset.html
new file mode 100644
index 0000000000..10015199b9
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_dash_offset.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.reset.state.line_dash_offset</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.reset.state.line_dash_offset</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.lineDashOffset;
+
+  ctx.lineDashOffset = 1.0;
+  _assert(ctx.lineDashOffset == 1.0, "ctx.lineDashOffset == 1.0");
+
+  ctx.reset();
+  _assert(ctx.lineDashOffset == default_value, "ctx.lineDashOffset == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_join.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_join.html
new file mode 100644
index 0000000000..1c20cb1b2a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_join.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.reset.state.line_join</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.reset.state.line_join</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.lineJoin;
+
+  ctx.lineJoin = 'bevel';
+  _assert(ctx.lineJoin == 'bevel', "ctx.lineJoin == 'bevel'");
+
+  ctx.reset();
+  _assert(ctx.lineJoin == default_value, "ctx.lineJoin == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_width.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_width.html
new file mode 100644
index 0000000000..db2516b535
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.line_width.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.reset.state.line_width</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.reset.state.line_width</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.lineWidth;
+
+  ctx.lineWidth = 1;
+  _assert(ctx.lineWidth == 1, "ctx.lineWidth == 1");
+
+  ctx.reset();
+  _assert(ctx.lineWidth == default_value, "ctx.lineWidth == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.miter_limit.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.miter_limit.html
new file mode 100644
index 0000000000..7920c38d52
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.miter_limit.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.reset.state.miter_limit</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.reset.state.miter_limit</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.miterLimit;
+
+  ctx.miterLimit = 1.0;
+  _assert(ctx.miterLimit == 1.0, "ctx.miterLimit == 1.0");
+
+  ctx.reset();
+  _assert(ctx.miterLimit == default_value, "ctx.miterLimit == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_blur.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_blur.html
new file mode 100644
index 0000000000..07784de7d5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_blur.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.reset.state.shadow_blur</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.reset.state.shadow_blur</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.shadowBlur;
+
+  ctx.shadowBlur = 10.0;
+  _assert(ctx.shadowBlur == 10.0, "ctx.shadowBlur == 10.0");
+
+  ctx.reset();
+  _assert(ctx.shadowBlur == default_value, "ctx.shadowBlur == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_color.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_color.html
new file mode 100644
index 0000000000..9e8ee6c7f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_color.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.reset.state.shadow_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.reset.state.shadow_color</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.shadowColor;
+
+  ctx.shadowColor = '#ff0000';
+  _assert(ctx.shadowColor == '#ff0000', "ctx.shadowColor == '#ff0000'");
+
+  ctx.reset();
+  _assert(ctx.shadowColor == default_value, "ctx.shadowColor == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_x.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_x.html
new file mode 100644
index 0000000000..7992ce4c1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_x.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.reset.state.shadow_offset_x</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.reset.state.shadow_offset_x</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.shadowOffsetX;
+
+  ctx.shadowOffsetX = 10.0;
+  _assert(ctx.shadowOffsetX == 10.0, "ctx.shadowOffsetX == 10.0");
+
+  ctx.reset();
+  _assert(ctx.shadowOffsetX == default_value, "ctx.shadowOffsetX == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_y.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_y.html
new file mode 100644
index 0000000000..84a38e0bdb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.shadow_offset_y.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.reset.state.shadow_offset_y</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.reset.state.shadow_offset_y</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.shadowOffsetY;
+
+  ctx.shadowOffsetY = 10.0;
+  _assert(ctx.shadowOffsetY == 10.0, "ctx.shadowOffsetY == 10.0");
+
+  ctx.reset();
+  _assert(ctx.shadowOffsetY == default_value, "ctx.shadowOffsetY == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.stroke_style.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.stroke_style.html
new file mode 100644
index 0000000000..4acb19c41e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.stroke_style.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.reset.state.stroke_style</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.reset.state.stroke_style</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.strokeStyle;
+
+  ctx.strokeStyle = '#ffffff';
+  _assert(ctx.strokeStyle == '#ffffff', "ctx.strokeStyle == '#ffffff'");
+
+  ctx.reset();
+  _assert(ctx.strokeStyle == default_value, "ctx.strokeStyle == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_align.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_align.html
new file mode 100644
index 0000000000..a625737d72
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_align.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.reset.state.text_align</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.reset.state.text_align</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.textAlign;
+
+  ctx.textAlign = 'end';
+  _assert(ctx.textAlign == 'end', "ctx.textAlign == 'end'");
+
+  ctx.reset();
+  _assert(ctx.textAlign == default_value, "ctx.textAlign == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_baseline.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_baseline.html
new file mode 100644
index 0000000000..2e4169bdb1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_baseline.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.reset.state.text_baseline</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.reset.state.text_baseline</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.textBaseline;
+
+  ctx.textBaseline = 'middle';
+  _assert(ctx.textBaseline == 'middle', "ctx.textBaseline == 'middle'");
+
+  ctx.reset();
+  _assert(ctx.textBaseline == default_value, "ctx.textBaseline == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_rendering.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_rendering.html
new file mode 100644
index 0000000000..e182babee4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.text_rendering.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.reset.state.text_rendering</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.reset.state.text_rendering</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.textRendering;
+
+  ctx.textRendering = 'geometricPrecision';
+  _assert(ctx.textRendering == 'geometricPrecision', "ctx.textRendering == 'geometricPrecision'");
+
+  ctx.reset();
+  _assert(ctx.textRendering == default_value, "ctx.textRendering == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.transformation_matrix.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.transformation_matrix.html
new file mode 100644
index 0000000000..7872681bfc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.transformation_matrix.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.reset.state.transformation_matrix</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.reset.state.transformation_matrix</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  ctx.scale(2, 2);
+
+  ctx.reset();
+  _assert(ctx.getTransform().isIdentity, "ctx.getTransform().isIdentity");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.word_spacing.html b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.word_spacing.html
new file mode 100644
index 0000000000..c4a448f21c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/reset/2d.reset.state.word_spacing.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.reset.state.word_spacing</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.reset.state.word_spacing</h1>
+<p class="desc">check that the state is reset</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("check that the state is reset");
+_addTest(function(canvas, ctx) {
+
+  const default_value = ctx.wordSpacing;
+
+  ctx.wordSpacing = '12px';
+  _assert(ctx.wordSpacing == '12px', "ctx.wordSpacing == '12px'");
+
+  ctx.reset();
+  _assert(ctx.wordSpacing == default_value, "ctx.wordSpacing == default_value");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.basic.html b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.basic.html
new file mode 100644
index 0000000000..e4cf8ea9ad
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.basic.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.scrollPathIntoView.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.scrollPathIntoView.basic</h1>
+<p class="desc">scrollPathIntoView() works</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("scrollPathIntoView() works");
+_addTest(function(canvas, ctx) {
+
+  var div = document.createElement('div');
+  div.style.cssText = 'width: 200vw; height: 200vh';
+  document.body.appendChild(div);
+  canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
+  window.scrollTo(0, 0);
+
+  ctx.beginPath();
+  ctx.rect(4, 8, 16, 32);
+  ctx.scrollPathIntoView();
+  var rect = canvas.getBoundingClientRect();
+  _assertSame(Math.round(rect.top), -8, "Math.round(rect.top)", "-8");
+  _assertSame(Math.round(rect.left), 200, "Math.round(rect.left)", "200");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.path.html b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.path.html
new file mode 100644
index 0000000000..ee1f833aaf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.path.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.scrollPathIntoView.path</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.scrollPathIntoView.path</h1>
+<p class="desc">scrollPathIntoView() with path argument works</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("scrollPathIntoView() with path argument works");
+_addTest(function(canvas, ctx) {
+
+  var div = document.createElement('div');
+  div.style.cssText = 'width: 200vw; height: 200vh';
+  document.body.appendChild(div);
+  canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
+  window.scrollTo(0, 0);
+
+  var path = new Path2D();
+  path.rect(4, 8, 16, 32);
+  ctx.scrollPathIntoView(path);
+  var rect = canvas.getBoundingClientRect();
+  _assertSame(Math.round(rect.top), -8, "Math.round(rect.top)", "-8");
+  _assertSame(Math.round(rect.left), 200, "Math.round(rect.left)", "200");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalLR.html b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalLR.html
new file mode 100644
index 0000000000..9d09980b6f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalLR.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.scrollPathIntoView.verticalLR</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.scrollPathIntoView.verticalLR</h1>
+<p class="desc">scrollPathIntoView() works in vertical-lr writing mode</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("scrollPathIntoView() works in vertical-lr writing mode");
+_addTest(function(canvas, ctx) {
+
+  document.documentElement.style.cssText = 'writing-mode: vertical-lr';
+  var div = document.createElement('div');
+  div.style.cssText = 'width: 200vw; height: 200vh';
+  document.body.appendChild(div);
+  canvas.style.cssText = 'position: absolute; top: 100px; left: 200px; border: none;';
+  window.scrollTo(0, 0);
+
+  ctx.beginPath();
+  ctx.rect(4, 8, 16, 32);
+  ctx.scrollPathIntoView();
+  var rect = canvas.getBoundingClientRect();
+  _assertSame(Math.round(rect.top), 100, "Math.round(rect.top)", "100");
+  _assertSame(Math.round(rect.left), -4, "Math.round(rect.left)", "-4");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalRL.html b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalRL.html
new file mode 100644
index 0000000000..8193106f8e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/scroll/2d.scrollPathIntoView.verticalRL.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.scrollPathIntoView.verticalRL</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.scrollPathIntoView.verticalRL</h1>
+<p class="desc">scrollPathIntoView() works in vertical-rl writing mode</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("scrollPathIntoView() works in vertical-rl writing mode");
+_addTest(function(canvas, ctx) {
+
+  document.documentElement.style.cssText = 'writing-mode: vertical-rl';
+  var div = document.createElement('div');
+  div.style.cssText = 'width: 200vw; height: 200vh';
+  document.body.appendChild(div);
+  canvas.style.cssText = 'position: absolute; top: 100px; right: 200px; border: none;';
+  window.scrollTo(0, 0);
+
+  ctx.beginPath();
+  ctx.rect(4, 8, 16, 32);
+  ctx.scrollPathIntoView();
+  var rect = canvas.getBoundingClientRect();
+  var viewportWidth = document.scrollingElement.clientWidth;
+  var canvasWidth = canvas.width;
+  _assertSame(Math.round(rect.top), 100, "Math.round(rect.top)", "100");
+  _assertSame(Math.round(rect.right), viewportWidth + (canvasWidth - 4 - 16), "Math.round(rect.right)", "viewportWidth + (canvasWidth - 4 - 16)");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.1.html
new file mode 100644
index 0000000000..8888ae6885
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.1.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.shadow.alpha.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.shadow.alpha.1</h1>
+<p class="desc">Shadow color alpha components are used</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("Shadow color alpha components are used");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = 'rgba(255, 0, 0, 0.01)';
+  ctx.shadowOffsetY = 50;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 4);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.html
new file mode 100644
index 0000000000..534d3dd16d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.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.shadow.alpha.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.shadow.alpha.2</h1>
+<p class="desc">Shadow color alpha components are used</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.shadow.alpha.2.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadow color alpha components are used");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = 'rgba(0, 0, 255, 0.5)';
+  ctx.shadowOffsetY = 50;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.2.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.html
new file mode 100644
index 0000000000..468228208c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.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.shadow.alpha.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.shadow.alpha.3</h1>
+<p class="desc">Shadows are affected by globalAlpha</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.shadow.alpha.3.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows are affected by globalAlpha");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
+  ctx.shadowColor = '#00f';
+  ctx.shadowOffsetY = 50;
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.3.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.html
new file mode 100644
index 0000000000..2932c9dfe1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.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.shadow.alpha.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.shadow.alpha.4</h1>
+<p class="desc">Shadows with alpha components are correctly affected by globalAlpha</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.shadow.alpha.4.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows with alpha components are correctly affected by globalAlpha");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00'; // (work around broken Firefox globalAlpha caching)
+  ctx.shadowColor = 'rgba(0, 0, 255, 0.707)';
+  ctx.shadowOffsetY = 50;
+  ctx.globalAlpha = 0.707;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.4.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.html
new file mode 100644
index 0000000000..ffa9ed8fde
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.alpha.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.shadow.alpha.5</h1>
+<p class="desc">Shadows of shapes with alpha components are drawn correctly</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.shadow.alpha.5.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows of shapes with alpha components are drawn correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = 'rgba(64, 0, 0, 0.5)';
+  ctx.shadowColor = '#00f';
+  ctx.shadowOffsetY = 50;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.alpha.5.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.initial.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.initial.html
new file mode 100644
index 0000000000..b688156546
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.initial.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.attributes.shadowBlur.initial</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.shadow.attributes.shadowBlur.initial</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.shadowBlur, 0, "ctx.shadowBlur", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.invalid.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.invalid.html
new file mode 100644
index 0000000000..68f5dd41bc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.invalid.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.shadow.attributes.shadowBlur.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.shadow.attributes.shadowBlur.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) {
+
+  ctx.shadowBlur = 1;
+  ctx.shadowBlur = -2;
+  _assertSame(ctx.shadowBlur, 1, "ctx.shadowBlur", "1");
+
+  ctx.shadowBlur = 1;
+  ctx.shadowBlur = Infinity;
+  _assertSame(ctx.shadowBlur, 1, "ctx.shadowBlur", "1");
+
+  ctx.shadowBlur = 1;
+  ctx.shadowBlur = -Infinity;
+  _assertSame(ctx.shadowBlur, 1, "ctx.shadowBlur", "1");
+
+  ctx.shadowBlur = 1;
+  ctx.shadowBlur = NaN;
+  _assertSame(ctx.shadowBlur, 1, "ctx.shadowBlur", "1");
+
+  ctx.shadowBlur = 1;
+  ctx.shadowBlur = 'string';
+  _assertSame(ctx.shadowBlur, 1, "ctx.shadowBlur", "1");
+
+  ctx.shadowBlur = 1;
+  ctx.shadowBlur = true;
+  _assertSame(ctx.shadowBlur, 1, "ctx.shadowBlur", "1");
+
+  ctx.shadowBlur = 1;
+  ctx.shadowBlur = false;
+  _assertSame(ctx.shadowBlur, 0, "ctx.shadowBlur", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.valid.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.valid.html
new file mode 100644
index 0000000000..51063a6ade
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowBlur.valid.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.shadow.attributes.shadowBlur.valid</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.shadow.attributes.shadowBlur.valid</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.shadowBlur = 1;
+  _assertSame(ctx.shadowBlur, 1, "ctx.shadowBlur", "1");
+
+  ctx.shadowBlur = 0.5;
+  _assertSame(ctx.shadowBlur, 0.5, "ctx.shadowBlur", "0.5");
+
+  ctx.shadowBlur = 1e6;
+  _assertSame(ctx.shadowBlur, 1e6, "ctx.shadowBlur", "1e6");
+
+  ctx.shadowBlur = 0;
+  _assertSame(ctx.shadowBlur, 0, "ctx.shadowBlur", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.basic.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.basic.html
new file mode 100644
index 0000000000..bfdc54d31b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.basic.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.shadow.attributes.shadowColor.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.shadow.attributes.shadowColor.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>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("currentColor is computed from the canvas element");
+_addTest(function(canvas, ctx) {
+
+  canvas.style.color = '#0f0';
+  ctx.shadowColor = 'currentColor';
+  _assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.changed.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.changed.html
new file mode 100644
index 0000000000..9eee2122d5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.changed.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.shadow.attributes.shadowColor.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.shadow.attributes.shadowColor.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>
+
+<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.style.color = '#0f0';
+  ctx.shadowColor = 'currentColor';
+  canvas.style.color = '#f00';
+  _assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.removed.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.removed.html
new file mode 100644
index 0000000000..e1989cbdc8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.removed.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.shadow.attributes.shadowColor.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.shadow.attributes.shadowColor.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>
+
+<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.documentElement.style.color = '#f00';
+  document.body.style.color = '#f00';
+  canvas.style.color = '#f00';
+
+  canvas.remove();
+  ctx.shadowColor = 'currentColor';
+  _assertSame(ctx.shadowColor, '#000000', "ctx.shadowColor", "'#000000'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.initial.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.initial.html
new file mode 100644
index 0000000000..f4d0d33d6d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.initial.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.attributes.shadowColor.initial</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.shadow.attributes.shadowColor.initial</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.shadowColor, 'rgba(0, 0, 0, 0)', "ctx.shadowColor", "'rgba(0, 0, 0, 0)'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.invalid.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.invalid.html
new file mode 100644
index 0000000000..73f835dd96
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.invalid.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.shadow.attributes.shadowColor.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.shadow.attributes.shadowColor.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) {
+
+  ctx.shadowColor = '#00ff00';
+  ctx.shadowColor = 'bogus';
+  _assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
+
+  ctx.shadowColor = '#00ff00';
+  ctx.shadowColor = 'red bogus';
+  _assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
+
+  ctx.shadowColor = '#00ff00';
+  ctx.shadowColor = ctx;
+  _assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
+
+  ctx.shadowColor = '#00ff00';
+  ctx.shadowColor = undefined;
+  _assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.valid.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.valid.html
new file mode 100644
index 0000000000..bc86c3d6c1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.valid.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.shadow.attributes.shadowColor.valid</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.shadow.attributes.shadowColor.valid</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.shadowColor = 'lime';
+  _assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
+
+  ctx.shadowColor = 'RGBA(0,255, 0,0)';
+  _assertSame(ctx.shadowColor, 'rgba(0, 255, 0, 0)', "ctx.shadowColor", "'rgba(0, 255, 0, 0)'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.initial.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.initial.html
new file mode 100644
index 0000000000..056dd1607b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.initial.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.shadow.attributes.shadowOffset.initial</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.shadow.attributes.shadowOffset.initial</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.shadowOffsetX, 0, "ctx.shadowOffsetX", "0");
+  _assertSame(ctx.shadowOffsetY, 0, "ctx.shadowOffsetY", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.invalid.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.invalid.html
new file mode 100644
index 0000000000..1567edb16a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.invalid.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.attributes.shadowOffset.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.shadow.attributes.shadowOffset.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) {
+
+  ctx.shadowOffsetX = 1;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowOffsetX = Infinity;
+  ctx.shadowOffsetY = Infinity;
+  _assertSame(ctx.shadowOffsetX, 1, "ctx.shadowOffsetX", "1");
+  _assertSame(ctx.shadowOffsetY, 2, "ctx.shadowOffsetY", "2");
+
+  ctx.shadowOffsetX = 1;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowOffsetX = -Infinity;
+  ctx.shadowOffsetY = -Infinity;
+  _assertSame(ctx.shadowOffsetX, 1, "ctx.shadowOffsetX", "1");
+  _assertSame(ctx.shadowOffsetY, 2, "ctx.shadowOffsetY", "2");
+
+  ctx.shadowOffsetX = 1;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowOffsetX = NaN;
+  ctx.shadowOffsetY = NaN;
+  _assertSame(ctx.shadowOffsetX, 1, "ctx.shadowOffsetX", "1");
+  _assertSame(ctx.shadowOffsetY, 2, "ctx.shadowOffsetY", "2");
+
+  ctx.shadowOffsetX = 1;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowOffsetX = 'string';
+  ctx.shadowOffsetY = 'string';
+  _assertSame(ctx.shadowOffsetX, 1, "ctx.shadowOffsetX", "1");
+  _assertSame(ctx.shadowOffsetY, 2, "ctx.shadowOffsetY", "2");
+
+  ctx.shadowOffsetX = 1;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowOffsetX = true;
+  ctx.shadowOffsetY = true;
+  _assertSame(ctx.shadowOffsetX, 1, "ctx.shadowOffsetX", "1");
+  _assertSame(ctx.shadowOffsetY, 1, "ctx.shadowOffsetY", "1");
+
+  ctx.shadowOffsetX = 1;
+  ctx.shadowOffsetY = 2;
+  ctx.shadowOffsetX = false;
+  ctx.shadowOffsetY = false;
+  _assertSame(ctx.shadowOffsetX, 0, "ctx.shadowOffsetX", "0");
+  _assertSame(ctx.shadowOffsetY, 0, "ctx.shadowOffsetY", "0");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.valid.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.valid.html
new file mode 100644
index 0000000000..04fe18c391
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.attributes.shadowOffset.valid.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.shadow.attributes.shadowOffset.valid</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.shadow.attributes.shadowOffset.valid</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.shadowOffsetX = 1;
+  ctx.shadowOffsetY = 2;
+  _assertSame(ctx.shadowOffsetX, 1, "ctx.shadowOffsetX", "1");
+  _assertSame(ctx.shadowOffsetY, 2, "ctx.shadowOffsetY", "2");
+
+  ctx.shadowOffsetX = 0.5;
+  ctx.shadowOffsetY = 0.25;
+  _assertSame(ctx.shadowOffsetX, 0.5, "ctx.shadowOffsetX", "0.5");
+  _assertSame(ctx.shadowOffsetY, 0.25, "ctx.shadowOffsetY", "0.25");
+
+  ctx.shadowOffsetX = -0.5;
+  ctx.shadowOffsetY = -0.25;
+  _assertSame(ctx.shadowOffsetX, -0.5, "ctx.shadowOffsetX", "-0.5");
+  _assertSame(ctx.shadowOffsetY, -0.25, "ctx.shadowOffsetY", "-0.25");
+
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 0;
+  _assertSame(ctx.shadowOffsetX, 0, "ctx.shadowOffsetX", "0");
+  _assertSame(ctx.shadowOffsetY, 0, "ctx.shadowOffsetY", "0");
+
+  ctx.shadowOffsetX = 1e6;
+  ctx.shadowOffsetY = 1e6;
+  _assertSame(ctx.shadowOffsetX, 1e6, "ctx.shadowOffsetX", "1e6");
+  _assertSame(ctx.shadowOffsetY, 1e6, "ctx.shadowOffsetY", "1e6");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high-manual.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high-manual.html
new file mode 100644
index 0000000000..aae0a163bb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high-manual.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.shadow.blur.high</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.shadow.blur.high</h1>
+<p class="desc">Shadows look correct for large blurs</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.shadow.blur.high.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows look correct for large blurs");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#ff0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#00f';
+  ctx.shadowOffsetY = 0;
+  ctx.shadowBlur = 100;
+  ctx.fillRect(-200, -200, 200, 400);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high.png
new file mode 100644
index 0000000000..743640b79f
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.high.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low-manual.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low-manual.html
new file mode 100644
index 0000000000..9674d6f0db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low-manual.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.shadow.blur.low</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.shadow.blur.low</h1>
+<p class="desc">Shadows look correct for small blurs</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.shadow.blur.low.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows look correct for small blurs");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#ff0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#00f';
+  ctx.shadowOffsetY = 25;
+  for (var x = 0; x < 100; ++x) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(x, 0, 1, 50);
+      ctx.clip();
+      ctx.shadowBlur = x;
+      ctx.fillRect(-200, -200, 500, 200);
+      ctx.restore();
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low.png
new file mode 100644
index 0000000000..99fb651c21
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.blur.low.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.html
new file mode 100644
index 0000000000..18818fa726
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.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.shadow.canvas.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.shadow.canvas.alpha</h1>
+<p class="desc">Shadows are drawn correctly for partially-transparent canvases</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.shadow.canvas.alpha.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows are drawn correctly for partially-transparent canvases");
+_addTest(function(canvas, ctx) {
+
+  var canvas2 = document.createElement('canvas');
+  canvas2.width = 100;
+  canvas2.height = 50;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.fillStyle = 'rgba(255, 0, 0, 0.5)';
+  ctx2.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#00f';
+  ctx.drawImage(canvas2, 0, -50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.alpha.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.basic.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.basic.html
new file mode 100644
index 0000000000..e752c8f180
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.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.shadow.canvas.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.shadow.canvas.basic</h1>
+<p class="desc">Shadows are drawn for canvases</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("Shadows are drawn for canvases");
+_addTest(function(canvas, ctx) {
+
+  var canvas2 = document.createElement('canvas');
+  canvas2.width = 100;
+  canvas2.height = 50;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.fillStyle = '#f00';
+  ctx2.fillRect(0, 0, 100, 50);
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 50;
+  ctx.drawImage(canvas2, 0, -50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.1.html
new file mode 100644
index 0000000000..7d159328a4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.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.shadow.canvas.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.shadow.canvas.transparent.1</h1>
+<p class="desc">Shadows are not drawn for transparent canvases</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("Shadows are not drawn for transparent canvases");
+_addTest(function(canvas, ctx) {
+
+  var canvas2 = document.createElement('canvas');
+  canvas2.width = 100;
+  canvas2.height = 50;
+  var ctx2 = canvas2.getContext('2d');
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetY = 50;
+  ctx.drawImage(canvas2, 0, -50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.2.html
new file mode 100644
index 0000000000..4326d42bbe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.canvas.transparent.2.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.shadow.canvas.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.shadow.canvas.transparent.2</h1>
+<p class="desc">Shadows are not drawn for transparent parts of canvases</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("Shadows are not drawn for transparent parts of canvases");
+_addTest(function(canvas, ctx) {
+
+  var canvas2 = document.createElement('canvas');
+  canvas2.width = 100;
+  canvas2.height = 50;
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.fillStyle = '#f00';
+  ctx2.fillRect(0, 0, 50, 50);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(50, 0, 50, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#0f0';
+  ctx.drawImage(canvas2, 50, -50);
+  ctx.shadowColor = '#f00';
+  ctx.drawImage(canvas2, -50, -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/shadows/2d.shadow.clip.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.1.html
new file mode 100644
index 0000000000..6caff8b92f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.1.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.shadow.clip.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.shadow.clip.1</h1>
+<p class="desc">Shadows of clipped shapes are still drawn within the clipping region</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("Shadows of clipped shapes are still drawn within the clipping region");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(50, 0, 50, 50);
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(50, 0, 50, 50);
+  ctx.clip();
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetX = 50;
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.restore();
+
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.2.html
new file mode 100644
index 0000000000..a5b05237e6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.2.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.shadow.clip.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.shadow.clip.2</h1>
+<p class="desc">Shadows are not drawn outside the clipping region</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("Shadows are not drawn outside the clipping region");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(50, 0, 50, 50);
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(0, 0, 50, 50);
+  ctx.clip();
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetX = 50;
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.restore();
+
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.3.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.3.html
new file mode 100644
index 0000000000..b7652634fb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.clip.3.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.shadow.clip.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.shadow.clip.3</h1>
+<p class="desc">Shadows of clipped shapes are still drawn within the clipping region</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("Shadows of clipped shapes are still drawn within the clipping region");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(50, 0, 50, 50);
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.rect(0, 0, 50, 50);
+  ctx.clip();
+  ctx.fillStyle = '#f00';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetX = 50;
+  ctx.fillRect(-50, 0, 50, 50);
+  ctx.restore();
+
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.1.html
new file mode 100644
index 0000000000..d64ecb4972
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.1.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.shadow.composite.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.shadow.composite.1</h1>
+<p class="desc">Shadows are drawn using globalCompositeOperation</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("Shadows are drawn using globalCompositeOperation");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'xor';
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetX = 100;
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, 0, 200, 50);
+
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.2.html
new file mode 100644
index 0000000000..abc6b98d72
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.2.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.shadow.composite.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.shadow.composite.2</h1>
+<p class="desc">Shadows are drawn using globalCompositeOperation</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("Shadows are drawn using globalCompositeOperation");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'xor';
+  ctx.shadowColor = '#f00';
+  ctx.shadowBlur = 1;
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-10, -10, 120, 70);
+
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.3.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.3.html
new file mode 100644
index 0000000000..45eebd9eb0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.composite.3.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.shadow.composite.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.shadow.composite.3</h1>
+<p class="desc">Areas outside shadows are drawn correctly with destination-out</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("Areas outside shadows are drawn correctly with destination-out");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.globalCompositeOperation = 'destination-out';
+  ctx.shadowColor = '#f00';
+  ctx.shadowBlur = 10;
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(200, 0, 100, 50);
+
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.blur.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.blur.html
new file mode 100644
index 0000000000..7efa459c29
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.blur.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.shadow.enable.blur</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.shadow.enable.blur</h1>
+<p class="desc">Shadows are drawn if shadowBlur is set</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("Shadows are drawn if shadowBlur is set");
+_addTest(function(canvas, ctx) {
+
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowBlur = 0.1;
+  ctx.fillStyle = '#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/shadows/2d.shadow.enable.off.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.off.1.html
new file mode 100644
index 0000000000..953ea04277
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.off.1.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.shadow.enable.off.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.shadow.enable.off.1</h1>
+<p class="desc">Shadows are not drawn when only shadowColor is set</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("Shadows are not drawn when only shadowColor is set");
+_addTest(function(canvas, ctx) {
+
+  ctx.shadowColor = '#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/shadows/2d.shadow.enable.off.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.off.2.html
new file mode 100644
index 0000000000..2a8cf7301d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.off.2.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.shadow.enable.off.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.shadow.enable.off.2</h1>
+<p class="desc">Shadows are not drawn when only shadowColor is set</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("Shadows are not drawn when only shadowColor is set");
+_addTest(function(canvas, ctx) {
+
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.shadowColor = '#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/shadows/2d.shadow.enable.x.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.x.html
new file mode 100644
index 0000000000..6eae985fd6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.x.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.shadow.enable.x</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.shadow.enable.x</h1>
+<p class="desc">Shadows are drawn if shadowOffsetX is set</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("Shadows are drawn if shadowOffsetX is set");
+_addTest(function(canvas, ctx) {
+
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetX = 0.1;
+  ctx.fillStyle = '#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/shadows/2d.shadow.enable.y.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.y.html
new file mode 100644
index 0000000000..2025babca6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.enable.y.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.shadow.enable.y</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.shadow.enable.y</h1>
+<p class="desc">Shadows are drawn if shadowOffsetY is set</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("Shadows are drawn if shadowOffsetY is set");
+_addTest(function(canvas, ctx) {
+
+  ctx.globalCompositeOperation = 'destination-atop';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 0.1;
+  ctx.fillStyle = '#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/shadows/2d.shadow.gradient.alpha.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.alpha.html
new file mode 100644
index 0000000000..65f4fdad27
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.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.shadow.gradient.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.shadow.gradient.alpha</h1>
+<p class="desc">Shadows are drawn correctly for partially-transparent gradient fills</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.shadow.gradient.alpha.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows are drawn correctly for partially-transparent gradient fills");
+_addTest(function(canvas, ctx) {
+
+  var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+  gradient.addColorStop(0, 'rgba(255,0,0,0.5)');
+  gradient.addColorStop(1, 'rgba(255,0,0,0.5)');
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#00f';
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.alpha.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.alpha.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.alpha.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.basic.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.basic.html
new file mode 100644
index 0000000000..a7c5efe738
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.basic.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.shadow.gradient.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.shadow.gradient.basic</h1>
+<p class="desc">Shadows are drawn for gradient fills</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("Shadows are drawn for gradient fills");
+_addTest(function(canvas, ctx) {
+
+  var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+  gradient.addColorStop(0, '#f00');
+  gradient.addColorStop(1, '#f00');
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 50;
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.1.html
new file mode 100644
index 0000000000..1c11f75e80
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.1.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.shadow.gradient.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.shadow.gradient.transparent.1</h1>
+<p class="desc">Shadows are not drawn for transparent gradient fills</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("Shadows are not drawn for transparent gradient fills");
+_addTest(function(canvas, ctx) {
+
+  var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+  gradient.addColorStop(0, 'rgba(0,0,0,0)');
+  gradient.addColorStop(1, 'rgba(0,0,0,0)');
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetY = 50;
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.2.html
new file mode 100644
index 0000000000..244aecab21
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.gradient.transparent.2.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.shadow.gradient.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.shadow.gradient.transparent.2</h1>
+<p class="desc">Shadows are not drawn for transparent parts of gradient fills</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("Shadows are not drawn for transparent parts of gradient fills");
+_addTest(function(canvas, ctx) {
+
+  var gradient = ctx.createLinearGradient(0, 0, 100, 0);
+  gradient.addColorStop(0, '#f00');
+  gradient.addColorStop(0.499, '#f00');
+  gradient.addColorStop(0.5, 'rgba(0,0,0,0)');
+  gradient.addColorStop(1, 'rgba(0,0,0,0)');
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(50, 0, 50, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#0f0';
+  ctx.fillStyle = gradient;
+  ctx.fillRect(0, -50, 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/shadows/2d.shadow.image.alpha.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.alpha.html
new file mode 100644
index 0000000000..f00e1752df
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.alpha.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.shadow.image.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.shadow.image.alpha</h1>
+<p class="desc">Shadows are drawn correctly for partially-transparent images</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.shadow.image.alpha.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows are drawn correctly for partially-transparent images");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#00f';
+  var img = document.getElementById('transparent50.png');
+  ctx.drawImage(img, 0, -50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+<img src="/images/transparent50.png" id="transparent50.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.alpha.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.alpha.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.alpha.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.basic.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.basic.html
new file mode 100644
index 0000000000..d106e223db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.basic.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.shadow.image.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.shadow.image.basic</h1>
+<p class="desc">Shadows are drawn for images</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("Shadows are drawn for images");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 50;
+  var img = document.getElementById('red.png');
+  ctx.drawImage(img, 0, -50);
+
+  _assertPixel(canvas, 50,25, 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/shadows/2d.shadow.image.scale.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.scale.html
new file mode 100644
index 0000000000..7e07fff378
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.scale.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.shadow.image.scale</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.shadow.image.scale</h1>
+<p class="desc">Shadows are drawn correctly for scaled images</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("Shadows are drawn correctly for scaled images");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#0f0';
+  var img = document.getElementById('redtransparent.png');
+  ctx.drawImage(img, 0, 0, 100, 50, -10, -50, 240, 50);
+
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+});
+</script>
+<img src="/images/redtransparent.png" id="redtransparent.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.section.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.section.html
new file mode 100644
index 0000000000..a1b3e7032f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.section.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.shadow.image.section</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.shadow.image.section</h1>
+<p class="desc">Shadows are not drawn for areas outside image source rectangles</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("Shadows are not drawn for areas outside image source rectangles");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#f00';
+  var img = document.getElementById('redtransparent.png');
+  ctx.drawImage(img, 50, 0, 50, 50, 0, -50, 50, 50);
+
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 50,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+});
+</script>
+<img src="/images/redtransparent.png" id="redtransparent.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.1.html
new file mode 100644
index 0000000000..74d8b22951
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.1.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.shadow.image.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.shadow.image.transparent.1</h1>
+<p class="desc">Shadows are not drawn for transparent images</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("Shadows are not drawn for transparent images");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetY = 50;
+  var img = document.getElementById('transparent.png');
+  ctx.drawImage(img, 0, -50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+<img src="/images/transparent.png" id="transparent.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.2.html
new file mode 100644
index 0000000000..1a52a52c3f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.image.transparent.2.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.shadow.image.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.shadow.image.transparent.2</h1>
+<p class="desc">Shadows are not drawn for transparent parts of images</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("Shadows are not drawn for transparent parts of images");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(50, 0, 50, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#0f0';
+  var img = document.getElementById('redtransparent.png');
+  ctx.drawImage(img, 50, -50);
+  ctx.shadowColor = '#f00';
+  ctx.drawImage(img, -50, -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>
+<img src="/images/redtransparent.png" id="redtransparent.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeX.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeX.html
new file mode 100644
index 0000000000..0a73b07b6c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeX.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.offset.negativeX</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.shadow.offset.negativeX</h1>
+<p class="desc">Shadows can be offset with negative x</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("Shadows can be offset with negative x");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetX = -50;
+  ctx.fillRect(50, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeY.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeY.html
new file mode 100644
index 0000000000..04c9620fd2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.negativeY.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.offset.negativeY</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.shadow.offset.negativeY</h1>
+<p class="desc">Shadows can be offset with negative y</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("Shadows can be offset with negative y");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = -25;
+  ctx.fillRect(0, 25, 100, 25);
+  _assertPixel(canvas, 50,12, 0,255,0,255);
+  _assertPixel(canvas, 50,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveX.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveX.html
new file mode 100644
index 0000000000..1254474385
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveX.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.offset.positiveX</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.shadow.offset.positiveX</h1>
+<p class="desc">Shadows can be offset with positive x</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("Shadows can be offset with positive x");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetX = 50;
+  ctx.fillRect(0, 0, 50, 50);
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveY.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveY.html
new file mode 100644
index 0000000000..fdcf25a435
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.offset.positiveY.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.offset.positiveY</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.shadow.offset.positiveY</h1>
+<p class="desc">Shadows can be offset with positive y</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("Shadows can be offset with positive y");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 25;
+  ctx.fillRect(0, 0, 100, 25);
+  _assertPixel(canvas, 50,12, 0,255,0,255);
+  _assertPixel(canvas, 50,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.outside.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.outside.html
new file mode 100644
index 0000000000..fcf2129488
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.outside.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.shadow.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.shadow.outside</h1>
+<p class="desc">Shadows of shapes outside the visible area can be offset onto the visible area</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("Shadows of shapes outside the visible area can be offset onto the visible area");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetX = 100;
+  ctx.fillRect(-100, 0, 25, 50);
+  ctx.shadowOffsetX = -100;
+  ctx.fillRect(175, 0, 25, 50);
+  ctx.shadowOffsetX = 0;
+  ctx.shadowOffsetY = 100;
+  ctx.fillRect(25, -100, 50, 25);
+  ctx.shadowOffsetY = -100;
+  ctx.fillRect(25, 125, 50, 25);
+  _assertPixel(canvas, 12,25, 0,255,0,255);
+  _assertPixel(canvas, 87,25, 0,255,0,255);
+  _assertPixel(canvas, 50,12, 0,255,0,255);
+  _assertPixel(canvas, 50,37, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.alpha.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.alpha.html
new file mode 100644
index 0000000000..10b5414b12
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.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.shadow.pattern.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.shadow.pattern.alpha</h1>
+<p class="desc">Shadows are drawn correctly for partially-transparent fill patterns</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.shadow.pattern.alpha.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("Shadows are drawn correctly for partially-transparent fill patterns");
+_addTest(function(canvas, ctx) {
+
+  var img = document.getElementById('transparent50.png');
+  var pattern = ctx.createPattern(img, 'repeat');
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#00f';
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixelApprox(canvas, 50,25, 127,0,127,255, 2);
+
+});
+</script>
+<img src="/images/transparent50.png" id="transparent50.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.alpha.png b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.alpha.png
new file mode 100644
index 0000000000..8764e89b37
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.alpha.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.basic.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.basic.html
new file mode 100644
index 0000000000..47d2149a57
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.basic.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.shadow.pattern.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.shadow.pattern.basic</h1>
+<p class="desc">Shadows are drawn for fill patterns</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("Shadows are drawn for fill patterns");
+_addTest(function(canvas, ctx) {
+
+  var img = document.getElementById('red.png');
+  var pattern = ctx.createPattern(img, 'repeat');
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 50;
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixel(canvas, 50,25, 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/shadows/2d.shadow.pattern.transparent.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.transparent.1.html
new file mode 100644
index 0000000000..c41dd83778
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.transparent.1.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.shadow.pattern.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.shadow.pattern.transparent.1</h1>
+<p class="desc">Shadows are not drawn for transparent fill patterns</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("Shadows are not drawn for transparent fill patterns");
+_addTest(function(canvas, ctx) {
+
+  var img = document.getElementById('transparent.png');
+  var pattern = ctx.createPattern(img, 'repeat');
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetY = 50;
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, -50, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+<img src="/images/transparent.png" id="transparent.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.transparent.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.transparent.2.html
new file mode 100644
index 0000000000..ddaf21fe90
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.pattern.transparent.2.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.shadow.pattern.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.shadow.pattern.transparent.2</h1>
+<p class="desc">Shadows are not drawn for transparent parts of fill patterns</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("Shadows are not drawn for transparent parts of fill patterns");
+_addTest(function(canvas, ctx) {
+
+  var img = document.getElementById('redtransparent.png');
+  var pattern = ctx.createPattern(img, 'repeat');
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(50, 0, 50, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#0f0';
+  ctx.fillStyle = pattern;
+  ctx.fillRect(0, -50, 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>
+<img src="/images/redtransparent.png" id="redtransparent.png" class="resource">
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.basic.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.basic.html
new file mode 100644
index 0000000000..6146ba7d19
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.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.shadow.stroke.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.shadow.stroke.basic</h1>
+<p class="desc">Shadows are drawn for strokes</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("Shadows are drawn for strokes");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 50;
+  ctx.beginPath();
+  ctx.lineWidth = 50;
+  ctx.moveTo(0, -25);
+  ctx.lineTo(100, -25);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.1.html
new file mode 100644
index 0000000000..5d6e53a685
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.1.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.shadow.stroke.cap.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.shadow.stroke.cap.1</h1>
+<p class="desc">Shadows are not drawn for areas outside stroke caps</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("Shadows are not drawn for areas outside stroke caps");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetY = 50;
+  ctx.beginPath();
+  ctx.lineWidth = 50;
+  ctx.lineCap = 'butt';
+  ctx.moveTo(-50, -25);
+  ctx.lineTo(0, -25);
+  ctx.moveTo(100, -25);
+  ctx.lineTo(150, -25);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.2.html
new file mode 100644
index 0000000000..f18a9b6cc5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.cap.2.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.shadow.stroke.cap.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.shadow.stroke.cap.2</h1>
+<p class="desc">Shadows are drawn for stroke caps</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("Shadows are drawn for stroke caps");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetY = 50;
+  ctx.beginPath();
+  ctx.lineWidth = 50;
+  ctx.lineCap = 'square';
+  ctx.moveTo(25, -25);
+  ctx.lineTo(75, -25);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,25, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.1.html
new file mode 100644
index 0000000000..46735a918f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.1.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.shadow.stroke.join.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.shadow.stroke.join.1</h1>
+<p class="desc">Shadows are not drawn for areas outside stroke joins</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("Shadows are not drawn for areas outside stroke joins");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetX = 100;
+  ctx.lineWidth = 200;
+  ctx.lineJoin = 'bevel';
+  ctx.beginPath();
+  ctx.moveTo(-200, -50);
+  ctx.lineTo(-150, -50);
+  ctx.lineTo(-151, -100);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.2.html
new file mode 100644
index 0000000000..85abc24e81
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.2.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.shadow.stroke.join.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.shadow.stroke.join.2</h1>
+<p class="desc">Shadows are drawn for stroke joins</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("Shadows are drawn for stroke joins");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 50, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(50, 0, 50, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.shadowColor = '#0f0';
+  ctx.shadowOffsetX = 100;
+  ctx.lineWidth = 200;
+  ctx.lineJoin = 'miter';
+  ctx.beginPath();
+  ctx.moveTo(-200, -50);
+  ctx.lineTo(-150, -50);
+  ctx.lineTo(-151, -100);
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.3.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.3.html
new file mode 100644
index 0000000000..795c6137d5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.stroke.join.3.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.shadow.stroke.join.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.shadow.stroke.join.3</h1>
+<p class="desc">Shadows are drawn for stroke joins respecting miter limit</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("Shadows are drawn for stroke joins respecting miter limit");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#f00';
+  ctx.shadowColor = '#f00';
+  ctx.shadowOffsetX = 100;
+  ctx.lineWidth = 200;
+  ctx.lineJoin = 'miter';
+  ctx.miterLimit = 0.1;
+  ctx.beginPath();
+  ctx.moveTo(-200, -50);
+  ctx.lineTo(-150, -50);
+  ctx.lineTo(-151, -100); // (not an exact right angle, to avoid some other bug in Firefox 3)
+  ctx.stroke();
+
+  _assertPixel(canvas, 1,1, 0,255,0,255);
+  _assertPixel(canvas, 48,48, 0,255,0,255);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,48, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.1.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.1.html
new file mode 100644
index 0000000000..abfb54e5db
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.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.shadow.transform.1</h1>
+<p class="desc">Shadows take account of transformations</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("Shadows take account of transformations");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#0f0';
+  ctx.translate(100, 100);
+  ctx.fillRect(-100, -150, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.2.html b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.2.html
new file mode 100644
index 0000000000..736dd4efa4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/shadows/2d.shadow.transform.2.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.shadow.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.shadow.transform.2</h1>
+<p class="desc">Shadow offsets are not affected by transformations</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("Shadow offsets are not affected by transformations");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.shadowOffsetY = 50;
+  ctx.shadowColor = '#0f0';
+  ctx.rotate(Math.PI)
+  ctx.fillRect(-100, 0, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.align.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.default.html
new file mode 100644
index 0000000000..d32f7831d0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.align.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.text.align.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.textAlign, 'start', "ctx.textAlign", "'start'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.align.invalid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.invalid.html
new file mode 100644
index 0000000000..7b7f33766a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.invalid.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.text.align.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.text.align.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) {
+
+  ctx.textAlign = 'start';
+  ctx.textAlign = 'bogus';
+  _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'");
+
+  ctx.textAlign = 'start';
+  ctx.textAlign = 'END';
+  _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'");
+
+  ctx.textAlign = 'start';
+  ctx.textAlign = 'end ';
+  _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'");
+
+  ctx.textAlign = 'start';
+  ctx.textAlign = 'end\0';
+  _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.align.valid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.valid.html
new file mode 100644
index 0000000000..a568530f3b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.align.valid.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.text.align.valid</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.text.align.valid</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.textAlign = 'start';
+  _assertSame(ctx.textAlign, 'start', "ctx.textAlign", "'start'");
+
+  ctx.textAlign = 'end';
+  _assertSame(ctx.textAlign, 'end', "ctx.textAlign", "'end'");
+
+  ctx.textAlign = 'left';
+  _assertSame(ctx.textAlign, 'left', "ctx.textAlign", "'left'");
+
+  ctx.textAlign = 'right';
+  _assertSame(ctx.textAlign, 'right', "ctx.textAlign", "'right'");
+
+  ctx.textAlign = 'center';
+  _assertSame(ctx.textAlign, 'center', "ctx.textAlign", "'center'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.default.html
new file mode 100644
index 0000000000..08e8512c66
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.baseline.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.text.baseline.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.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.invalid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.invalid.html
new file mode 100644
index 0000000000..e527a77288
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.invalid.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.text.baseline.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.text.baseline.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) {
+
+  ctx.textBaseline = 'top';
+  ctx.textBaseline = 'bogus';
+  _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'");
+
+  ctx.textBaseline = 'top';
+  ctx.textBaseline = 'MIDDLE';
+  _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'");
+
+  ctx.textBaseline = 'top';
+  ctx.textBaseline = 'middle ';
+  _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'");
+
+  ctx.textBaseline = 'top';
+  ctx.textBaseline = 'middle\0';
+  _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.valid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.valid.html
new file mode 100644
index 0000000000..238f6ff7dc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.baseline.valid.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.text.baseline.valid</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.text.baseline.valid</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.textBaseline = 'top';
+  _assertSame(ctx.textBaseline, 'top', "ctx.textBaseline", "'top'");
+
+  ctx.textBaseline = 'hanging';
+  _assertSame(ctx.textBaseline, 'hanging', "ctx.textBaseline", "'hanging'");
+
+  ctx.textBaseline = 'middle';
+  _assertSame(ctx.textBaseline, 'middle', "ctx.textBaseline", "'middle'");
+
+  ctx.textBaseline = 'alphabetic';
+  _assertSame(ctx.textBaseline, 'alphabetic', "ctx.textBaseline", "'alphabetic'");
+
+  ctx.textBaseline = 'ideographic';
+  _assertSame(ctx.textBaseline, 'ideographic', "ctx.textBaseline", "'ideographic'");
+
+  ctx.textBaseline = 'bottom';
+  _assertSame(ctx.textBaseline, 'bottom', "ctx.textBaseline", "'bottom'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.center.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.center.html
new file mode 100644
index 0000000000..723ebe8764
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.center.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.align.center</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.center</h1>
+<p class="desc">textAlign center is the center of the em squares (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'center';
+  ctx.fillText('DD', 50, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign center is the center of the em squares (not the bounding box)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.ltr.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.ltr.html
new file mode 100644
index 0000000000..d29da833cc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.ltr.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.align.end.ltr</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.end.ltr</h1>
+<p class="desc">textAlign end with ltr is the right edge</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"dir="ltr"><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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'end';
+  ctx.fillText('DD', 100, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign end with ltr is the right edge");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.rtl.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.rtl.html
new file mode 100644
index 0000000000..09a9658ac0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.end.rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.align.end.rtl</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.end.rtl</h1>
+<p class="desc">textAlign end with rtl is the left edge</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"dir="rtl"><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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'end';
+  ctx.fillText('DD', 0, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign end with rtl is the left edge");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.left.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.left.html
new file mode 100644
index 0000000000..dda5318fbf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.left.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.align.left</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.left</h1>
+<p class="desc">textAlign left is the left of the first em square (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'left';
+  ctx.fillText('DD', 0, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign left is the left of the first em square (not the bounding box)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.right.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.right.html
new file mode 100644
index 0000000000..2b3217278a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.right.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.align.right</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.right</h1>
+<p class="desc">textAlign right is the right of the last em square (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'right';
+  ctx.fillText('DD', 100, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign right is the right of the last em square (not the bounding box)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.ltr.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.ltr.html
new file mode 100644
index 0000000000..8e14642fc2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.ltr.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.align.start.ltr</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.start.ltr</h1>
+<p class="desc">textAlign start with ltr is the left edge</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"dir="ltr"><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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'start';
+  ctx.fillText('DD', 0, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign start with ltr is the left edge");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.rtl.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.rtl.html
new file mode 100644
index 0000000000..fe1ccd1137
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.align.start.rtl.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.align.start.rtl</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.align.start.rtl</h1>
+<p class="desc">textAlign start with rtl is the right edge</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"dir="rtl"><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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'start';
+  ctx.fillText('DD', 100, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textAlign start with rtl is the right edge");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.alphabetic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.alphabetic.html
new file mode 100644
index 0000000000..a45db596d0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.alphabetic.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.baseline.alphabetic</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.baseline.alphabetic</h1>
+<p class="desc"></p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textBaseline = 'alphabetic';
+  ctx.fillText('CC', 0, 37.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.bottom.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.bottom.html
new file mode 100644
index 0000000000..ed1bf002a1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.bottom.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.baseline.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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.baseline.bottom</h1>
+<p class="desc">textBaseline bottom is the bottom of the em square (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textBaseline = 'bottom';
+  ctx.fillText('CC', 0, 50);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textBaseline bottom is the bottom of the em square (not the bounding box)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.hanging.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.hanging.html
new file mode 100644
index 0000000000..2f274b4199
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.hanging.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.baseline.hanging</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.baseline.hanging</h1>
+<p class="desc"></p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textBaseline = 'hanging';
+  ctx.fillText('CC', 0, 12.5);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.ideographic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.ideographic.html
new file mode 100644
index 0000000000..8d6a12e262
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.ideographic.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.baseline.ideographic</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.baseline.ideographic</h1>
+<p class="desc"></p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textBaseline = 'ideographic';
+  ctx.fillText('CC', 0, 31.25);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.middle.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.middle.html
new file mode 100644
index 0000000000..5b021a5877
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.middle.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.baseline.middle</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.baseline.middle</h1>
+<p class="desc">textBaseline middle is the middle of the em square (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textBaseline = 'middle';
+  ctx.fillText('CC', 0, 25);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textBaseline middle is the middle of the em square (not the bounding box)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.top.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.top.html
new file mode 100644
index 0000000000..2011514d33
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.baseline.top.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.draw.baseline.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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.baseline.top</h1>
+<p class="desc">textBaseline top is the top of the em square (not the bounding box)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textBaseline = 'top';
+  ctx.fillText('CC', 0, 0);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 5,45, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,45, 0,255,0,255, 2);
+
+}, "textBaseline top is the top of the em square (not the bounding box)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic-manual.html
new file mode 100644
index 0000000000..d3f5df9d01
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic-manual.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.text.draw.fill.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.text.draw.fill.basic</h1>
+<p class="desc">fillText draws filled text</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.text.draw.fill.basic.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fillText draws filled text");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('PASS', 5, 35);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic.png b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic.png
new file mode 100644
index 0000000000..70d7b046cb
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.basic.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.NaN.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.NaN.html
new file mode 100644
index 0000000000..9705d28830
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.NaN.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.text.draw.fill.maxWidth.NaN</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.text.draw.fill.maxWidth.NaN</h1>
+<p class="desc">fillText handles maxWidth correctly</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("fillText handles maxWidth correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('fail fail fail fail fail', 5, 35, NaN);
+  _assertGreen(ctx, 100, 50);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.html
new file mode 100644
index 0000000000..c5f7dcf119
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.bound.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.text.draw.fill.maxWidth.bound</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.fill.maxWidth.bound</h1>
+<p class="desc">fillText handles maxWidth based on line size, not bounding box size</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('DD', 0, 37.5, 100);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "fillText handles maxWidth based on line size, not bounding box size");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.html
new file mode 100644
index 0000000000..7df5553815
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.fontface.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.text.draw.fill.maxWidth.fontface</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.fill.maxWidth.fontface</h1>
+<p class="desc">fillText works on @font-face fonts</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillText('EEEE', -50, 37.5, 40);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "fillText works on @font-face fonts");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large-manual.html
new file mode 100644
index 0000000000..96bb2e7de1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large-manual.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.text.draw.fill.maxWidth.large</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.text.draw.fill.maxWidth.large</h1>
+<p class="desc">fillText handles maxWidth correctly</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.text.draw.fill.maxWidth.large.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fillText handles maxWidth correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('PASS', 5, 35, 200);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large.png b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large.png
new file mode 100644
index 0000000000..70d7b046cb
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.large.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.negative.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.negative.html
new file mode 100644
index 0000000000..ad50d57608
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.negative.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.text.draw.fill.maxWidth.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.text.draw.fill.maxWidth.negative</h1>
+<p class="desc">fillText handles maxWidth correctly</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("fillText handles maxWidth correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('fail fail fail fail fail', 5, 35, -1);
+  _assertGreen(ctx, 100, 50);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.small.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.small.html
new file mode 100644
index 0000000000..75866af406
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.small.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.text.draw.fill.maxWidth.small</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.text.draw.fill.maxWidth.small</h1>
+<p class="desc">fillText handles maxWidth correctly</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("fillText handles maxWidth correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('fail fail fail fail fail', -100, 35, 90);
+  _assertGreen(ctx, 100, 50);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.zero.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.zero.html
new file mode 100644
index 0000000000..a175a57879
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.maxWidth.zero.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.text.draw.fill.maxWidth.zero</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.text.draw.fill.maxWidth.zero</h1>
+<p class="desc">fillText handles maxWidth correctly</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("fillText handles maxWidth correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('fail fail fail fail fail', 5, 35, 0);
+  _assertGreen(ctx, 100, 50);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl-manual.html
new file mode 100644
index 0000000000..6917d7ed6c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl-manual.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.text.draw.fill.rtl</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.text.draw.fill.rtl</h1>
+<p class="desc">fillText respects Right-To-Left Override characters</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.text.draw.fill.rtl.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("fillText respects Right-To-Left Override characters");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.strokeStyle = '#f00';
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('\u202eFAIL \xa0 \xa0 SSAP', 5, 35);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl.png b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl.png
new file mode 100644
index 0000000000..70d7b046cb
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.rtl.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.unaffected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.unaffected.html
new file mode 100644
index 0000000000..94ed31d199
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fill.unaffected.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.text.draw.fill.unaffected</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.text.draw.fill.unaffected</h1>
+<p class="desc">fillText does not start a new path or subpath</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("fillText does not start a new path or subpath");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+
+  ctx.font = '35px Arial, sans-serif';
+  ctx.fillText('FAIL', 5, 35);
+
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 5,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.html
new file mode 100644
index 0000000000..c46ac2084e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.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.text.draw.fontface</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.fontface</h1>
+<p class="desc"></p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '67px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('AA', 0, 50);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.notinpage.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.notinpage.html
new file mode 100644
index 0000000000..92891fb04f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.notinpage.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.text.draw.fontface.notinpage</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.fontface.notinpage</h1>
+<p class="desc">@font-face fonts should work even if they are not used in the page</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '67px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('AA', 0, 50);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "@font-face fonts should work even if they are not used in the page");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.repeat.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.repeat.html
new file mode 100644
index 0000000000..d597540b97
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.fontface.repeat.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.text.draw.fontface.repeat</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.fontface.repeat</h1>
+<p class="desc">Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)</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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.font = '67px CanvasTest';
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('AA', 0, 50);
+
+  await new Promise(resolve => t.step_timeout(resolve, 500));
+  ctx.fillText('AA', 0, 50);
+  _assertPixelApprox(canvas, 5,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 95,5, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "Draw with the font immediately, then wait a bit until and draw again. (This crashes some version of WebKit.)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.kern.consistent-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.kern.consistent-manual.html
new file mode 100644
index 0000000000..1840ef01b1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.kern.consistent-manual.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.text.draw.kern.consistent</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.text.draw.kern.consistent</h1>
+<p class="desc">Stroked and filled text should have exactly the same kerning so it overlaps</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("Stroked and filled text should have exactly the same kerning so it overlaps");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.strokeStyle = '#0f0';
+  ctx.lineWidth = 3;
+  ctx.font = '20px Arial, sans-serif';
+  ctx.fillText('VAVAVAVAVAVAVA', -50, 25);
+  ctx.fillText('ToToToToToToTo', -50, 45);
+  ctx.strokeText('VAVAVAVAVAVAVA', -50, 25);
+  ctx.strokeText('ToToToToToToTo', -50, 45);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.basic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.basic.html
new file mode 100644
index 0000000000..d4447402aa
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.basic.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.text.draw.space.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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.space.basic</h1>
+<p class="desc">U+0020 is rendered the correct size (1em wide)</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('E EE', -100, 37.5);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "U+0020 is rendered the correct size (1em wide)");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.end.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.end.html
new file mode 100644
index 0000000000..5a14dbd514
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.end.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.text.draw.space.collapse.end</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.space.collapse.end</h1>
+<p class="desc">Space characters at the end of a line are NOT collapsed</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.textAlign = 'right';
+  ctx.fillText('EE ', 100, 37.5);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 255,0,0,255, 2);
+
+}, "Space characters at the end of a line are NOT collapsed");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.nonspace.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.nonspace.html
new file mode 100644
index 0000000000..1fc4203b90
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.nonspace.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.text.draw.space.collapse.nonspace</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.space.collapse.nonspace</h1>
+<p class="desc">Non-space characters are not converted to U+0020 and collapsed</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('E\x0b EE', -150, 37.5);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "Non-space characters are not converted to U+0020 and collapsed");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.other.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.other.html
new file mode 100644
index 0000000000..ffc82929b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.other.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.text.draw.space.collapse.other</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.space.collapse.other</h1>
+<p class="desc">Space characters are converted to U+0020, and are NOT collapsed</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('E \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dEE', 0, 37.5);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 255,0,0,255, 2);
+
+}, "Space characters are converted to U+0020, and are NOT collapsed");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.space.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.space.html
new file mode 100644
index 0000000000..64c14d1a54
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.space.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.text.draw.space.collapse.space</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.space.collapse.space</h1>
+<p class="desc">Space characters are converted to U+0020, and are NOT collapsed</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText('E  EE', 0, 37.5);
+  _assertPixelApprox(canvas, 25,25, 0,255,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 255,0,0,255, 2);
+
+}, "Space characters are converted to U+0020, and are NOT collapsed");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.start.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.start.html
new file mode 100644
index 0000000000..272432c3be
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.space.collapse.start.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.text.draw.space.collapse.start</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.draw.space.collapse.start</h1>
+<p class="desc">Space characters at the start of a line are NOT collapsed</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillText(' EE', 0, 37.5);
+  _assertPixelApprox(canvas, 25,25, 255,0,0,255, 2);
+  _assertPixelApprox(canvas, 75,25, 0,255,0,255, 2);
+
+}, "Space characters at the start of a line are NOT collapsed");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic-manual.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic-manual.html
new file mode 100644
index 0000000000..1db0f0694e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic-manual.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.text.draw.stroke.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.text.draw.stroke.basic</h1>
+<p class="desc">strokeText draws stroked text</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.text.draw.stroke.basic.png" class="output expected" id="expected" alt="">
+<ul id="d"></ul>
+<script>
+var t = async_test("strokeText draws stroked text");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.strokeStyle = '#0f0';
+  ctx.fillStyle = '#f00';
+  ctx.lineWidth = 1;
+  ctx.font = '35px Arial, sans-serif';
+  ctx.strokeText('PASS', 5, 35);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic.png b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic.png
new file mode 100644
index 0000000000..fb3b5b830d
Binary files /dev/null and b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.basic.png differ
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.unaffected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.unaffected.html
new file mode 100644
index 0000000000..76a36476ee
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.draw.stroke.unaffected.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.text.draw.stroke.unaffected</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.text.draw.stroke.unaffected</h1>
+<p class="desc">strokeText does not start a new path or subpath</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("strokeText does not start a new path or subpath");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.moveTo(0, 0);
+  ctx.lineTo(100, 0);
+
+  ctx.font = '35px Arial, sans-serif';
+  ctx.strokeStyle = '#f00';
+  ctx.strokeText('FAIL', 5, 35);
+
+  ctx.lineTo(100, 50);
+  ctx.lineTo(0, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 5,45, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.absolute.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.absolute.spacing.html
new file mode 100644
index 0000000000..1207f84e2b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.absolute.spacing.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.text.drawing.style.absolute.spacing</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.text.drawing.style.absolute.spacing</h1>
+<p class="desc">Testing letter spacing and word spacing with absolute length</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("Testing letter spacing and word spacing with absolute length");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+
+  ctx.letterSpacing = '3px';
+  _assertSame(ctx.letterSpacing, '3px', "ctx.letterSpacing", "'3px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+
+  ctx.wordSpacing = '5px';
+  _assertSame(ctx.letterSpacing, '3px', "ctx.letterSpacing", "'3px'");
+  _assertSame(ctx.wordSpacing, '5px', "ctx.wordSpacing", "'5px'");
+
+  ctx.letterSpacing = '-1px';
+  ctx.wordSpacing = '-1px';
+  _assertSame(ctx.letterSpacing, '-1px', "ctx.letterSpacing", "'-1px'");
+  _assertSame(ctx.wordSpacing, '-1px', "ctx.wordSpacing", "'-1px'");
+
+  ctx.letterSpacing = '1PX';
+  ctx.wordSpacing = '10PX';
+  _assertSame(ctx.letterSpacing, '1px', "ctx.letterSpacing", "'1px'");
+  _assertSame(ctx.wordSpacing, '10px', "ctx.wordSpacing", "'10px'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.font-relative.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.font-relative.spacing.html
new file mode 100644
index 0000000000..a232ec1602
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.font-relative.spacing.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.text.drawing.style.font-relative.spacing</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.text.drawing.style.font-relative.spacing</h1>
+<p class="desc">Testing letter spacing and word spacing with font-relative length</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("Testing letter spacing and word spacing with font-relative length");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+
+  ctx.letterSpacing = '1EX';
+  ctx.wordSpacing = '1EM';
+  _assertSame(ctx.letterSpacing, '1ex', "ctx.letterSpacing", "'1ex'");
+  _assertSame(ctx.wordSpacing, '1em', "ctx.wordSpacing", "'1em'");
+
+  ctx.letterSpacing = '1ch';
+  ctx.wordSpacing = '1ic';
+  _assertSame(ctx.letterSpacing, '1ch', "ctx.letterSpacing", "'1ch'");
+  _assertSame(ctx.wordSpacing, '1ic', "ctx.wordSpacing", "'1ic'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.html
new file mode 100644
index 0000000000..6de9c6eb50
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.fontKerning</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.text.drawing.style.fontKerning</h1>
+<p class="desc">Testing basic functionalities of fontKerning for canvas</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("Testing basic functionalities of fontKerning for canvas");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "normal";
+  _assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\"");
+  width_normal = ctx.measureText("TAWATAVA").width;
+  ctx.fontKerning = "none";
+  _assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\"");
+  width_none = ctx.measureText("TAWATAVA").width;
+  _assert(width_normal < width_none, "width_normal < width_none");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.with.uppercase.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.with.uppercase.html
new file mode 100644
index 0000000000..991f35af0d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontKerning.with.uppercase.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.fontKerning.with.uppercase</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.text.drawing.style.fontKerning.with.uppercase</h1>
+<p class="desc">Testing basic functionalities of fontKerning for canvas</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("Testing basic functionalities of fontKerning for canvas");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "Normal";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "normal";
+  _assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\"");
+  ctx.fontKerning = "Auto";
+  _assertSame(ctx.fontKerning, "normal", "ctx.fontKerning", "\"normal\"");
+  ctx.fontKerning = "auto";
+  ctx.fontKerning = "noRmal";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "auto";
+  ctx.fontKerning = "NoRMal";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "auto";
+  ctx.fontKerning = "NORMAL";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+
+  ctx.fontKerning = "None";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "none";
+  _assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\"");
+  ctx.fontKerning = "Auto";
+  _assertSame(ctx.fontKerning, "none", "ctx.fontKerning", "\"none\"");
+  ctx.fontKerning = "auto";
+  ctx.fontKerning = "nOne";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "auto";
+  ctx.fontKerning = "nonE";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+  ctx.fontKerning = "auto";
+  ctx.fontKerning = "NONE";
+  _assertSame(ctx.fontKerning, "auto", "ctx.fontKerning", "\"auto\"");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontStretch.settings.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontStretch.settings.html
new file mode 100644
index 0000000000..b19eced891
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontStretch.settings.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.fontStretch.settings</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.text.drawing.style.fontStretch.settings</h1>
+<p class="desc">Testing value setting of fontStretch in Canvas</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("Testing value setting of fontStretch in Canvas");
+_addTest(function(canvas, ctx) {
+
+  // Setting textRendering with lower cases
+  ctx.fontStretch = "ultra-condensed";
+  _assertSame(ctx.fontStretch, "ultra-condensed", "ctx.fontStretch", "\"ultra-condensed\"");
+
+  ctx.fontStretch = "extra-condensed";
+  _assertSame(ctx.fontStretch, "extra-condensed", "ctx.fontStretch", "\"extra-condensed\"");
+
+  ctx.fontStretch = "condensed";
+  _assertSame(ctx.fontStretch, "condensed", "ctx.fontStretch", "\"condensed\"");
+
+  ctx.fontStretch = "semi-condensed";
+  _assertSame(ctx.fontStretch, "semi-condensed", "ctx.fontStretch", "\"semi-condensed\"");
+
+  ctx.fontStretch = "normal";
+  _assertSame(ctx.fontStretch, "normal", "ctx.fontStretch", "\"normal\"");
+
+  ctx.fontStretch = "semi-expanded";
+  _assertSame(ctx.fontStretch, "semi-expanded", "ctx.fontStretch", "\"semi-expanded\"");
+
+  ctx.fontStretch = "expanded";
+  _assertSame(ctx.fontStretch, "expanded", "ctx.fontStretch", "\"expanded\"");
+
+  ctx.fontStretch = "extra-expanded";
+  _assertSame(ctx.fontStretch, "extra-expanded", "ctx.fontStretch", "\"extra-expanded\"");
+
+  ctx.fontStretch = "ultra-expanded";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  // Setting fontStretch with lower cases and upper cases word,
+  // these values should be ignored.
+  ctx.fontStretch = "ulTra-condensed";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "Extra-condensed";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "cOndensed";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "Semi-Condensed";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "normaL";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "semi-Expanded";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "Expanded";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "eXtra-expanded";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+  ctx.fontStretch = "abcd";
+  _assertSame(ctx.fontStretch, "ultra-expanded", "ctx.fontStretch", "\"ultra-expanded\"");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontVariant.settings.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontVariant.settings.html
new file mode 100644
index 0000000000..cff5ad183a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.fontVariant.settings.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.fontVariant.settings</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.text.drawing.style.fontVariant.settings</h1>
+<p class="desc">Testing basic functionalities of fontVariant for canvas</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("Testing basic functionalities of fontVariant for canvas");
+_addTest(function(canvas, ctx) {
+
+  // Setting fontVariantCaps with lower cases
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "normal";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "small-caps";
+  _assertSame(ctx.fontVariantCaps, "small-caps", "ctx.fontVariantCaps", "\"small-caps\"");
+
+  ctx.fontVariantCaps = "all-small-caps";
+  _assertSame(ctx.fontVariantCaps, "all-small-caps", "ctx.fontVariantCaps", "\"all-small-caps\"");
+
+  ctx.fontVariantCaps = "petite-caps";
+  _assertSame(ctx.fontVariantCaps, "petite-caps", "ctx.fontVariantCaps", "\"petite-caps\"");
+
+  ctx.fontVariantCaps = "all-petite-caps";
+  _assertSame(ctx.fontVariantCaps, "all-petite-caps", "ctx.fontVariantCaps", "\"all-petite-caps\"");
+
+  ctx.fontVariantCaps = "unicase";
+  _assertSame(ctx.fontVariantCaps, "unicase", "ctx.fontVariantCaps", "\"unicase\"");
+
+  ctx.fontVariantCaps = "titling-caps";
+  _assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\"");
+
+  // Setting fontVariantCaps with mixed-case values is not valid
+  ctx.fontVariantCaps = "nORmal";
+  _assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\"");
+
+  ctx.fontVariantCaps = "normal";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "smaLL-caps";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "all-small-CAPS";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "pEtitE-caps";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "All-Petite-Caps";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "uNIcase";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  ctx.fontVariantCaps = "titling-CAPS";
+  _assertSame(ctx.fontVariantCaps, "normal", "ctx.fontVariantCaps", "\"normal\"");
+
+  // Setting fontVariantCaps with non-existing font variant.
+  ctx.fontVariantCaps = "titling-caps";
+  ctx.fontVariantCaps = "abcd";
+  _assertSame(ctx.fontVariantCaps, "titling-caps", "ctx.fontVariantCaps", "\"titling-caps\"");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.invalid.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.invalid.spacing.html
new file mode 100644
index 0000000000..a0b8340b2c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.invalid.spacing.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.text.drawing.style.invalid.spacing</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.text.drawing.style.invalid.spacing</h1>
+<p class="desc">Testing letter spacing and word spacing with invalid units</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("Testing letter spacing and word spacing with invalid units");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+
+  function test_word_spacing(value) {
+    ctx.wordSpacing = value;
+    ctx.letterSpacing = value;
+    _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+    _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  }
+  test_word_spacing('0s');
+  test_word_spacing('1min');
+  test_word_spacing('1deg');
+  test_word_spacing('1pp');
+  test_word_spacing('initial');
+  test_word_spacing('inherit');
+  test_word_spacing('normal');
+  test_word_spacing('none');
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.change.font.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.change.font.html
new file mode 100644
index 0000000000..daff0cf9d6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.change.font.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.text.drawing.style.letterSpacing.change.font</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.text.drawing.style.letterSpacing.change.font</h1>
+<p class="desc">Set letter spacing and word spacing to font dependent value and verify it works after font change.</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("Set letter spacing and word spacing to font dependent value and verify it works after font change.");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+  // Get the width for 'Hello World' at default size, 10px.
+  var width_normal = ctx.measureText('Hello World').width;
+
+  ctx.letterSpacing = '1em';
+  _assertSame(ctx.letterSpacing, '1em', "ctx.letterSpacing", "'1em'");
+  // 1em = 10px. Add 10px after each letter in "Hello World",
+  // makes it 110px longer.
+  var width_with_spacing = ctx.measureText('Hello World').width;
+  assert_approx_equals(width_with_spacing, width_normal + 110, 0.1, "letter-spacing error");
+
+  // Changing font to 20px. Without resetting the spacing, 1em letterSpacing
+  // is now 20px, so it's suppose to be 220px longer without any letterSpacing set.
+  ctx.font = '20px serif';
+  width_with_spacing = ctx.measureText('Hello World').width;
+  // Now calculate the reference spacing for "Hello World" with no spacing.
+  ctx.letterSpacing = '0em';
+  width_normal = ctx.measureText('Hello World').width;
+  assert_approx_equals(width_with_spacing, width_normal + 220, 0.1, "letter-spacing error after font change");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.measure.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.measure.html
new file mode 100644
index 0000000000..0e4848b6fe
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.letterSpacing.measure.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.letterSpacing.measure</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.text.drawing.style.letterSpacing.measure</h1>
+<p class="desc">Testing letter spacing with different length units</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("Testing letter spacing with different length units");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+  var width_normal = ctx.measureText('Hello World').width;
+
+  function test_letter_spacing(value, difference_spacing, epsilon) {
+    ctx.letterSpacing = value;
+    _assertSame(ctx.letterSpacing, value, "ctx.letterSpacing", "value");
+    _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+    width_with_letter_spacing = ctx.measureText('Hello World').width;
+    assert_approx_equals(width_with_letter_spacing, width_normal + difference_spacing, epsilon, "letter spacing doesn't work.");
+  }
+
+  // The first value is the letter Spacing to be set, the second value the
+  // change in length of string 'Hello World', note that there are 11 letters
+  // in 'hello world', so the length difference is always letterSpacing * 11.
+  // and the third value is the acceptable differencee for the length change,
+  // note that unit such as 1cm/1mm doesn't map to an exact pixel value.
+  test_cases = [['3px', 33, 0.1],
+               ['5px', 55, 0.1],
+               ['-2px', -22, 0.1],
+               ['1em', 110, 0.1],
+               ['-0.1em', -11, 0.1],
+               ['1in', 1056, 0.1],
+               ['-0.1cm', -41.65, 0.2],
+               ['-0.6mm', -24,95, 0.2]]
+
+  for (const test_case of test_cases) {
+    test_letter_spacing(test_case[0], test_case[1], test_case[2]);
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.direction.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.direction.html
new file mode 100644
index 0000000000..abe696b196
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.direction.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.text.drawing.style.measure.direction</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.text.drawing.style.measure.direction</h1>
+<p class="desc">Measurement should follow text direction</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("Measurement should follow text direction");
+_addTest(function(canvas, ctx) {
+
+  ctx.direction = "ltr";
+  metrics = ctx.measureText('hello');
+  _assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight");
+
+  ctx.direction = "rtl";
+  metrics = ctx.measureText('hello');
+  _assert(metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.rtl.text.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.rtl.text.html
new file mode 100644
index 0000000000..e521b09236
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.rtl.text.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.text.drawing.style.measure.rtl.text</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.text.drawing.style.measure.rtl.text</h1>
+<p class="desc">Measurement should follow canvas direction instead text direction</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("Measurement should follow canvas direction instead text direction");
+_addTest(function(canvas, ctx) {
+
+  metrics = ctx.measureText('اَلْعَرَبِيَّةُ');
+  _assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight");
+
+  metrics = ctx.measureText('hello');
+  _assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.textAlign.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.textAlign.html
new file mode 100644
index 0000000000..2d5a4718c5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.measure.textAlign.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.text.drawing.style.measure.textAlign</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.text.drawing.style.measure.textAlign</h1>
+<p class="desc">Measurement should be related to textAlignment</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("Measurement should be related to textAlignment");
+_addTest(function(canvas, ctx) {
+
+  ctx.textAlign = "right";
+  metrics = ctx.measureText('hello');
+  _assert(metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft > metrics.actualBoundingBoxRight");
+
+  ctx.textAlign = "left"
+  metrics = ctx.measureText('hello');
+  _assert(metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight, "metrics.actualBoundingBoxLeft < metrics.actualBoundingBoxRight");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.nonfinite.spacing.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.nonfinite.spacing.html
new file mode 100644
index 0000000000..5ba20208e5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.nonfinite.spacing.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.text.drawing.style.nonfinite.spacing</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.text.drawing.style.nonfinite.spacing</h1>
+<p class="desc">Testing letter spacing and word spacing with nonfinite 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("Testing letter spacing and word spacing with nonfinite inputs");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+
+  function test_word_spacing(value) {
+    ctx.wordSpacing = value;
+    ctx.letterSpacing = value;
+    _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+    _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  }
+  test_word_spacing(NaN);
+  test_word_spacing(Infinity);
+  test_word_spacing(-Infinity);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.textRendering.settings.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.textRendering.settings.html
new file mode 100644
index 0000000000..dee856842a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.textRendering.settings.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.textRendering.settings</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.text.drawing.style.textRendering.settings</h1>
+<p class="desc">Testing basic functionalities of textRendering in Canvas</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("Testing basic functionalities of textRendering in Canvas");
+_addTest(function(canvas, ctx) {
+
+  // Setting textRendering with correct case.
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  ctx.textRendering = "optimizeSpeed";
+  _assertSame(ctx.textRendering, "optimizeSpeed", "ctx.textRendering", "\"optimizeSpeed\"");
+
+  ctx.textRendering = "optimizeLegibility";
+  _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\"");
+
+  ctx.textRendering = "geometricPrecision";
+  _assertSame(ctx.textRendering, "geometricPrecision", "ctx.textRendering", "\"geometricPrecision\"");
+
+  ctx.textRendering = "auto";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  // Setting textRendering with incorrect case is ignored.
+  ctx.textRendering = "OPtimizeSpeed";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  ctx.textRendering = "OPtimizELEgibility";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  ctx.textRendering = "GeometricPrecision";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  ctx.textRendering = "optimizespeed";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  ctx.textRendering = "optimizelegibility";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  ctx.textRendering = "geometricprecision";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+  ctx.textRendering = "optimizeLegibility";
+  _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\"");
+
+  ctx.textRendering = "AUTO";
+  _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\"");
+
+  ctx.textRendering = "Auto";
+  _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\"");
+
+  // Setting textRendering with non-existing font variant.
+  ctx.textRendering = "abcd";
+  _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\"");
+
+  ctx.textRendering = "normal";
+  _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\"");
+
+  ctx.textRendering = "";
+  _assertSame(ctx.textRendering, "optimizeLegibility", "ctx.textRendering", "\"optimizeLegibility\"");
+
+  ctx.textRendering = "auto";
+  _assertSame(ctx.textRendering, "auto", "ctx.textRendering", "\"auto\"");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.change.font.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.change.font.html
new file mode 100644
index 0000000000..8bad1a0447
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.change.font.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.text.drawing.style.wordSpacing.change.font</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.text.drawing.style.wordSpacing.change.font</h1>
+<p class="desc">Set word spacing and word spacing to font dependent value and verify it works after font change.</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("Set word spacing and word spacing to font dependent value and verify it works after font change.");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+  // Get the width for 'Hello World, again' at default size, 10px.
+  var width_normal = ctx.measureText('Hello World, again').width;
+
+  ctx.wordSpacing = '1em';
+  _assertSame(ctx.wordSpacing, '1em', "ctx.wordSpacing", "'1em'");
+  // 1em = 10px. Add 10px after each word in "Hello World, again",
+  // makes it 20px longer.
+  var width_with_spacing = ctx.measureText('Hello World, again').width;
+  _assertSame(width_with_spacing, width_normal + 20, "width_with_spacing", "width_normal + 20");
+
+  // Changing font to 20px. Without resetting the spacing, 1em wordSpacing
+  // is now 20px, so it's suppose to be 40px longer without any wordSpacing set.
+  ctx.font = '20px serif';
+  width_with_spacing = ctx.measureText('Hello World, again').width;
+  // Now calculate the reference spacing for "Hello World, again" with no spacing.
+  ctx.wordSpacing = '0em';
+  width_normal = ctx.measureText('Hello World, again').width;
+  _assertSame(width_with_spacing, width_normal + 40, "width_with_spacing", "width_normal + 40");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.measure.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.measure.html
new file mode 100644
index 0000000000..2562477d94
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.drawing.style.wordSpacing.measure.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.drawing.style.wordSpacing.measure</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.text.drawing.style.wordSpacing.measure</h1>
+<p class="desc">Testing word spacing with different length units</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("Testing word spacing with different length units");
+_addTest(function(canvas, ctx) {
+
+  _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+  _assertSame(ctx.wordSpacing, '0px', "ctx.wordSpacing", "'0px'");
+  var width_normal = ctx.measureText('Hello World, again').width;
+
+  function test_word_spacing(value, difference_spacing, epsilon) {
+    ctx.wordSpacing = value;
+    _assertSame(ctx.letterSpacing, '0px', "ctx.letterSpacing", "'0px'");
+    _assertSame(ctx.wordSpacing, value, "ctx.wordSpacing", "value");
+    width_with_word_spacing = ctx.measureText('Hello World, again').width;
+    assert_approx_equals(width_with_word_spacing, width_normal + difference_spacing, epsilon, "word spacing doesn't work.");
+  }
+
+  // The first value is the word Spacing to be set, the second value the
+  // change in length of string 'Hello World', note that there are 2 words
+  // in 'Hello World, again', so the length difference is always wordSpacing * 2.
+  // and the third value is the acceptable differencee for the length change,
+  // note that unit such as 1cm/1mm doesn't map to an exact pixel value.
+  test_cases = [['3px', 6, 0.1],
+               ['5px', 10, 0.1],
+               ['-2px', -4, 0.1],
+               ['1em', 20, 0.1],
+               ['-0.5em', -10, 0.1],
+               ['1in', 192, 0.1],
+               ['-0.1cm', -7.57, 0.2],
+               ['-0.6mm', -4.54, 0.2]]
+
+  for (const test_case of test_cases) {
+    test_word_spacing(test_case[0], test_case[1], test_case[2]);
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.default.html
new file mode 100644
index 0000000000..c6ac084843
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.default.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.font.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.text.font.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.font, '10px sans-serif', "ctx.font", "'10px sans-serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.basic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.basic.html
new file mode 100644
index 0000000000..70efec7743
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.basic.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.text.font.parse.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.text.font.parse.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>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.font = '20px serif';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20PX   SERIF';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex.html
new file mode 100644
index 0000000000..12e1d60e56
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex.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.text.font.parse.complex</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.text.font.parse.complex</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.font = 'small-caps italic 400 12px/2 Unknown Font, sans-serif';
+  _assert(['italic small-caps 12px "Unknown Font", sans-serif', 'italic small-caps 12px Unknown Font, sans-serif'].includes(ctx.font), "['italic small-caps 12px \"Unknown Font\", sans-serif', 'italic small-caps 12px Unknown Font, sans-serif'].includes(ctx.font)");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex2.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex2.html
new file mode 100644
index 0000000000..d85765fcd3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.complex2.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.text.font.parse.complex2</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.text.font.parse.complex2</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.font = 'small-caps italic 400 12px/2 "Unknown Font #2", sans-serif';
+  _assertSame(ctx.font, 'italic small-caps 12px "Unknown Font #2", sans-serif', "ctx.font", "'italic small-caps 12px \"Unknown Font #2\", sans-serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.family.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.family.html
new file mode 100644
index 0000000000..c53bedbffc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.family.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.text.font.parse.family</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.text.font.parse.family</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.font = '20px cursive,fantasy,monospace,sans-serif,serif,UnquotedFont,"QuotedFont\\\\\\","';
+  _assertSame(ctx.font, '20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, "QuotedFont\\\\\\","', "ctx.font", "'20px cursive, fantasy, monospace, sans-serif, serif, UnquotedFont, \"QuotedFont\\\\\\\\\\\\\",\"'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.invalid.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.invalid.html
new file mode 100644
index 0000000000..4fef0b4846
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.invalid.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.font.parse.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.text.font.parse.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) {
+
+  ctx.font = '20px serif';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = '';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = 'bogus';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = 'inherit';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = '10px {bogus}';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = '10px initial';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = '10px default';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = '10px inherit';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = '10px revert';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = 'var(--x)';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = 'var(--x, 10px serif)';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+  ctx.font = '20px serif';
+  ctx.font = '1em serif; background: green; margin: 10px';
+  _assertSame(ctx.font, '20px serif', "ctx.font", "'20px serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.default.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.default.html
new file mode 100644
index 0000000000..cb245f18a2
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.default.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.text.font.parse.size.percentage.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.text.font.parse.size.percentage.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) {
+
+  var canvas2 = document.createElement('canvas');
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.font = '1000% serif';
+  _assertSame(ctx2.font, '100px serif', "ctx2.font", "'100px serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.html
new file mode 100644
index 0000000000..520231a804
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.size.percentage.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.text.font.parse.size.percentage</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.text.font.parse.size.percentage</h1>
+<p class="desc"></p>
+
+
+<p class="output">Actual output:</p>
+<canvas id="c" class="output" width="100" height="50"style="font-size: 144px"><p class="fallback">FAIL (fallback content)</p></canvas>
+
+<ul id="d"></ul>
+<script>
+var t = async_test("");
+_addTest(function(canvas, ctx) {
+
+  ctx.font = '50% serif';
+  _assertSame(ctx.font, '72px serif', "ctx.font", "'72px serif'");
+  canvas.setAttribute('style', 'font-size: 100px');
+  _assertSame(ctx.font, '72px serif', "ctx.font", "'72px serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.system.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.system.html
new file mode 100644
index 0000000000..10fa0cb36d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.system.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.text.font.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.text.font.parse.system</h1>
+<p class="desc">System fonts must be computed to explicit values</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("System fonts must be computed to explicit values");
+_addTest(function(canvas, ctx) {
+
+  ctx.font = 'message-box';
+  _assertDifferent(ctx.font, 'message-box', "ctx.font", "'message-box'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.tiny.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.tiny.html
new file mode 100644
index 0000000000..10c9d2a0e0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.parse.tiny.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.text.font.parse.tiny</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.text.font.parse.tiny</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.font = '1px sans-serif';
+  _assertSame(ctx.font, '1px sans-serif', "ctx.font", "'1px sans-serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.relative_size.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.relative_size.html
new file mode 100644
index 0000000000..97b9718b14
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.relative_size.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.text.font.relative_size</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.text.font.relative_size</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');
+  var ctx2 = canvas2.getContext('2d');
+  ctx2.font = '1em sans-serif';
+  _assertSame(ctx2.font, '10px sans-serif', "ctx2.font", "'10px sans-serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.font.weight.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.weight.html
new file mode 100644
index 0000000000..05816b7254
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.font.weight.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.text.font.weight</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.text.font.weight</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.font = 'italic 400 12px serif';
+  _assertSame(ctx.font, 'italic 12px serif', "ctx.font", "'italic 12px serif'");
+
+  ctx.font = 'italic 300 12px serif';
+  _assertSame(ctx.font, 'italic 300 12px serif', "ctx.font", "'italic 300 12px serif'");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1-expected.html
new file mode 100644
index 0000000000..e2cef0d77a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.fontVariantCaps1</title>
+<h1>2d.text.fontVariantCaps1</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "small-caps 32px serif";
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1.html
new file mode 100644
index 0000000000..56acfc61f4
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps1.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.text.fontVariantCaps1-expected.html">
+<title>Canvas test: 2d.text.fontVariantCaps1</title>
+<h1>2d.text.fontVariantCaps1</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "32px serif";
+  ctx.fontVariantCaps = "small-caps";
+  // This should render the same as font = "small-caps 32px serif".
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps2.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps2.html
new file mode 100644
index 0000000000..56efbb6fd3
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps2.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.text.fontVariantCaps2</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.text.fontVariantCaps2</h1>
+<p class="desc">Testing small caps setting in fontVariant</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("Testing small caps setting in fontVariant");
+_addTest(function(canvas, ctx) {
+
+  ctx.font = "small-caps 32px serif";
+  // "mismatch" test, to verify that small-caps does change the rendering.
+  smallCaps_len = ctx.measureText("Hello World").width;
+
+  ctx.font = "32px serif";
+  normalCaps_len = ctx.measureText("Hello World").width;
+  _assert(smallCaps_len != normalCaps_len, "smallCaps_len != normalCaps_len");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3-expected.html
new file mode 100644
index 0000000000..cf2d5ae119
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.fontVariantCaps3</title>
+<h1>2d.text.fontVariantCaps3</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "small-caps 32px serif";
+  ctx.fillText("hello world", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3.html
new file mode 100644
index 0000000000..c3d80d3e56
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps3.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.text.fontVariantCaps3-expected.html">
+<title>Canvas test: 2d.text.fontVariantCaps3</title>
+<h1>2d.text.fontVariantCaps3</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "32px serif";
+  ctx.fontVariantCaps = "all-small-caps";
+  // This should render the same as using font = "small-caps 32px serif"
+  // with all the underlying text in lowercase.
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4-expected.html
new file mode 100644
index 0000000000..3813fd3684
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.fontVariantCaps4</title>
+<h1>2d.text.fontVariantCaps4</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "small-caps 32px serif";
+  ctx.fillText("hello world", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4.html
new file mode 100644
index 0000000000..1ee9053b4d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps4.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.text.fontVariantCaps4-expected.html">
+<title>Canvas test: 2d.text.fontVariantCaps4</title>
+<h1>2d.text.fontVariantCaps4</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "small-caps 32px serif";
+  // fontVariantCaps overrides the small-caps setting from the font attribute
+  // (spec unclear, cf. https://github.com/whatwg/html/issues/8103)
+  ctx.fontVariantCaps = "all-small-caps";
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5-expected.html
new file mode 100644
index 0000000000..4bda4ec4b5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.fontVariantCaps5</title>
+<h1>2d.text.fontVariantCaps5</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "small-caps 32px serif";
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5.html
new file mode 100644
index 0000000000..d80de4ea31
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps5.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.text.fontVariantCaps5-expected.html">
+<title>Canvas test: 2d.text.fontVariantCaps5</title>
+<h1>2d.text.fontVariantCaps5</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "small-caps 32px serif";
+  // fontVariantCaps 'normal' does not override the setting from the font attribute.
+  // (spec unclear, cf. https://github.com/whatwg/html/issues/8103)
+  ctx.fontVariantCaps = "normal";
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6-expected.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6-expected.html
new file mode 100644
index 0000000000..af9c736aea
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.fontVariantCaps6</title>
+<h1>2d.text.fontVariantCaps6</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  ctx.font = "32px serif";
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6.html
new file mode 100644
index 0000000000..c17fac18b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.fontVariantCaps6.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<link rel="match" href="2d.text.fontVariantCaps6-expected.html">
+<title>Canvas test: 2d.text.fontVariantCaps6</title>
+<h1>2d.text.fontVariantCaps6</h1>
+<p class="desc">Testing small caps setting in fontVariant</p>
+<canvas id="canvas" width="100" height="50">
+  <p class="fallback">FAIL (fallback content)</p>
+</canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext('2d');
+
+  // fontVariantCaps is reset when the font attribute is set.
+  // (spec unclear, cf. https://github.com/whatwg/html/issues/8103)
+  ctx.fontVariantCaps = "all-small-caps";
+  ctx.font = "32px serif";
+  ctx.fillText("Hello World", 20, 100);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.actualBoundingBox.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.actualBoundingBox.html
new file mode 100644
index 0000000000..d0672b23dc
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.actualBoundingBox.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.measure.actualBoundingBox</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.actualBoundingBox</h1>
+<p class="desc">Testing actualBoundingBox</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  ctx.baseline = 'alphabetic'
+  // Different platforms may render text slightly different.
+  // Values that are nominally expected to be zero might actually vary by a
+  // pixel or so if the UA accounts for antialiasing at glyph edges, so we
+  // allow a slight deviation.
+  _assert(Math.abs(ctx.measureText('A').actualBoundingBoxLeft) <= 1, "Math.abs(ctx.measureText('A').actualBoundingBoxLeft) <= 1");
+  _assert(ctx.measureText('A').actualBoundingBoxRight >= 50, "ctx.measureText('A').actualBoundingBoxRight >= 50");
+  _assert(ctx.measureText('A').actualBoundingBoxAscent >= 35, "ctx.measureText('A').actualBoundingBoxAscent >= 35");
+  _assert(Math.abs(ctx.measureText('A').actualBoundingBoxDescent) <= 1, "Math.abs(ctx.measureText('A').actualBoundingBoxDescent) <= 1");
+
+  _assert(ctx.measureText('D').actualBoundingBoxLeft >= 48, "ctx.measureText('D').actualBoundingBoxLeft >= 48");
+  _assert(ctx.measureText('D').actualBoundingBoxLeft <= 52, "ctx.measureText('D').actualBoundingBoxLeft <= 52");
+  _assert(ctx.measureText('D').actualBoundingBoxRight >= 75, "ctx.measureText('D').actualBoundingBoxRight >= 75");
+  _assert(ctx.measureText('D').actualBoundingBoxRight <= 80, "ctx.measureText('D').actualBoundingBoxRight <= 80");
+  _assert(ctx.measureText('D').actualBoundingBoxAscent >= 35, "ctx.measureText('D').actualBoundingBoxAscent >= 35");
+  _assert(ctx.measureText('D').actualBoundingBoxAscent <= 40, "ctx.measureText('D').actualBoundingBoxAscent <= 40");
+  _assert(ctx.measureText('D').actualBoundingBoxDescent >= 12, "ctx.measureText('D').actualBoundingBoxDescent >= 12");
+  _assert(ctx.measureText('D').actualBoundingBoxDescent <= 15, "ctx.measureText('D').actualBoundingBoxDescent <= 15");
+
+  _assert(Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) <= 1, "Math.abs(ctx.measureText('ABCD').actualBoundingBoxLeft) <= 1");
+  _assert(ctx.measureText('ABCD').actualBoundingBoxRight >= 200, "ctx.measureText('ABCD').actualBoundingBoxRight >= 200");
+  _assert(ctx.measureText('ABCD').actualBoundingBoxAscent >= 85, "ctx.measureText('ABCD').actualBoundingBoxAscent >= 85");
+  _assert(ctx.measureText('ABCD').actualBoundingBoxDescent >= 37, "ctx.measureText('ABCD').actualBoundingBoxDescent >= 37");
+
+}, "Testing actualBoundingBox");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.advances.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.advances.html
new file mode 100644
index 0000000000..84f04dd677
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.advances.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.text.measure.advances</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.advances</h1>
+<p class="desc">Testing width advances</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  // Some platforms may return '-0'.
+  _assertSame(Math.abs(ctx.measureText('Hello').advances[0]), 0, "Math.abs(ctx.measureText('Hello').advances[\""+(0)+"\"])", "0");
+  // Different platforms may render text slightly different.
+  _assert(ctx.measureText('Hello').advances[1] >= 36, "ctx.measureText('Hello').advances[\""+(1)+"\"] >= 36");
+  _assert(ctx.measureText('Hello').advances[2] >= 58, "ctx.measureText('Hello').advances[\""+(2)+"\"] >= 58");
+  _assert(ctx.measureText('Hello').advances[3] >= 70, "ctx.measureText('Hello').advances[\""+(3)+"\"] >= 70");
+  _assert(ctx.measureText('Hello').advances[4] >= 80, "ctx.measureText('Hello').advances[\""+(4)+"\"] >= 80");
+
+  var tm = ctx.measureText('Hello');
+  _assertSame(ctx.measureText('Hello').advances[0], tm.advances[0], "ctx.measureText('Hello').advances[\""+(0)+"\"]", "tm.advances[\""+(0)+"\"]");
+  _assertSame(ctx.measureText('Hello').advances[1], tm.advances[1], "ctx.measureText('Hello').advances[\""+(1)+"\"]", "tm.advances[\""+(1)+"\"]");
+  _assertSame(ctx.measureText('Hello').advances[2], tm.advances[2], "ctx.measureText('Hello').advances[\""+(2)+"\"]", "tm.advances[\""+(2)+"\"]");
+  _assertSame(ctx.measureText('Hello').advances[3], tm.advances[3], "ctx.measureText('Hello').advances[\""+(3)+"\"]", "tm.advances[\""+(3)+"\"]");
+  _assertSame(ctx.measureText('Hello').advances[4], tm.advances[4], "ctx.measureText('Hello').advances[\""+(4)+"\"]", "tm.advances[\""+(4)+"\"]");
+
+}, "Testing width advances");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.baselines.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.baselines.html
new file mode 100644
index 0000000000..9d947eb361
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.baselines.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.text.measure.baselines</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.baselines</h1>
+<p class="desc">Testing baselines</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(Math.abs(ctx.measureText('A').alphabeticBaseline), 0, "Math.abs(ctx.measureText('A').alphabeticBaseline)", "0");
+  _assertSame(ctx.measureText('A').ideographicBaseline, 6.25, "ctx.measureText('A').ideographicBaseline", "6.25");
+  _assertSame(ctx.measureText('A').hangingBaseline, 25, "ctx.measureText('A').hangingBaseline", "25");
+
+  _assertSame(Math.abs(ctx.measureText('ABCD').alphabeticBaseline), 0, "Math.abs(ctx.measureText('ABCD').alphabeticBaseline)", "0");
+  _assertSame(ctx.measureText('ABCD').ideographicBaseline, 6.25, "ctx.measureText('ABCD').ideographicBaseline", "6.25");
+  _assertSame(ctx.measureText('ABCD').hangingBaseline, 25, "ctx.measureText('ABCD').hangingBaseline", "25");
+
+}, "Testing baselines");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-low-ascent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-low-ascent.html
new file mode 100644
index 0000000000..7b6874d10b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-low-ascent.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.text.measure.emHeights-low-ascent</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">
+<style>
+@font-face {
+  font-family: CanvasTest-ascent256;
+  src: url("/fonts/CanvasTest-ascent256.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.emHeights-low-ascent</h1>
+<p class="desc">Testing emHeights with reduced ascent metric</p>
+
+
+<span style="font-family: CanvasTest-ascent256; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '40px CanvasTest-ascent256';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(ctx.measureText('A').emHeightAscent, 20, "ctx.measureText('A').emHeightAscent", "20");
+  _assertSame(ctx.measureText('A').emHeightDescent, 20, "ctx.measureText('A').emHeightDescent", "20");
+  _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "40");
+
+  _assertSame(ctx.measureText('ABCD').emHeightAscent, 20, "ctx.measureText('ABCD').emHeightAscent", "20");
+  _assertSame(ctx.measureText('ABCD').emHeightDescent, 20, "ctx.measureText('ABCD').emHeightDescent", "20");
+  _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "40");
+
+}, "Testing emHeights with reduced ascent metric");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-zero-descent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-zero-descent.html
new file mode 100644
index 0000000000..c3ce994fa1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights-zero-descent.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.text.measure.emHeights-zero-descent</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">
+<style>
+@font-face {
+  font-family: CanvasTest-descent0;
+  src: url("/fonts/CanvasTest-descent0.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.emHeights-zero-descent</h1>
+<p class="desc">Testing emHeights with zero descent metric</p>
+
+
+<span style="font-family: CanvasTest-descent0; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '40px CanvasTest-descent0';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightAscent", "40");
+  _assertSame(ctx.measureText('A').emHeightDescent, 0, "ctx.measureText('A').emHeightDescent", "0");
+  _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "40");
+
+  _assertSame(ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightAscent", "40");
+  _assertSame(ctx.measureText('ABCD').emHeightDescent, 0, "ctx.measureText('ABCD').emHeightDescent", "0");
+  _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "40");
+
+}, "Testing emHeights with zero descent metric");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights.html
new file mode 100644
index 0000000000..0db4c30801
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.emHeights.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.text.measure.emHeights</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.emHeights</h1>
+<p class="desc">Testing emHeights</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '40px CanvasTest';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(ctx.measureText('A').emHeightAscent, 30, "ctx.measureText('A').emHeightAscent", "30");
+  _assertSame(ctx.measureText('A').emHeightDescent, 10, "ctx.measureText('A').emHeightDescent", "10");
+  _assertSame(ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent, 40, "ctx.measureText('A').emHeightDescent + ctx.measureText('A').emHeightAscent", "40");
+
+  _assertSame(ctx.measureText('ABCD').emHeightAscent, 30, "ctx.measureText('ABCD').emHeightAscent", "30");
+  _assertSame(ctx.measureText('ABCD').emHeightDescent, 10, "ctx.measureText('ABCD').emHeightDescent", "10");
+  _assertSame(ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent, 40, "ctx.measureText('ABCD').emHeightDescent + ctx.measureText('ABCD').emHeightAscent", "40");
+
+}, "Testing emHeights");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-reduced-ascent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-reduced-ascent.html
new file mode 100644
index 0000000000..653d26d820
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-reduced-ascent.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.text.measure.fontBoundingBox-reduced-ascent</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">
+<style>
+@font-face {
+  font-family: CanvasTest-ascent256;
+  src: url("/fonts/CanvasTest-ascent256.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.fontBoundingBox-reduced-ascent</h1>
+<p class="desc">Testing fontBoundingBox for OffscreenCanvas with reduced ascent metric</p>
+
+
+<span style="font-family: CanvasTest-ascent256; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '40px CanvasTest-ascent256';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 10, "ctx.measureText('A').fontBoundingBoxAscent", "10");
+  _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 10, "ctx.measureText('A').fontBoundingBoxDescent", "10");
+
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 10, "ctx.measureText('ABCD').fontBoundingBoxAscent", "10");
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 10, "ctx.measureText('ABCD').fontBoundingBoxDescent", "10");
+
+}, "Testing fontBoundingBox for OffscreenCanvas with reduced ascent metric");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-zero-descent.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-zero-descent.html
new file mode 100644
index 0000000000..785c0bc186
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox-zero-descent.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.text.measure.fontBoundingBox-zero-descent</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">
+<style>
+@font-face {
+  font-family: CanvasTest-descent0;
+  src: url("/fonts/CanvasTest-descent0.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.fontBoundingBox-zero-descent</h1>
+<p class="desc">Testing fontBoundingBox for OffscreenCanvas with zero descent metric</p>
+
+
+<span style="font-family: CanvasTest-descent0; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '40px CanvasTest-descent0';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 30, "ctx.measureText('A').fontBoundingBoxAscent", "30");
+  _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 0, "ctx.measureText('A').fontBoundingBoxDescent", "0");
+
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 30, "ctx.measureText('ABCD').fontBoundingBoxAscent", "30");
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 0, "ctx.measureText('ABCD').fontBoundingBoxDescent", "0");
+
+}, "Testing fontBoundingBox for OffscreenCanvas with zero descent metric");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.ahem.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.ahem.html
new file mode 100644
index 0000000000..0044f4d1e7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.ahem.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.text.measure.fontBoundingBox.ahem</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">
+<style>
+@font-face {
+  font-family: Ahem;
+  src: url("/fonts/Ahem.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.fontBoundingBox.ahem</h1>
+<p class="desc">Testing fontBoundingBox for font ahem</p>
+
+
+<span style="font-family: Ahem; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px Ahem';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 40, "ctx.measureText('A').fontBoundingBoxAscent", "40");
+  _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 10, "ctx.measureText('A').fontBoundingBoxDescent", "10");
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 40, "ctx.measureText('ABCD').fontBoundingBoxAscent", "40");
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 10, "ctx.measureText('ABCD').fontBoundingBoxDescent", "10");
+
+}, "Testing fontBoundingBox for font ahem");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.html
new file mode 100644
index 0000000000..9e7e190754
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.fontBoundingBox.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.text.measure.fontBoundingBox</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.fontBoundingBox</h1>
+<p class="desc">Testing fontBoundingBox measurements</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '40px CanvasTest';
+  ctx.direction = 'ltr';
+  ctx.align = 'left'
+  _assertSame(ctx.measureText('A').fontBoundingBoxAscent, 30, "ctx.measureText('A').fontBoundingBoxAscent", "30");
+  _assertSame(ctx.measureText('A').fontBoundingBoxDescent, 10, "ctx.measureText('A').fontBoundingBoxDescent", "10");
+
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxAscent, 30, "ctx.measureText('ABCD').fontBoundingBoxAscent", "30");
+  _assertSame(ctx.measureText('ABCD').fontBoundingBoxDescent, 10, "ctx.measureText('ABCD').fontBoundingBoxDescent", "10");
+
+}, "Testing fontBoundingBox measurements");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.basic.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.basic.html
new file mode 100644
index 0000000000..36dc468b4e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.basic.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.text.measure.width.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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.width.basic</h1>
+<p class="desc">The width of character is same as font used</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  _assertSame(ctx.measureText('A').width, 50, "ctx.measureText('A').width", "50");
+  _assertSame(ctx.measureText('AA').width, 100, "ctx.measureText('AA').width", "100");
+  _assertSame(ctx.measureText('ABCD').width, 200, "ctx.measureText('ABCD').width", "200");
+
+  ctx.font = '100px CanvasTest';
+  _assertSame(ctx.measureText('A').width, 100, "ctx.measureText('A').width", "100");
+
+}, "The width of character is same as font used");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.empty.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.empty.html
new file mode 100644
index 0000000000..39ddad9789
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.empty.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.text.measure.width.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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.width.empty</h1>
+<p class="desc">The empty string has zero width</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  _assertSame(ctx.measureText("").width, 0, "ctx.measureText(\"\").width", "0");
+
+}, "The empty string has zero width");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.space.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.space.html
new file mode 100644
index 0000000000..7fd8095e28
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.measure.width.space.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.text.measure.width.space</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">
+<style>
+@font-face {
+  font-family: CanvasTest;
+  src: url("/fonts/CanvasTest.ttf");
+}
+</style>
+<body class="show_output">
+
+<h1>2d.text.measure.width.space</h1>
+<p class="desc">Space characters are converted to U+0020 and NOT collapsed</p>
+
+
+<span style="font-family: CanvasTest; position: absolute; visibility: hidden">A</span>
+<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>
+promise_test(async t => {
+
+  var canvas = document.getElementById('c');
+  var ctx = canvas.getContext('2d');
+
+  await document.fonts.ready;
+  ctx.font = '50px CanvasTest';
+  _assertSame(ctx.measureText('A B').width, 150, "ctx.measureText('A B').width", "150");
+  _assertSame(ctx.measureText('A  B').width, 200, "ctx.measureText('A  B').width", "200");
+  _assertSame(ctx.measureText('A \x09\x0a\x0c\x0d  \x09\x0a\x0c\x0dB').width, 650, "ctx.measureText('A \\x09\\x0a\\x0c\\x0d  \\x09\\x0a\\x0c\\x0dB').width", "650");
+  _assert(ctx.measureText('A \x0b B').width >= 200, "ctx.measureText('A \\x0b B').width >= 200");
+
+  _assertSame(ctx.measureText(' AB').width, 150, "ctx.measureText(' AB').width", "150");
+  _assertSame(ctx.measureText('AB ').width, 150, "ctx.measureText('AB ').width", "150");
+
+}, "Space characters are converted to U+0020 and NOT collapsed");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/2d.text.setFont.mathFont.html b/testing/web-platform/tests/html/canvas/element/text/2d.text.setFont.mathFont.html
new file mode 100644
index 0000000000..370104f1b8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/2d.text.setFont.mathFont.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.text.setFont.mathFont</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.text.setFont.mathFont</h1>
+<p class="desc">crbug.com/1212190, make sure offscreencanvas doesn't crash with Math Font</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("crbug.com/1212190, make sure offscreencanvas doesn't crash with Math Font");
+_addTest(function(canvas, ctx) {
+
+  ctx.font = "math serif";
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/direction-inherit-rtl.html b/testing/web-platform/tests/html/canvas/element/text/direction-inherit-rtl.html
new file mode 100644
index 0000000000..0ad92181a0
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/direction-inherit-rtl.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Canvas Test: the 'direction' property</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles">
+<link rel="match" href="reference/direction-rtl-ref.html">
+<meta name="assert" content="text rendering respects the direction property">
+<style>
+canvas {
+  margin: 10px;
+  border: 1px solid gray;
+}
+</style>
+
+<canvas id="c" width="300" height="300" dir="rtl"></canvas>
+
+<script>
+let ctx = c.getContext("2d");
+ctx.direction = "inherit";
+ctx.font = "16px sans-serif";
+ctx.textAlign = "left";
+ctx.fillText("Hello World!", 150, 50);
+ctx.textAlign = "right";
+ctx.fillText("Hello World!", 150, 100);
+ctx.textAlign = "start";
+ctx.fillText("Hello World!", 150, 150);
+ctx.textAlign = "end";
+ctx.fillText("Hello World!", 150, 200);
+ctx.textAlign = "center";
+ctx.fillText("Hello World!", 150, 250);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/direction-ltr.html b/testing/web-platform/tests/html/canvas/element/text/direction-ltr.html
new file mode 100644
index 0000000000..42a39ac589
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/direction-ltr.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Canvas Test: the 'direction' property</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles">
+<link rel="match" href="reference/direction-default-ref.html">
+<meta name="assert" content="text rendering respects the direction property">
+<style>
+canvas {
+  margin: 10px;
+  border: 1px solid gray;
+}
+</style>
+
+<canvas id="c" width="300" height="300" dir="rtl"></canvas>
+
+<script>
+let ctx = c.getContext("2d");
+ctx.direction = "ltr";
+ctx.font = "16px sans-serif";
+ctx.textAlign = "left";
+ctx.fillText("Hello World!", 150, 50);
+ctx.textAlign = "right";
+ctx.fillText("Hello World!", 150, 100);
+ctx.textAlign = "start";
+ctx.fillText("Hello World!", 150, 150);
+ctx.textAlign = "end";
+ctx.fillText("Hello World!", 150, 200);
+ctx.textAlign = "center";
+ctx.fillText("Hello World!", 150, 250);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/direction-rtl.html b/testing/web-platform/tests/html/canvas/element/text/direction-rtl.html
new file mode 100644
index 0000000000..3cc67c69f5
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/direction-rtl.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Canvas Test: the 'direction' property</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#text-styles">
+<link rel="match" href="reference/direction-rtl-ref.html">
+<meta name="assert" content="text rendering respects the direction property">
+<style>
+canvas {
+  margin: 10px;
+  border: 1px solid gray;
+}
+</style>
+
+<canvas id="c" width="300" height="300"></canvas>
+
+<script>
+let ctx = c.getContext("2d");
+ctx.direction = "rtl";
+ctx.font = "16px sans-serif";
+ctx.textAlign = "left";
+ctx.fillText("Hello World!", 150, 50);
+ctx.textAlign = "right";
+ctx.fillText("Hello World!", 150, 100);
+ctx.textAlign = "start";
+ctx.fillText("Hello World!", 150, 150);
+ctx.textAlign = "end";
+ctx.fillText("Hello World!", 150, 200);
+ctx.textAlign = "center";
+ctx.fillText("Hello World!", 150, 250);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/parent-style-relative-units.html b/testing/web-platform/tests/html/canvas/element/text/parent-style-relative-units.html
new file mode 100644
index 0000000000..b9a6b314c6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/parent-style-relative-units.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<title>Canvas test: CanvasTextDrawingStyles.font with canvas relative units</title>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-font">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<canvas id="canvas" style="font-size: 30px; line-height: 40px"></canvas>
+<script>
+  const canvas = document.getElementById("canvas");
+  const ctx = canvas.getContext("2d");
+
+  test(() => {
+    ctx.font = "2em serif";
+    assert_equals(ctx.font, "60px serif");
+  }, "Font-size based on canvas element font-size");
+
+  test(() => {
+    // Line-height should be forced to normal, but also irrelevant for resolving
+    // lh-units for font-size.
+    ctx.font = "2lh/100 serif";
+    assert_equals(ctx.font, "80px serif");
+  }, "Font-size based on canvas element line-height");
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/text/reference/direction-default-ref.html b/testing/web-platform/tests/html/canvas/element/text/reference/direction-default-ref.html
new file mode 100644
index 0000000000..cef6df259c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/reference/direction-default-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Canvas Reference: the 'direction' property</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+canvas {
+  margin: 10px;
+  border: 1px solid gray;
+}
+</style>
+
+<canvas id="c" width="300" height="300"></canvas>
+
+<script>
+let ctx = c.getContext("2d");
+ctx.font = "16px sans-serif";
+ctx.textAlign = "left";
+ctx.fillText("Hello World!", 150, 50);
+ctx.textAlign = "right";
+ctx.fillText("Hello World!", 150, 100);
+ctx.textAlign = "start";
+ctx.fillText("Hello World!", 150, 150);
+ctx.textAlign = "end";
+ctx.fillText("Hello World!", 150, 200);
+ctx.textAlign = "center";
+ctx.fillText("Hello World!", 150, 250);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/text/reference/direction-rtl-ref.html b/testing/web-platform/tests/html/canvas/element/text/reference/direction-rtl-ref.html
new file mode 100644
index 0000000000..010526d667
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/text/reference/direction-rtl-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>HTML Canvas Reference: the 'direction' property</title>
+<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
+<style>
+canvas {
+  margin: 10px;
+  border: 1px solid gray;
+}
+</style>
+
+<canvas id="c" width="300" height="300"></canvas>
+
+<script>
+let ctx = c.getContext("2d");
+ctx.font = "16px sans-serif";
+ctx.textAlign = "left";
+ctx.fillText("!Hello World", 150, 50);
+ctx.textAlign = "right";
+ctx.fillText("!Hello World", 150, 100);
+ctx.textAlign = "right";
+ctx.fillText("!Hello World", 150, 150);
+ctx.textAlign = "left";
+ctx.fillText("!Hello World", 150, 200);
+ctx.textAlign = "center";
+ctx.fillText("!Hello World", 150, 250);
+</script>
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.bitmap.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.bitmap.html
new file mode 100644
index 0000000000..6814679aba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.bitmap.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.state.saverestore.bitmap</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.state.saverestore.bitmap</h1>
+<p class="desc">save()/restore() does not affect the current bitmap</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("save()/restore() does not affect the current bitmap");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.save();
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.restore();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.clip.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.clip.html
new file mode 100644
index 0000000000..1ce44ab147
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.clip.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.state.saverestore.clip</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.state.saverestore.clip</h1>
+<p class="desc">save()/restore() affects the clipping path</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("save()/restore() affects the clipping path");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.save();
+  ctx.rect(0, 0, 1, 1);
+  ctx.clip();
+  ctx.restore();
+  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/the-canvas-state/2d.state.saverestore.fillStyle.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.fillStyle.html
new file mode 100644
index 0000000000..1eb8360e5f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.fillStyle.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.state.saverestore.fillStyle</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.state.saverestore.fillStyle</h1>
+<p class="desc">save()/restore() works for fillStyle</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("save()/restore() works for fillStyle");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.fillStyle;
+  ctx.save();
+  ctx.fillStyle = "#ff0000";
+  ctx.restore();
+  _assertSame(ctx.fillStyle, old, "ctx.fillStyle", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.fillStyle = "#ff0000";
+  old = ctx.fillStyle;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "#ff0000"
+  ctx.save();
+  _assertSame(ctx.fillStyle, old, "ctx.fillStyle", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.font.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.font.html
new file mode 100644
index 0000000000..8cb4d171bb
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.font.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.state.saverestore.font</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.state.saverestore.font</h1>
+<p class="desc">save()/restore() works for font</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("save()/restore() works for font");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.font;
+  ctx.save();
+  ctx.font = "25px serif";
+  ctx.restore();
+  _assertSame(ctx.font, old, "ctx.font", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.font = "25px serif";
+  old = ctx.font;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "25px serif"
+  ctx.save();
+  _assertSame(ctx.font, old, "ctx.font", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalAlpha.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalAlpha.html
new file mode 100644
index 0000000000..f3dae5ff51
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalAlpha.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.state.saverestore.globalAlpha</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.state.saverestore.globalAlpha</h1>
+<p class="desc">save()/restore() works for globalAlpha</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("save()/restore() works for globalAlpha");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.globalAlpha;
+  ctx.save();
+  ctx.globalAlpha = 0.5;
+  ctx.restore();
+  _assertSame(ctx.globalAlpha, old, "ctx.globalAlpha", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.globalAlpha = 0.5;
+  old = ctx.globalAlpha;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against 0.5
+  ctx.save();
+  _assertSame(ctx.globalAlpha, old, "ctx.globalAlpha", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalCompositeOperation.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalCompositeOperation.html
new file mode 100644
index 0000000000..fed0ceec3b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.globalCompositeOperation.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.state.saverestore.globalCompositeOperation</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.state.saverestore.globalCompositeOperation</h1>
+<p class="desc">save()/restore() works for globalCompositeOperation</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("save()/restore() works for globalCompositeOperation");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.globalCompositeOperation;
+  ctx.save();
+  ctx.globalCompositeOperation = "copy";
+  ctx.restore();
+  _assertSame(ctx.globalCompositeOperation, old, "ctx.globalCompositeOperation", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.globalCompositeOperation = "copy";
+  old = ctx.globalCompositeOperation;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "copy"
+  ctx.save();
+  _assertSame(ctx.globalCompositeOperation, old, "ctx.globalCompositeOperation", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineCap.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineCap.html
new file mode 100644
index 0000000000..90c52ce564
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineCap.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.state.saverestore.lineCap</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.state.saverestore.lineCap</h1>
+<p class="desc">save()/restore() works for lineCap</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("save()/restore() works for lineCap");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.lineCap;
+  ctx.save();
+  ctx.lineCap = "round";
+  ctx.restore();
+  _assertSame(ctx.lineCap, old, "ctx.lineCap", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.lineCap = "round";
+  old = ctx.lineCap;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "round"
+  ctx.save();
+  _assertSame(ctx.lineCap, old, "ctx.lineCap", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineJoin.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineJoin.html
new file mode 100644
index 0000000000..00495d9fb6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineJoin.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.state.saverestore.lineJoin</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.state.saverestore.lineJoin</h1>
+<p class="desc">save()/restore() works for lineJoin</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("save()/restore() works for lineJoin");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.lineJoin;
+  ctx.save();
+  ctx.lineJoin = "round";
+  ctx.restore();
+  _assertSame(ctx.lineJoin, old, "ctx.lineJoin", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.lineJoin = "round";
+  old = ctx.lineJoin;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "round"
+  ctx.save();
+  _assertSame(ctx.lineJoin, old, "ctx.lineJoin", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineWidth.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineWidth.html
new file mode 100644
index 0000000000..0705878d0a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.lineWidth.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.state.saverestore.lineWidth</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.state.saverestore.lineWidth</h1>
+<p class="desc">save()/restore() works for lineWidth</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("save()/restore() works for lineWidth");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.lineWidth;
+  ctx.save();
+  ctx.lineWidth = 0.5;
+  ctx.restore();
+  _assertSame(ctx.lineWidth, old, "ctx.lineWidth", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.lineWidth = 0.5;
+  old = ctx.lineWidth;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against 0.5
+  ctx.save();
+  _assertSame(ctx.lineWidth, old, "ctx.lineWidth", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.miterLimit.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.miterLimit.html
new file mode 100644
index 0000000000..efd2207515
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.miterLimit.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.state.saverestore.miterLimit</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.state.saverestore.miterLimit</h1>
+<p class="desc">save()/restore() works for miterLimit</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("save()/restore() works for miterLimit");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.miterLimit;
+  ctx.save();
+  ctx.miterLimit = 0.5;
+  ctx.restore();
+  _assertSame(ctx.miterLimit, old, "ctx.miterLimit", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.miterLimit = 0.5;
+  old = ctx.miterLimit;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against 0.5
+  ctx.save();
+  _assertSame(ctx.miterLimit, old, "ctx.miterLimit", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.path.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.path.html
new file mode 100644
index 0000000000..5848ae560c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.path.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.state.saverestore.path</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.state.saverestore.path</h1>
+<p class="desc">save()/restore() does not affect the current path</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("save()/restore() does not affect the current path");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.save();
+  ctx.rect(0, 0, 100, 50);
+  ctx.restore();
+  ctx.fillStyle = '#0f0';
+  ctx.fill();
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowBlur.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowBlur.html
new file mode 100644
index 0000000000..c5699b78fd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowBlur.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.state.saverestore.shadowBlur</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.state.saverestore.shadowBlur</h1>
+<p class="desc">save()/restore() works for shadowBlur</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("save()/restore() works for shadowBlur");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.shadowBlur;
+  ctx.save();
+  ctx.shadowBlur = 5;
+  ctx.restore();
+  _assertSame(ctx.shadowBlur, old, "ctx.shadowBlur", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.shadowBlur = 5;
+  old = ctx.shadowBlur;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against 5
+  ctx.save();
+  _assertSame(ctx.shadowBlur, old, "ctx.shadowBlur", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowColor.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowColor.html
new file mode 100644
index 0000000000..9b6a435202
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowColor.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.state.saverestore.shadowColor</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.state.saverestore.shadowColor</h1>
+<p class="desc">save()/restore() works for shadowColor</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("save()/restore() works for shadowColor");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.shadowColor;
+  ctx.save();
+  ctx.shadowColor = "#ff0000";
+  ctx.restore();
+  _assertSame(ctx.shadowColor, old, "ctx.shadowColor", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.shadowColor = "#ff0000";
+  old = ctx.shadowColor;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "#ff0000"
+  ctx.save();
+  _assertSame(ctx.shadowColor, old, "ctx.shadowColor", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetX.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetX.html
new file mode 100644
index 0000000000..427a44a373
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetX.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.state.saverestore.shadowOffsetX</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.state.saverestore.shadowOffsetX</h1>
+<p class="desc">save()/restore() works for shadowOffsetX</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("save()/restore() works for shadowOffsetX");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.shadowOffsetX;
+  ctx.save();
+  ctx.shadowOffsetX = 5;
+  ctx.restore();
+  _assertSame(ctx.shadowOffsetX, old, "ctx.shadowOffsetX", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.shadowOffsetX = 5;
+  old = ctx.shadowOffsetX;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against 5
+  ctx.save();
+  _assertSame(ctx.shadowOffsetX, old, "ctx.shadowOffsetX", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetY.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetY.html
new file mode 100644
index 0000000000..b711445c20
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.shadowOffsetY.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.state.saverestore.shadowOffsetY</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.state.saverestore.shadowOffsetY</h1>
+<p class="desc">save()/restore() works for shadowOffsetY</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("save()/restore() works for shadowOffsetY");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.shadowOffsetY;
+  ctx.save();
+  ctx.shadowOffsetY = 5;
+  ctx.restore();
+  _assertSame(ctx.shadowOffsetY, old, "ctx.shadowOffsetY", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.shadowOffsetY = 5;
+  old = ctx.shadowOffsetY;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against 5
+  ctx.save();
+  _assertSame(ctx.shadowOffsetY, old, "ctx.shadowOffsetY", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stack.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stack.html
new file mode 100644
index 0000000000..122c543473
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stack.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.state.saverestore.stack</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.state.saverestore.stack</h1>
+<p class="desc">save()/restore() can be nested as a stack</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("save()/restore() can be nested as a stack");
+_addTest(function(canvas, ctx) {
+
+  ctx.lineWidth = 1;
+  ctx.save();
+  ctx.lineWidth = 2;
+  ctx.save();
+  ctx.lineWidth = 3;
+  _assertSame(ctx.lineWidth, 3, "ctx.lineWidth", "3");
+  ctx.restore();
+  _assertSame(ctx.lineWidth, 2, "ctx.lineWidth", "2");
+  ctx.restore();
+  _assertSame(ctx.lineWidth, 1, "ctx.lineWidth", "1");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stackdepth.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stackdepth.html
new file mode 100644
index 0000000000..6fa591d06a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.stackdepth.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.state.saverestore.stackdepth</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.state.saverestore.stackdepth</h1>
+<p class="desc">save()/restore() stack depth is not unreasonably limited</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("save()/restore() stack depth is not unreasonably limited");
+_addTest(function(canvas, ctx) {
+
+  var limit = 512;
+  for (var i = 1; i < limit; ++i)
+  {
+      ctx.save();
+      ctx.lineWidth = i;
+  }
+  for (var i = limit-1; i > 0; --i)
+  {
+      _assertSame(ctx.lineWidth, i, "ctx.lineWidth", "i");
+      ctx.restore();
+  }
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.strokeStyle.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.strokeStyle.html
new file mode 100644
index 0000000000..9ccaac7e7a
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.strokeStyle.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.state.saverestore.strokeStyle</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.state.saverestore.strokeStyle</h1>
+<p class="desc">save()/restore() works for strokeStyle</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("save()/restore() works for strokeStyle");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.strokeStyle;
+  ctx.save();
+  ctx.strokeStyle = "#ff0000";
+  ctx.restore();
+  _assertSame(ctx.strokeStyle, old, "ctx.strokeStyle", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.strokeStyle = "#ff0000";
+  old = ctx.strokeStyle;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "#ff0000"
+  ctx.save();
+  _assertSame(ctx.strokeStyle, old, "ctx.strokeStyle", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textAlign.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textAlign.html
new file mode 100644
index 0000000000..a86d62a8b7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textAlign.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.state.saverestore.textAlign</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.state.saverestore.textAlign</h1>
+<p class="desc">save()/restore() works for textAlign</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("save()/restore() works for textAlign");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.textAlign;
+  ctx.save();
+  ctx.textAlign = "center";
+  ctx.restore();
+  _assertSame(ctx.textAlign, old, "ctx.textAlign", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.textAlign = "center";
+  old = ctx.textAlign;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "center"
+  ctx.save();
+  _assertSame(ctx.textAlign, old, "ctx.textAlign", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textBaseline.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textBaseline.html
new file mode 100644
index 0000000000..5cbf712fb1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.textBaseline.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.state.saverestore.textBaseline</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.state.saverestore.textBaseline</h1>
+<p class="desc">save()/restore() works for textBaseline</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("save()/restore() works for textBaseline");
+_addTest(function(canvas, ctx) {
+
+  // Test that restore() undoes any modifications
+  var old = ctx.textBaseline;
+  ctx.save();
+  ctx.textBaseline = "bottom";
+  ctx.restore();
+  _assertSame(ctx.textBaseline, old, "ctx.textBaseline", "old");
+
+  // Also test that save() doesn't modify the values
+  ctx.textBaseline = "bottom";
+  old = ctx.textBaseline;
+      // we're not interested in failures caused by get(set(x)) != x (e.g.
+      // from rounding), so compare against 'old' instead of against "bottom"
+  ctx.save();
+  _assertSame(ctx.textBaseline, old, "ctx.textBaseline", "old");
+  ctx.restore();
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.transformation.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.transformation.html
new file mode 100644
index 0000000000..6edee8ae84
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.transformation.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.state.saverestore.transformation</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.state.saverestore.transformation</h1>
+<p class="desc">save()/restore() affects the current transformation matrix</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("save()/restore() affects the current transformation matrix");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.save();
+  ctx.translate(200, 0);
+  ctx.restore();
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(-200, 0, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.underflow.html b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.underflow.html
new file mode 100644
index 0000000000..763f269556
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/the-canvas-state/2d.state.saverestore.underflow.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.state.saverestore.underflow</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.state.saverestore.underflow</h1>
+<p class="desc">restore() with an empty stack has no effect</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("restore() with an empty stack has no effect");
+_addTest(function(canvas, ctx) {
+
+  for (var i = 0; i < 16; ++i)
+      ctx.restore();
+  ctx.lineWidth = 0.5;
+  ctx.restore();
+  _assertSame(ctx.lineWidth, 0.5, "ctx.lineWidth", "0.5");
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.order.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.order.html
new file mode 100644
index 0000000000..6c97bf7426
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.order.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.order</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.transformation.order</h1>
+<p class="desc">Transformations are applied in the right order</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("Transformations are applied in the right order");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.scale(2, 1);
+  ctx.rotate(Math.PI / 2);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, -50, 50, 50);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.direction.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.direction.html
new file mode 100644
index 0000000000..0b583cd678
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.direction.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.transformation.rotate.direction</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.transformation.rotate.direction</h1>
+<p class="desc">rotate() is clockwise</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("rotate() is clockwise");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.rotate(Math.PI / 2);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, -100, 50, 100);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.nonfinite.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.nonfinite.html
new file mode 100644
index 0000000000..3e685fa7a8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.nonfinite.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.transformation.rotate.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.transformation.rotate.nonfinite</h1>
+<p class="desc">rotate() with Infinity/NaN is ignored</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("rotate() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.translate(100, 10);
+  ctx.rotate(Infinity);
+  ctx.rotate(-Infinity);
+  ctx.rotate(NaN);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -10, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.radians.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.radians.html
new file mode 100644
index 0000000000..63f895a0de
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.radians.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.transformation.rotate.radians</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.transformation.rotate.radians</h1>
+<p class="desc">rotate() uses radians</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("rotate() uses radians");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.rotate(Math.PI); // should fail obviously if this is 3.1 degrees
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -50, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrap.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrap.html
new file mode 100644
index 0000000000..9b923e0008
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrap.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.transformation.rotate.wrap</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.transformation.rotate.wrap</h1>
+<p class="desc">rotate() wraps large positive values correctly</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("rotate() wraps large positive values correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.rotate(Math.PI * (1 + 4096)); // == pi (mod 2*pi)
+  // We need about pi +/- 0.001 in order to get correct-looking results
+  // 32-bit floats can store pi*4097 with precision 2^-10, so that should
+  // be safe enough on reasonable implementations
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -50, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,2, 0,255,0,255);
+  _assertPixel(canvas, 98,47, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrapnegative.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrapnegative.html
new file mode 100644
index 0000000000..96894ef20e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.wrapnegative.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.transformation.rotate.wrapnegative</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.transformation.rotate.wrapnegative</h1>
+<p class="desc">rotate() wraps large negative values correctly</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("rotate() wraps large negative values correctly");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.rotate(-Math.PI * (1 + 4096));
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -50, 100, 50);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+  _assertPixel(canvas, 98,2, 0,255,0,255);
+  _assertPixel(canvas, 98,47, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.zero.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.zero.html
new file mode 100644
index 0000000000..7026ea9d1b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.rotate.zero.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.transformation.rotate.zero</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.transformation.rotate.zero</h1>
+<p class="desc">rotate() by 0 does nothing</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("rotate() by 0 does nothing");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.rotate(0);
+  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/transformations/2d.transformation.scale.basic.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.basic.html
new file mode 100644
index 0000000000..7e4b3593b1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.basic.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.transformation.scale.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.transformation.scale.basic</h1>
+<p class="desc">scale() works</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("scale() works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.scale(2, 4);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 12.5);
+  _assertPixel(canvas, 90,40, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.large.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.large.html
new file mode 100644
index 0000000000..ce7f6d9fae
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.large.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.transformation.scale.large</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.transformation.scale.large</h1>
+<p class="desc">scale() with large scale factors works</p>
+
+<p class="notes">Not really that large at all, but it hits the limits in Firefox.
+<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("scale() with large scale factors works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.scale(1e5, 1e5);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 1, 1);
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.multiple.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.multiple.html
new file mode 100644
index 0000000000..73bfbc87c1
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.multiple.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.scale.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.transformation.scale.multiple</h1>
+<p class="desc">Multiple scale()s combine</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("Multiple scale()s combine");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.scale(Math.sqrt(2), Math.sqrt(2));
+  ctx.scale(Math.sqrt(2), Math.sqrt(2));
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 25);
+  _assertPixel(canvas, 90,40, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.negative.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.negative.html
new file mode 100644
index 0000000000..a5aef69b63
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.negative.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.transformation.scale.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.transformation.scale.negative</h1>
+<p class="desc">scale() with negative scale factors works</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("scale() with negative scale factors works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.save();
+  ctx.scale(-1, 1);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-50, 0, 50, 50);
+  ctx.restore();
+
+  ctx.save();
+  ctx.scale(1, -1);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(50, -50, 50, 50);
+  ctx.restore();
+  _assertPixel(canvas, 25,25, 0,255,0,255);
+  _assertPixel(canvas, 75,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.nonfinite.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.nonfinite.html
new file mode 100644
index 0000000000..c06f96eb22
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.nonfinite.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.transformation.scale.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.transformation.scale.nonfinite</h1>
+<p class="desc">scale() with Infinity/NaN is ignored</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("scale() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.translate(100, 10);
+  ctx.scale(Infinity, 0.1);
+  ctx.scale(-Infinity, 0.1);
+  ctx.scale(NaN, 0.1);
+  ctx.scale(0.1, Infinity);
+  ctx.scale(0.1, -Infinity);
+  ctx.scale(0.1, NaN);
+  ctx.scale(Infinity, Infinity);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -10, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.zero.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.zero.html
new file mode 100644
index 0000000000..ae15034a19
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.scale.zero.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.transformation.scale.zero</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.transformation.scale.zero</h1>
+<p class="desc">scale() with a scale factor of zero works</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("scale() with a scale factor of zero works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.save();
+  ctx.translate(50, 0);
+  ctx.scale(0, 1);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 25);
+  ctx.scale(1, 0);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.restore();
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.multiple.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.multiple.html
new file mode 100644
index 0000000000..099831e638
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.multiple.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.transformation.setTransform.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.transformation.setTransform.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="/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.setTransform(1/2,0, 0,1/2, 0,0);
+  ctx.setTransform();
+  ctx.setTransform(2,0, 0,2, 0,0);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 50, 25);
+  _assertPixel(canvas, 75,35, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.nonfinite.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.nonfinite.html
new file mode 100644
index 0000000000..019493ad16
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.nonfinite.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.setTransform.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.transformation.setTransform.nonfinite</h1>
+<p class="desc">setTransform() with Infinity/NaN is ignored</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("setTransform() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.translate(100, 10);
+  ctx.setTransform(Infinity, 0, 0, 0, 0, 0);
+  ctx.setTransform(-Infinity, 0, 0, 0, 0, 0);
+  ctx.setTransform(NaN, 0, 0, 0, 0, 0);
+  ctx.setTransform(0, Infinity, 0, 0, 0, 0);
+  ctx.setTransform(0, -Infinity, 0, 0, 0, 0);
+  ctx.setTransform(0, NaN, 0, 0, 0, 0);
+  ctx.setTransform(0, 0, Infinity, 0, 0, 0);
+  ctx.setTransform(0, 0, -Infinity, 0, 0, 0);
+  ctx.setTransform(0, 0, NaN, 0, 0, 0);
+  ctx.setTransform(0, 0, 0, Infinity, 0, 0);
+  ctx.setTransform(0, 0, 0, -Infinity, 0, 0);
+  ctx.setTransform(0, 0, 0, NaN, 0, 0);
+  ctx.setTransform(0, 0, 0, 0, Infinity, 0);
+  ctx.setTransform(0, 0, 0, 0, -Infinity, 0);
+  ctx.setTransform(0, 0, 0, 0, NaN, 0);
+  ctx.setTransform(0, 0, 0, 0, 0, Infinity);
+  ctx.setTransform(0, 0, 0, 0, 0, -Infinity);
+  ctx.setTransform(0, 0, 0, 0, 0, NaN);
+  ctx.setTransform(Infinity, Infinity, 0, 0, 0, 0);
+  ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, 0);
+  ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, 0);
+  ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
+  ctx.setTransform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.setTransform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
+  ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, 0);
+  ctx.setTransform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.setTransform(Infinity, Infinity, Infinity, 0, 0, Infinity);
+  ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, 0);
+  ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, 0);
+  ctx.setTransform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.setTransform(Infinity, Infinity, 0, Infinity, 0, Infinity);
+  ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, 0);
+  ctx.setTransform(Infinity, Infinity, 0, 0, Infinity, Infinity);
+  ctx.setTransform(Infinity, Infinity, 0, 0, 0, Infinity);
+  ctx.setTransform(Infinity, 0, Infinity, 0, 0, 0);
+  ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, 0);
+  ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, 0);
+  ctx.setTransform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
+  ctx.setTransform(Infinity, 0, Infinity, Infinity, 0, Infinity);
+  ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, 0);
+  ctx.setTransform(Infinity, 0, Infinity, 0, Infinity, Infinity);
+  ctx.setTransform(Infinity, 0, Infinity, 0, 0, Infinity);
+  ctx.setTransform(Infinity, 0, 0, Infinity, 0, 0);
+  ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, 0);
+  ctx.setTransform(Infinity, 0, 0, Infinity, Infinity, Infinity);
+  ctx.setTransform(Infinity, 0, 0, Infinity, 0, Infinity);
+  ctx.setTransform(Infinity, 0, 0, 0, Infinity, 0);
+  ctx.setTransform(Infinity, 0, 0, 0, Infinity, Infinity);
+  ctx.setTransform(Infinity, 0, 0, 0, 0, Infinity);
+  ctx.setTransform(0, Infinity, Infinity, 0, 0, 0);
+  ctx.setTransform(0, Infinity, Infinity, Infinity, 0, 0);
+  ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, 0);
+  ctx.setTransform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.setTransform(0, Infinity, Infinity, Infinity, 0, Infinity);
+  ctx.setTransform(0, Infinity, Infinity, 0, Infinity, 0);
+  ctx.setTransform(0, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.setTransform(0, Infinity, Infinity, 0, 0, Infinity);
+  ctx.setTransform(0, Infinity, 0, Infinity, 0, 0);
+  ctx.setTransform(0, Infinity, 0, Infinity, Infinity, 0);
+  ctx.setTransform(0, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.setTransform(0, Infinity, 0, Infinity, 0, Infinity);
+  ctx.setTransform(0, Infinity, 0, 0, Infinity, 0);
+  ctx.setTransform(0, Infinity, 0, 0, Infinity, Infinity);
+  ctx.setTransform(0, Infinity, 0, 0, 0, Infinity);
+  ctx.setTransform(0, 0, Infinity, Infinity, 0, 0);
+  ctx.setTransform(0, 0, Infinity, Infinity, Infinity, 0);
+  ctx.setTransform(0, 0, Infinity, Infinity, Infinity, Infinity);
+  ctx.setTransform(0, 0, Infinity, Infinity, 0, Infinity);
+  ctx.setTransform(0, 0, Infinity, 0, Infinity, 0);
+  ctx.setTransform(0, 0, Infinity, 0, Infinity, Infinity);
+  ctx.setTransform(0, 0, Infinity, 0, 0, Infinity);
+  ctx.setTransform(0, 0, 0, Infinity, Infinity, 0);
+  ctx.setTransform(0, 0, 0, Infinity, Infinity, Infinity);
+  ctx.setTransform(0, 0, 0, Infinity, 0, Infinity);
+  ctx.setTransform(0, 0, 0, 0, Infinity, Infinity);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -10, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.skewed.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.skewed.html
new file mode 100644
index 0000000000..f6f8655b1e
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.setTransform.skewed.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.setTransform.skewed</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.transformation.setTransform.skewed</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) {
+
+  // Create green with a red square ring inside it
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(20, 10, 60, 30);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(40, 20, 20, 10);
+
+  // Draw a skewed shape to fill that gap, to make sure it is aligned correctly
+  ctx.setTransform(1,4, 2,3, 5,6);
+  // Post-transform coordinates:
+  //   [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
+  // Hence pre-transform coordinates:
+  var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
+           [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
+           [-7.4,11.2]];
+  ctx.beginPath();
+  ctx.moveTo(pts[0][0], pts[0][1]);
+  for (var i = 0; i < pts.length; ++i)
+      ctx.lineTo(pts[i][0], pts[i][1]);
+  ctx.fill();
+  _assertPixel(canvas, 21,11, 0,255,0,255);
+  _assertPixel(canvas, 79,11, 0,255,0,255);
+  _assertPixel(canvas, 21,39, 0,255,0,255);
+  _assertPixel(canvas, 79,39, 0,255,0,255);
+  _assertPixel(canvas, 39,19, 0,255,0,255);
+  _assertPixel(canvas, 61,19, 0,255,0,255);
+  _assertPixel(canvas, 39,31, 0,255,0,255);
+  _assertPixel(canvas, 61,31, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.identity.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.identity.html
new file mode 100644
index 0000000000..be5de19a45
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.identity.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.transformation.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.transformation.transform.identity</h1>
+<p class="desc">transform() with the identity matrix does nothing</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("transform() with the identity matrix does nothing");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.transform(1,0, 0,1, 0,0);
+  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/transformations/2d.transformation.transform.multiply.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.multiply.html
new file mode 100644
index 0000000000..1e8e4cccdf
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.multiply.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.transform.multiply</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.transformation.transform.multiply</h1>
+<p class="desc">transform() multiplies the CTM</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("transform() multiplies the CTM");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.transform(1,2, 3,4, 5,6);
+  ctx.transform(-2,1, 3/2,-1/2, 1,-2);
+  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/transformations/2d.transformation.transform.nonfinite.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.nonfinite.html
new file mode 100644
index 0000000000..d3fae8520c
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.nonfinite.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.transform.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.transformation.transform.nonfinite</h1>
+<p class="desc">transform() with Infinity/NaN is ignored</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("transform() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.translate(100, 10);
+  ctx.transform(Infinity, 0, 0, 0, 0, 0);
+  ctx.transform(-Infinity, 0, 0, 0, 0, 0);
+  ctx.transform(NaN, 0, 0, 0, 0, 0);
+  ctx.transform(0, Infinity, 0, 0, 0, 0);
+  ctx.transform(0, -Infinity, 0, 0, 0, 0);
+  ctx.transform(0, NaN, 0, 0, 0, 0);
+  ctx.transform(0, 0, Infinity, 0, 0, 0);
+  ctx.transform(0, 0, -Infinity, 0, 0, 0);
+  ctx.transform(0, 0, NaN, 0, 0, 0);
+  ctx.transform(0, 0, 0, Infinity, 0, 0);
+  ctx.transform(0, 0, 0, -Infinity, 0, 0);
+  ctx.transform(0, 0, 0, NaN, 0, 0);
+  ctx.transform(0, 0, 0, 0, Infinity, 0);
+  ctx.transform(0, 0, 0, 0, -Infinity, 0);
+  ctx.transform(0, 0, 0, 0, NaN, 0);
+  ctx.transform(0, 0, 0, 0, 0, Infinity);
+  ctx.transform(0, 0, 0, 0, 0, -Infinity);
+  ctx.transform(0, 0, 0, 0, 0, NaN);
+  ctx.transform(Infinity, Infinity, 0, 0, 0, 0);
+  ctx.transform(Infinity, Infinity, Infinity, 0, 0, 0);
+  ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, 0);
+  ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, 0);
+  ctx.transform(Infinity, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.transform(Infinity, Infinity, Infinity, Infinity, 0, Infinity);
+  ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, 0);
+  ctx.transform(Infinity, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.transform(Infinity, Infinity, Infinity, 0, 0, Infinity);
+  ctx.transform(Infinity, Infinity, 0, Infinity, 0, 0);
+  ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, 0);
+  ctx.transform(Infinity, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.transform(Infinity, Infinity, 0, Infinity, 0, Infinity);
+  ctx.transform(Infinity, Infinity, 0, 0, Infinity, 0);
+  ctx.transform(Infinity, Infinity, 0, 0, Infinity, Infinity);
+  ctx.transform(Infinity, Infinity, 0, 0, 0, Infinity);
+  ctx.transform(Infinity, 0, Infinity, 0, 0, 0);
+  ctx.transform(Infinity, 0, Infinity, Infinity, 0, 0);
+  ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, 0);
+  ctx.transform(Infinity, 0, Infinity, Infinity, Infinity, Infinity);
+  ctx.transform(Infinity, 0, Infinity, Infinity, 0, Infinity);
+  ctx.transform(Infinity, 0, Infinity, 0, Infinity, 0);
+  ctx.transform(Infinity, 0, Infinity, 0, Infinity, Infinity);
+  ctx.transform(Infinity, 0, Infinity, 0, 0, Infinity);
+  ctx.transform(Infinity, 0, 0, Infinity, 0, 0);
+  ctx.transform(Infinity, 0, 0, Infinity, Infinity, 0);
+  ctx.transform(Infinity, 0, 0, Infinity, Infinity, Infinity);
+  ctx.transform(Infinity, 0, 0, Infinity, 0, Infinity);
+  ctx.transform(Infinity, 0, 0, 0, Infinity, 0);
+  ctx.transform(Infinity, 0, 0, 0, Infinity, Infinity);
+  ctx.transform(Infinity, 0, 0, 0, 0, Infinity);
+  ctx.transform(0, Infinity, Infinity, 0, 0, 0);
+  ctx.transform(0, Infinity, Infinity, Infinity, 0, 0);
+  ctx.transform(0, Infinity, Infinity, Infinity, Infinity, 0);
+  ctx.transform(0, Infinity, Infinity, Infinity, Infinity, Infinity);
+  ctx.transform(0, Infinity, Infinity, Infinity, 0, Infinity);
+  ctx.transform(0, Infinity, Infinity, 0, Infinity, 0);
+  ctx.transform(0, Infinity, Infinity, 0, Infinity, Infinity);
+  ctx.transform(0, Infinity, Infinity, 0, 0, Infinity);
+  ctx.transform(0, Infinity, 0, Infinity, 0, 0);
+  ctx.transform(0, Infinity, 0, Infinity, Infinity, 0);
+  ctx.transform(0, Infinity, 0, Infinity, Infinity, Infinity);
+  ctx.transform(0, Infinity, 0, Infinity, 0, Infinity);
+  ctx.transform(0, Infinity, 0, 0, Infinity, 0);
+  ctx.transform(0, Infinity, 0, 0, Infinity, Infinity);
+  ctx.transform(0, Infinity, 0, 0, 0, Infinity);
+  ctx.transform(0, 0, Infinity, Infinity, 0, 0);
+  ctx.transform(0, 0, Infinity, Infinity, Infinity, 0);
+  ctx.transform(0, 0, Infinity, Infinity, Infinity, Infinity);
+  ctx.transform(0, 0, Infinity, Infinity, 0, Infinity);
+  ctx.transform(0, 0, Infinity, 0, Infinity, 0);
+  ctx.transform(0, 0, Infinity, 0, Infinity, Infinity);
+  ctx.transform(0, 0, Infinity, 0, 0, Infinity);
+  ctx.transform(0, 0, 0, Infinity, Infinity, 0);
+  ctx.transform(0, 0, 0, Infinity, Infinity, Infinity);
+  ctx.transform(0, 0, 0, Infinity, 0, Infinity);
+  ctx.transform(0, 0, 0, 0, Infinity, Infinity);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -10, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.skewed.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.skewed.html
new file mode 100644
index 0000000000..c69756bc1d
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.transform.skewed.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.transformation.transform.skewed</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.transformation.transform.skewed</h1>
+<p class="desc">transform() with skewy matrix transforms correctly</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("transform() with skewy matrix transforms correctly");
+_addTest(function(canvas, ctx) {
+
+  // Create green with a red square ring inside it
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(0, 0, 100, 50);
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(20, 10, 60, 30);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(40, 20, 20, 10);
+
+  // Draw a skewed shape to fill that gap, to make sure it is aligned correctly
+  ctx.transform(1,4, 2,3, 5,6);
+  // Post-transform coordinates:
+  //   [[20,10],[80,10],[80,40],[20,40],[20,10],[40,20],[40,30],[60,30],[60,20],[40,20],[20,10]];
+  // Hence pre-transform coordinates:
+  var pts=[[-7.4,11.2],[-43.4,59.2],[-31.4,53.2],[4.6,5.2],[-7.4,11.2],
+           [-15.4,25.2],[-11.4,23.2],[-23.4,39.2],[-27.4,41.2],[-15.4,25.2],
+           [-7.4,11.2]];
+  ctx.beginPath();
+  ctx.moveTo(pts[0][0], pts[0][1]);
+  for (var i = 0; i < pts.length; ++i)
+      ctx.lineTo(pts[i][0], pts[i][1]);
+  ctx.fill();
+  _assertPixel(canvas, 21,11, 0,255,0,255);
+  _assertPixel(canvas, 79,11, 0,255,0,255);
+  _assertPixel(canvas, 21,39, 0,255,0,255);
+  _assertPixel(canvas, 79,39, 0,255,0,255);
+  _assertPixel(canvas, 39,19, 0,255,0,255);
+  _assertPixel(canvas, 61,19, 0,255,0,255);
+  _assertPixel(canvas, 39,31, 0,255,0,255);
+  _assertPixel(canvas, 61,31, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.basic.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.basic.html
new file mode 100644
index 0000000000..189a1544b6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.basic.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.transformation.translate.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.transformation.translate.basic</h1>
+<p class="desc">translate() works</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("translate() works");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.translate(100, 50);
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -50, 100, 50);
+  _assertPixel(canvas, 90,40, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.nonfinite.html b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.nonfinite.html
new file mode 100644
index 0000000000..0857693aff
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/transformations/2d.transformation.translate.nonfinite.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.transformation.translate.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.transformation.translate.nonfinite</h1>
+<p class="desc">translate() with Infinity/NaN is ignored</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("translate() with Infinity/NaN is ignored");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = '#f00';
+  ctx.fillRect(0, 0, 100, 50);
+
+  ctx.translate(100, 10);
+  ctx.translate(Infinity, 0.1);
+  ctx.translate(-Infinity, 0.1);
+  ctx.translate(NaN, 0.1);
+  ctx.translate(0.1, Infinity);
+  ctx.translate(0.1, -Infinity);
+  ctx.translate(0.1, NaN);
+  ctx.translate(Infinity, Infinity);
+
+  ctx.fillStyle = '#0f0';
+  ctx.fillRect(-100, -10, 100, 50);
+
+  _assertPixel(canvas, 50,25, 0,255,0,255);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/video/2d.video.invalid.html b/testing/web-platform/tests/html/canvas/element/video/2d.video.invalid.html
new file mode 100644
index 0000000000..22b4e054f8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/video/2d.video.invalid.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.video.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.video.invalid</h1>
+<p class="desc">Verify test doesn't crash with invalid video.</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("Verify test doesn't crash with invalid video.");
+_addTest(function(canvas, ctx) {
+
+  var v = document.createElement('video');
+  v.play();
+  // Test is deliberately not waiting for the 'playing' event to fire.
+  ctx.createPattern(v, 'repeat-x');
+  ctx.drawImage(v, 0, 0);
+
+});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html
new file mode 100644
index 0000000000..9c3d1b3374
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.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.color.space.p3.fillText</h1>
+<p class="desc">Test if fillText can be used with a solid display-p3 color</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("Test if fillText can be used with a solid display-p3 color");
+_addTest(function(canvas, ctx) {
+
+  deferTest();
+
+  const fullRedInP3 = [255, 0, 0, 255];
+  const sRGBRedInP3 = [234, 51, 35, 255];
+
+  canvas.width = 100;
+  canvas.height = 100;
+
+  let f = new FontFace("Ahem", "url(/fonts/Ahem.ttf)");
+  document.fonts.add(f);
+  f.load().then(function() {
+      t.step(function() {
+          ctx.font = "40px Ahem";
+
+          ctx.fillStyle = "#f00";
+          ctx.fillText("A", 0, 50);
+
+          ctx.fillStyle = "black";
+          ctx.fillStyle = "color(display-p3 100% 0 0)";
+          ctx.fillText("A", 50, 50);
+
+          let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height, { colorSpace: "display-p3" }).data;
+          let pixelAt = function(x, y) {
+              let offset = (y * canvas.width + x) * 4;
+              return [pixels[offset], pixels[offset + 1], pixels[offset + 2], pixels[offset + 3]];
+          };
+
+          assert_array_equals(pixelAt(25, 25), sRGBRedInP3);
+          assert_array_equals(pixelAt(75, 25), fullRedInP3);
+
+          t.done();
+      });
+  });
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html
new file mode 100644
index 0000000000..cc459fb2cd
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.fillText.shadow.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.fillText.shadow</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.color.space.p3.fillText.shadow</h1>
+<p class="desc">Test if fillText can be used with a display-p3 shadow color</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("Test if fillText can be used with a display-p3 shadow color");
+_addTest(function(canvas, ctx) {
+
+  deferTest();
+
+  const fullRedInP3 = [255, 0, 0, 255];
+  const sRGBRedInP3 = [234, 51, 35, 255];
+
+  canvas.width = 100;
+  canvas.height = 100;
+
+  let f = new FontFace("Ahem", "url(/fonts/Ahem.ttf)");
+  document.fonts.add(f);
+  f.load().then(function() {
+      t.step(function() {
+          ctx.font = "40px Ahem";
+
+          ctx.fillStyle = "black";
+          ctx.shadowBlur = 4;
+          ctx.shadowOffsetX = 0;
+          ctx.shadowOffsetY = 50;
+          ctx.shadowColor = "#f00";
+          ctx.fillText("A", 0, 0);
+
+          ctx.shadowColor = "black";
+          ctx.shadowColor = "color(display-p3 100% 0 0)";
+          ctx.fillText("A", 50, 0);
+
+          let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height, { colorSpace: "display-p3" }).data;
+          let pixelAt = function(x, y) {
+              let offset = (y * canvas.width + x) * 4;
+              return [pixels[offset], pixels[offset + 1], pixels[offset + 2], pixels[offset + 3]];
+          };
+
+          assert_array_equals(pixelAt(25, 25), sRGBRedInP3);
+          assert_array_equals(pixelAt(75, 25), fullRedInP3);
+
+          t.done();
+      });
+  });
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html
new file mode 100644
index 0000000000..626a41b49b
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.strokeText.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.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.color.space.p3.strokeText</h1>
+<p class="desc">Test if strokeText can be used with a solid display-p3 color</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("Test if strokeText can be used with a solid display-p3 color");
+_addTest(function(canvas, ctx) {
+
+  deferTest();
+
+  const fullRedInP3 = [255, 0, 0, 255];
+  const sRGBRedInP3 = [234, 51, 35, 255];
+
+  canvas.width = 100;
+  canvas.height = 100;
+
+  let f = new FontFace("Ahem", "url(/fonts/Ahem.ttf)");
+  document.fonts.add(f);
+  f.load().then(function() {
+      t.step(function() {
+          ctx.font = "40px Ahem";
+
+          ctx.strokeStyle = "#f00";
+          ctx.lineWidth = 20;
+          ctx.strokeText("A", 0, 50);
+
+          ctx.strokeStyle = "black";
+          ctx.strokeStyle = "color(display-p3 100% 0 0)";
+          ctx.strokeText("A", 50, 50);
+
+          let pixels = ctx.getImageData(0, 0, canvas.width, canvas.height, { colorSpace: "display-p3" }).data;
+          let pixelAt = function(x, y) {
+              let offset = (y * canvas.width + x) * 4;
+              return [pixels[offset], pixels[offset + 1], pixels[offset + 2], pixels[offset + 3]];
+          };
+
+          assert_array_equals(pixelAt(25, 25), sRGBRedInP3);
+          assert_array_equals(pixelAt(75, 25), fullRedInP3);
+
+          t.done();
+      });
+  });
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.html
new file mode 100644
index 0000000000..a03f49740f
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.p3.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.color.space.p3.to.p3</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.color.space.p3.to.p3</h1>
+<p class="desc">test getImageData with display-p3 and uint8 from display p3 uint8 canvas</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("test getImageData with display-p3 and uint8 from display p3 uint8 canvas");
+_addTest(function(canvas, ctx) {
+
+  var color_style = 'rgb(50, 100, 150)';
+  // [0.24304, 0.38818, 0.57227, 1.0] * 255 = [62, 99, 146, 255]
+  var pixel_expected = [62, 99, 146, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "display-p3", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  assert_approx_equals(pixel[0], pixel_expected[0], 2);
+  assert_approx_equals(pixel[1], pixel_expected[1], 2);
+  assert_approx_equals(pixel[2], pixel_expected[2], 2);
+  assert_approx_equals(pixel[3], pixel_expected[3], 2);
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.html
new file mode 100644
index 0000000000..0433ae38c7
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.to.srgb.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.color.space.p3.to.srgb</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.color.space.p3.to.srgb</h1>
+<p class="desc">test getImageData with srsb and uint8 from display p3 uint8 canvas</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("test getImageData with srsb and uint8 from display p3 uint8 canvas");
+_addTest(function(canvas, ctx) {
+
+  var color_style = 'rgb(50, 100, 150)';
+  var pixel_expected = [50, 100, 150, 255];
+  var epsilon = 2;
+  ctx.fillStyle = color_style;
+  ctx.fillRect(0, 0, 10, 10);
+
+  var pixel = ctx.getImageData(5, 5, 1, 1, {colorSpace: "srgb", storageFormat: "uint8"}).data;
+  _assertSame(pixel.length, pixel_expected.length, "pixel.length", "pixel_expected.length");
+  assert_approx_equals(pixel[0], pixel_expected[0], 2);
+  assert_approx_equals(pixel[1], pixel_expected[1], 2);
+  assert_approx_equals(pixel[2], pixel_expected[2], 2);
+  assert_approx_equals(pixel[3], pixel_expected[3], 2);
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html
new file mode 100644
index 0000000000..1a44af20a6
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.p3.canvas.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.toBlob.p3.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.color.space.p3.toBlob.p3.canvas</h1>
+<p class="desc">test if toblob returns p3 data from p3 color space canvas</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("test if toblob returns p3 data from p3 color space canvas");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = "rgba(155, 27, 27, 1)";
+  ctx.fillRect(0, 0, 1, 1);
+  ctx.fillStyle = "rgba(27, 155, 27, 0)";
+  ctx.fillRect(1, 0, 1, 1);
+  ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+  ctx.fillRect(0, 1, 1, 1);
+  ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+  ctx.fillRect(1, 1, 1, 1);
+  expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+
+  var image = new Image();
+  image.onload = t.step_func_done(function() {
+      var dstCanvas = document.createElement("canvas");
+      dstCanvas.width = 2;
+      dstCanvas.height = 2;
+      var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"});
+      ctx.drawImage(image, 0, 0);
+      var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+      assert_array_approx_equals(actualPixels, expectedPixels, 2);
+  });
+
+  canvas.toBlob(function(blob) {
+      var urlCreator = window.URL || window.webkitURL;
+      image.src = urlCreator.createObjectURL(blob);
+  }, 'image/png', 1);
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html
new file mode 100644
index 0000000000..a53de72259
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toBlob.with.putImageData.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
+<title>Canvas test: 2d.color.space.p3.toBlob.with.putImageData</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.color.space.p3.toBlob.with.putImageData</h1>
+<p class="desc">Use putImageData to put some p3 data in canvas and test if toBlob returns the same data</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("Use putImageData to put some p3 data in canvas and test if toBlob returns the same data");
+_addTest(function(canvas, ctx) {
+
+  canvas.width = 2;
+  canvas.height = 2;
+
+  // Create an ImageData using createImageData and populate its data array.
+  var image_data = ctx.createImageData(canvas.width, canvas.height, {colorSpace: "display-p3"});
+  var color_data = [[255, 100, 150, 1.0], [255, 100, 150, 0.5],
+                   [255, 100, 150, 0.5], [255, 100, 150, 0]];
+  var data = image_data.data;
+  for (var i = 0; i < data.length / 4; ++i) {
+    data[4*i + 0] = color_data[i][0];
+    data[4*i + 1] = color_data[i][1];
+    data[4*i + 2] = color_data[i][2];
+    data[4*i + 3] = color_data[i][3];
+  }
+  ctx.putImageData(image_data, 0, 0);
+  expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+
+  var image = new Image();
+  image.onload = t.step_func_done(function() {
+      var dstCanvas = document.createElement("canvas");
+      dstCanvas.width = 2;
+      dstCanvas.height = 2;
+      var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"});
+      ctx.drawImage(image, 0, 0);
+      var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+      assert_array_approx_equals(actualPixels, expectedPixels, 2);
+  });
+  canvas.toBlob(function(blob) {
+      var urlCreator = window.URL || window.webkitURL;
+      image.src = urlCreator.createObjectURL(blob);
+  }, 'image/png', 1);
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.html
new file mode 100644
index 0000000000..e0986cb8e8
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.jpeg.p3.canvas.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.color.space.p3.toDataURL.jpeg.p3.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.color.space.p3.toDataURL.jpeg.p3.canvas</h1>
+<p class="desc">test if toDataURL('image/jpeg') returns p3 data from canvas with p3 color space</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("test if toDataURL('image/jpeg') returns p3 data from canvas with p3 color space");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = "rgba(155, 27, 27, 1)";
+  ctx.fillRect(0, 0, 1, 1);
+  ctx.fillStyle = "rgba(27, 155, 27, 0)";
+  ctx.fillRect(1, 0, 1, 1);
+  ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+  ctx.fillRect(0, 1, 1, 1);
+  ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+  ctx.fillRect(1, 1, 1, 1);
+  expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+
+  var image = new Image();
+  image.onload = t.step_func_done(function() {
+      var dstCanvas = document.createElement("canvas");
+      dstCanvas.width = 2;
+      dstCanvas.height = 2;
+      var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"});
+      ctx.drawImage(image, 0, 0);
+      var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+      assert_array_approx_equals(actualPixels, expectedPixels, 2);
+  });
+  image.src = canvas.toDataURL("image/jpeg");
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.html
new file mode 100644
index 0000000000..94ba703980
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.p3.canvas.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.color.space.p3.toDataURL.p3.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.color.space.p3.toDataURL.p3.canvas</h1>
+<p class="desc">test if toDataURL returns p3 data from canvas with p3 color space</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("test if toDataURL returns p3 data from canvas with p3 color space");
+_addTest(function(canvas, ctx) {
+
+  ctx.fillStyle = "rgba(155, 27, 27, 1)";
+  ctx.fillRect(0, 0, 1, 1);
+  ctx.fillStyle = "rgba(27, 155, 27, 0)";
+  ctx.fillRect(1, 0, 1, 1);
+  ctx.fillStyle = "rgba(27, 27, 155, 0.5)";
+  ctx.fillRect(0, 1, 1, 1);
+  ctx.fillStyle = "rgba(27, 27, 27, 0.5)";
+  ctx.fillRect(1, 1, 1, 1);
+  expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+
+  var image = new Image();
+  image.onload = t.step_func_done(function() {
+      var dstCanvas = document.createElement("canvas");
+      dstCanvas.width = 2;
+      dstCanvas.height = 2;
+      var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"});
+      ctx.drawImage(image, 0, 0);
+      var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+      assert_array_approx_equals(actualPixels, expectedPixels, 2);
+  });
+  image.src = canvas.toDataURL();
+
+}, {colorSpace: "display-p3"});
+</script>
+
diff --git a/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.html b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.html
new file mode 100644
index 0000000000..58d0718eba
--- /dev/null
+++ b/testing/web-platform/tests/html/canvas/element/wide-gamut-canvas/2d.color.space.p3.toDataURL.with.putImageData.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.color.space.p3.toDataURL.with.putImageData</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.color.space.p3.toDataURL.with.putImageData</h1>
+<p class="desc">Use putImageData to put some p3 data in canvas and test if toDataURL returns the same data</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("Use putImageData to put some p3 data in canvas and test if toDataURL returns the same data");
+_addTest(function(canvas, ctx) {
+
+  canvas.width = 2;
+  canvas.height = 2;
+
+  // Create an ImageData using createImageData and populate its data array.
+  var image_data = ctx.createImageData(canvas.width, canvas.height, {colorSpace: "display-p3"});
+  var color_data = [[255, 100, 150, 1.0], [255, 100, 150, 0.5],
+                   [255, 100, 150, 0.5], [255, 100, 150, 0]];
+  var data = image_data.data;
+  for (var i = 0; i < data.length / 4; ++i) {
+    data[4*i + 0] = color_data[i][0];
+    data[4*i + 1] = color_data[i][1];
+    data[4*i + 2] = color_data[i][2];
+    data[4*i + 3] = color_data[i][3];
+  }
+  ctx.putImageData(image_data, 0, 0);
+  expectedPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+
+  var image = new Image();
+  image.onload = t.step_func_done(function() {
+      var dstCanvas = document.createElement("canvas");
+      dstCanvas.width = 2;
+      dstCanvas.height = 2;
+      var ctx = dstCanvas.getContext('2d', {colorSpace: "display-p3"});
+      ctx.drawImage(image, 0, 0);
+      var actualPixels = ctx.getImageData(0, 0, 2, 2, {colorSpace: "display-p3"}).data;
+      assert_array_approx_equals(actualPixels, expectedPixels, 2);
+  });
+  image.src = canvas.toDataURL();
+
+}, {colorSpace: "display-p3"});
+</script>
+
-- 
cgit v1.2.3