third_party/WebKit/LayoutTests/compositing/masks/layer-mask-placement.html - Issue 1416793004: Remove support for -webkit-canvas and Document.getCSSCanvasContext.

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: third_party/WebKit/LayoutTests/compositing/masks/layer-mask-placement.html

Issue 1416793004: Remove support for -webkit-canvas and Document.getCSSCanvasContext. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Created 5 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « android_webview/tools/WebViewShell/test/webexposed/global-interface-listing-expected.txt ('k') | third_party/WebKit/LayoutTests/compositing/masks/layer-mask-placement-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2 <html>

3 <head>

4 <style>

5 .box {

6 position: absolute;

7 width: 100px;

8 height: 100px;

9 margin: 10px;

10 background-color: green;

11 }

12

13 .test {

14 -webkit-mask-image: -webkit-canvas(viewport-mask);

15 -webkit-mask-position: 50% 50%;

16 }

17

18 .composited {

19 transform: translateZ(0);

20 }

21

22 .indicator {

23 background-color: red;

24 }

25

26 .outlined {

27 outline: 40px solid transparent;

28 }

29 </style>

30 <script>

31 if (window.testRunner)

32 testRunner.dumpAsTextWithPixelResults();

33

34 function drawMask()

35 {

36 var canvasWidth = 100;

37 var canvasHeight = 100;

38 var ctx = document.getCSSCanvasContext('2d', 'viewport-mask', canvasWidth, canvasHeight)

39 ctx.fillStyle = "rgba(0, 0, 0, 1)";

40 ctx.fillRect(0, 0, canvasWidth, canvasHeight);

41 }

42

43 window.addEventListener('load', drawMask, false);

44 </script>

45 </head>

46 <body>

47 <!-- You should see two green boxes side by side, and no red. -->

48 <div class="indicator box" style="left: 10px;"></div>

49 <div class="indicator box" style="left: 120px;"></div>

50

51 <div class="test box" style="left: 10px;"></div>

52 <div class="composited test box" style="left: 120px"></div>

53

54 <div class="outlined"></div>

55 </body>

56 </html>

OLD	NEW