Able to reproduce the issue on Windows 7, Ubuntu 14.04 and Mac OS 10.11.4 using chrome latest canary M52-52.0.2705.0. Observed the area filed with extra colors from the pattern edges as shown in the above snapshot. 

This is a non-regression issue seen from past M35-35.0.1851.0, Hence marking it as untriaged.

The test html is here (https://jsfiddle.net/hymkgLbh/2/). 

It looks like the translate and fillStyle with pattern interfere with each other. When I move the translate before rect, it works fine. When I set fillStyle to be color, it fills the whole canvas regardless of the translation.

According to the spec, "The transformation matrix is applied to coordinates when creating the current path, and when painting text, shapes, and paths, on CanvasRenderingContext2D objects." "When rendered, however, patterns must actually be painted only where the stroking or filling effect requires that they be drawn, and the repeated pattern must be affected by the current transformation matrix. Pixels not covered by the repeating pattern (if the repeat string was not specified) must be transparent black."

It seems like fillStyle=pattern and fillStyle=color works differently when the path is transformed. But exactly how it is supposed to work do not look clear to me.

fillStyle=pattern and fillStyle=color do not really work differently.  The transform is simply irrelevant on a style that is a solid color: an infinite uniformly colored plane is invariant to transforms.

What exactly do you find unclear?  The way I interpret the spec is that the style and the primitive follow the same transform, so they should not move with respect to each other.

I guess you want to say "path" and "primitive" goes together with transformation. I now see where the implementation problem lies.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d

commit c2635f87e413ac3f81a81ac1e37fce54fdc8d26d
Author: xlai <xlai@chromium.org>
Date: Fri Jul 08 21:18:53 2016

Correct color bleeding of no-repeat pattern in canvas2d

Currently the image pattern shader created is only padded
with 1 black transparent pixel right and bottom. We should
pad it on the left and top as well so that when pattern is
transformed, the color on its left and top will not bleed.

BUG= 602509 

Review-Url: https://codereview.chromium.org/2130063002
Cr-Commit-Position: refs/heads/master@{#404491}

[modify] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/LayoutTests/TestExpectations
[modify] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/LayoutTests/canvas/philip/tests/2d.pattern.paint.norepeat.coord3-expected.txt
[modify] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/LayoutTests/canvas/philip/tests/2d.pattern.paint.repeatx.coord1-expected.txt
[modify] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/LayoutTests/canvas/philip/tests/2d.pattern.paint.repeaty.coord1-expected.txt
[add] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/LayoutTests/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png
[add] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/LayoutTests/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.txt
[add] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/LayoutTests/fast/canvas/canvas-pattern-no-repeat-with-transformations.html
[modify] https://crrev.com/c2635f87e413ac3f81a81ac1e37fce54fdc8d26d/third_party/WebKit/Source/platform/graphics/ImagePattern.cpp

Verified the rendering result on the Win Canary and the color no longer bleeds.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/fa81bdf8aab522be1930d2680e6d186755a12661

commit fa81bdf8aab522be1930d2680e6d186755a12661
Author: Rebaseline Bot <blink-rebaseline-bot@chromium.org>
Date: Tue Jul 12 00:29:52 2016

Auto-rebaseline for r404491

https://chromium.googlesource.com/chromium/src/+/c2635f87e

BUG= 602509 
TBR=xlai@chromium.org

Review URL: https://codereview.chromium.org/2139023003 .

Cr-Commit-Position: refs/heads/master@{#404751}

[modify] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/TestExpectations
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/android/fast/canvas/image-object-in-canvas-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/android/virtual/display_list_2d_canvas/fast/canvas/image-object-in-canvas-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/android/virtual/gpu/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/linux-precise/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/linux-precise/fast/canvas/image-object-in-canvas-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/linux-precise/virtual/gpu/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png
[modify] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/linux/fast/canvas/image-object-in-canvas-expected.png
[modify] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/linux/virtual/display_list_2d_canvas/fast/canvas/image-object-in-canvas-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/linux/virtual/gpu/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png
[modify] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/mac/fast/canvas/image-object-in-canvas-expected.png
[modify] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/mac/virtual/display_list_2d_canvas/fast/canvas/image-object-in-canvas-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/mac/virtual/gpu/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png
[modify] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/win/fast/canvas/image-object-in-canvas-expected.png
[modify] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/win/virtual/display_list_2d_canvas/fast/canvas/image-object-in-canvas-expected.png
[add] https://crrev.com/fa81bdf8aab522be1930d2680e6d186755a12661/third_party/WebKit/LayoutTests/platform/win/virtual/gpu/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/ba785a6c45cac446073ba0ecabb06c5fdb850706

commit ba785a6c45cac446073ba0ecabb06c5fdb850706
Author: engedy <engedy@chromium.org>
Date: Tue Jul 12 18:27:17 2016

Rebaseline canvas-pattern-no-repeat-with-transformations.html.

Rebaseline expectations for:
  fast/canvas/canvas-pattern-no-repeat-with-transformations.html
on WebKit Linux Trusty with --enable-display-list-2d-canvas.

BUG= 602509 
NOTRY=true
TBR=xlai@chromium.org

Review-Url: https://codereview.chromium.org/2144703002
Cr-Commit-Position: refs/heads/master@{#404817}

[add] https://crrev.com/ba785a6c45cac446073ba0ecabb06c5fdb850706/third_party/WebKit/LayoutTests/platform/linux-precise/virtual/display_list_2d_canvas/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b9c478fb71789df6d9c442197f3e5589929d427d

commit b9c478fb71789df6d9c442197f3e5589929d427d
Author: xlai <xlai@chromium.org>
Date: Tue Jul 12 23:37:09 2016

Mark two canvas tests as need rebaseline on Linux due to Skia change.

A recent Skia change that increases draw batching has resulted in minor pixel
diff.

TBR=junov@chromium.org
BUG= 602509 
NOTRY=true
NOPRESUBMIT=true

Review-Url: https://codereview.chromium.org/2142273002
Cr-Commit-Position: refs/heads/master@{#404859}

[modify] https://crrev.com/b9c478fb71789df6d9c442197f3e5589929d427d/third_party/WebKit/LayoutTests/TestExpectations

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/521a027c664a507d971416e1587dbd199492c969

commit 521a027c664a507d971416e1587dbd199492c969
Author: Rebaseline Bot <blink-rebaseline-bot@chromium.org>
Date: Wed Jul 13 01:02:47 2016

Auto-rebaseline for r404859

https://chromium.googlesource.com/chromium/src/+/b9c478fb7

BUG= 602509 
TBR=xlai@chromium.org

Review URL: https://codereview.chromium.org/2148653002 .

Cr-Commit-Position: refs/heads/master@{#404868}

[modify] https://crrev.com/521a027c664a507d971416e1587dbd199492c969/third_party/WebKit/LayoutTests/TestExpectations
[delete] https://crrev.com/af2f49ba57ed217d06e69830f325c9ba7e7ce0bd/third_party/WebKit/LayoutTests/platform/linux-precise/fast/canvas/canvas-pattern-no-repeat-with-transformations-expected.png
[delete] https://crrev.com/af2f49ba57ed217d06e69830f325c9ba7e7ce0bd/third_party/WebKit/LayoutTests/platform/linux-precise/fast/canvas/image-object-in-canvas-expected.png

 Issue 652096  has been merged into this issue.