Fix errors in wpt/css/css-masking/* tests

clip-path-svg-content/clip-path-clip-rule-008.svg:
  Add missing reference (reference/clip-path-clip-rule-004-ref.svg).

clip-path-svg-content/clip-path-css-transform-002.svg:
  Adjust translation to match reference.

clip-path-svg-content/clip-path-dom-href.svg:
  Do setAttribute(...) on the correct <g>.

clip-path/clip-path-element-userSpaceOnUse-002.html:
  Shrink the clip-path so that it clips out the border, to match the
  reference.

clip-path/clip-path-ellipse-002.html:
clip-path/clip-path-ellipse-003.html:
clip-path/clip-path-ellipse-004.html:
clip-path/clip-path-ellipse-005.html:
  Adjust the description text so that it matches the reference.

clip-path/clip-path-ellipse-006.html:
  Use a different reference (reference/clip-path-ellipse-ref.html), and
  adjust the target <div> such that it matches the reference (replacing
  the red border with a margin.)

clip-path/clip-path-ellipse-007.html:
clip-path/clip-path-ellipse-008.html:
  Replace red border with a margin.

clip-path/clip-path-polygon-001.html:
clip-path/clip-path-polygon-002.html:
clip-path/clip-path-polygon-003.html:
  Adjust the description text so that it matches the reference.

clip-path/clip-path-polygon-004.html:
  Fix typo in assertion.

clip-path/clip-path-polygon-005.html:
  Adjust the description text so that it matches the reference.

Bug: 626703, 843084
Change-Id: I09c37cbe80ca3b82478bdd994ae027e9a72f280c
Reviewed-on: https://chromium-review.googlesource.com/1071529Reviewed-by: Stephen Chenney <schenney@chromium.org>
Commit-Queue: Fredrik Söderquist <fs@opera.com>
Cr-Commit-Position: refs/heads/master@{#561880}

third_party/WebKit/LayoutTests/TestExpectations

@@ -2911,8 +2911,6 @@ crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftest
 crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-circle-045.html [ Failure ]
 crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-border-box-border-radius-005.html [ Failure ]
 crbug.com/626703 external/wpt/css/vendor-imports/mozilla/mozilla-central-reftests/shapes1/shape-outside-ellipse-049.html [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-002.html [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-005.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-007.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-circle-008.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-012.html [ Failure ]
@@ -2926,21 +2924,15 @@ crbug.com/626703 external/wpt/css/css-masking/clip-path-svg-content/mask-userspa
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-ellipse-004.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-011.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-013.html [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-002.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path-svg-content/mask-userspaceonuse-content-clip-transform.svg [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-003.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-009.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-circle-005.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-ellipse-002.html [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-003.html [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-001.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-ellipse-005.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-ellipse-006.html [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-circle-004.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-polygon-010.html [ Failure ]
-crbug.com/626703 external/wpt/css/css-masking/clip-path-svg-content/clip-path-clip-rule-008.svg [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path/clip-path-circle-006.html [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/clip-path-svg-content/clip-path-shape-circle-003.svg [ Failure ]
 crbug.com/626703 external/wpt/css/css-masking/test-mask.html [ Failure ]

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path-svg-content/clip-path-css-transform-002.svg

@@ -11,10 +11,10 @@
 	cause masking in some implementations. A green square should be
 	visible.</desc>
 </g>
-<clipPath id="clip1" style="transform: scale(10) translate(2px, 2px);">
+<clipPath id="clip1" style="transform: scale(10) translate(5px, 5px);">
 	<rect width="10" height="10"/>
 	<!-- Second rect may cause masking -->
 	<rect width="5" height="4"/>
 </clipPath>
 <rect width="200" height="200" fill="green" clip-path="url(#clip1)"/>
-</svg>
\ No newline at end of file
+</svg>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path-svg-content/clip-path-dom-href.svg

@@ -14,12 +14,12 @@
 	<rect width="200" height="200"/>
 </clipPath>
 
-<g clip-path="url(#noclip)">
+<g clip-path="url(#noclip)" id="target">
 	<rect width="400" height="400" fill="red"/>
 	<rect width="200" height="200" fill="green"/>
 </g>
 
 <script>
-document.getElementsByTagName("g")[0].setAttribute("clip-path", "url(#clip1)");
+document.getElementById("target").setAttribute("clip-path", "url(#clip1)");
 </script>
 </svg>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path-svg-content/reference/clip-path-clip-rule-004-ref.svg

+<svg xmlns="http://www.w3.org/2000/svg">
+  <polygon points="0 0, 150 0, 150 150, 0 150, 0 25, 125 25, 125 125, 25 125, 25 25, 0 25" fill-rule="evenodd" fill="green"/>
+  <polygon points="50 50, 200 50, 200 200, 50 200, 50 75, 175 75, 175 175, 75 175, 75 75, 50 75" fill-rule="evenodd" fill="green"/>
+</svg>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-element-userSpaceOnUse-002.html

@@ -11,13 +11,13 @@
         On pass you should see a green with a blue border.">
 </head>
 <body>
-    <p>The test passes if there is a green box with a blue border.</p>
-    <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green; clip-path: url(#clip);"></div>
+    <p>The test passes if there is a green box.</p>
+    <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: url(#clip);"></div>
 
     <svg>
         <clipPath id="clip">
-            <rect x="0" y="0" width="250px" height="200" />
+            <rect x="50" y="50" width="150px" height="100" />
         </clipPath>
     </svg>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-ellipse-002.html

@@ -13,7 +13,7 @@
 	On pass you should see a green ellipse.">
 </head>
 <body>
-	<p>The test passes if there is a green ellipse.</p>
+	<p>The test passes if there is a full green ellipse.</p>
 	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(30% 25% at 50% 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-ellipse-003.html

@@ -13,7 +13,7 @@
 	On pass there should be a full green circle.">
 </head>
 <body>
-	<p>The test passes if there is a green circle.</p>
+	<p>The test passes if there is a full green circle.</p>
 	<div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(50% 50% at 50% 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-ellipse-004.html

@@ -11,7 +11,7 @@
 	should see a green ellipse.">
 </head>
 <body>
-	<p>The test passes if there is a green ellipse.</p>
+	<p>The test passes if there is a full green ellipse.</p>
 	<div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(75px 50px at 125px 100px);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-ellipse-005.html

@@ -14,7 +14,7 @@
 	see a green ellipse.">
 </head>
 <body>
-	<p>The test passes if there is a green ellipse.</p>
+	<p>The test passes if there is a full green ellipse.</p>
 	<div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(37.5% 25% at 62.5% 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-ellipse-006.html

@@ -5,13 +5,13 @@
 	<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
 	<link rel="help" href="http://www.w3.org/TR/css-masking-1/#clipping-paths">
 	<link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
-	<link rel="match" href="reference/clip-path-circle-ref.html">
+	<link rel="match" href="reference/clip-path-ellipse-ref.html">
 	<meta name="assert" content="The clip-path property takes the basic shape
 	'ellipse' for clipping. Test absolute values for radii and position
 	arguments. On pass you should see a green circle.">
 </head>
 <body>
-	<p>The test passes if there is a green circle.</p>
-	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse();"></div>
+	<p>The test passes if there is a full green ellipse.</p>
+	<div style="width: 150px; height: 100px; position: absolute; margin: 50px; background-color: green; clip-path: ellipse();"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-ellipse-007.html

@@ -13,6 +13,6 @@
 </head>
 <body>
 	<p>The test passes if there is a full green ellipse.</p>
-	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(farthest-side closest-side);"></div>
+	<div style="width: 150px; height: 100px; position: absolute; margin: 50px; background-color: green; clip-path: ellipse(farthest-side closest-side);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-ellipse-008.html

@@ -16,6 +16,6 @@
 </head>
 <body>
 	<p>The test passes if there is a full green ellipse.</p>
-	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(50% 50%);"></div>
+	<div style="width: 150px; height: 100px; position: absolute; margin: 50px; background-color: green; clip-path: ellipse(50% 50%);"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-polygon-001.html

@@ -11,7 +11,7 @@
 	see a green square and no red.">
 </head>
 <body>
-	<p>The test passes if there is a green square and no red.</p>
+	<p>The test passes if there is a green box.</p>
 	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-polygon-002.html

@@ -14,7 +14,7 @@
 	green square and no red.">
 </head>
 <body>
-	<p>The test passes if there is a green square and no red.</p>
+	<p>The test passes if there is a green box.</p>
 	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-polygon-003.html

@@ -11,7 +11,7 @@
 	pass you should see a green square and no red.">
 </head>
 <body>
-	<p>The test passes if there is a green square and no red.</p>
+	<p>The test passes if there is a green box.</p>
 	<div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; position: absolute; clip-path: polygon(20% 50px, 200px 25%, 200px 150px, 20% 75%)"></div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-polygon-004.html

@@ -7,7 +7,7 @@
 	<link rel="help" href="http://www.w3.org/TR/css-masking-1/#propdef-clip-path">
 	<link rel="match" href="reference/clip-path-rectangle-border-ref.html">
 	<meta name="assert" content="The clip-path property takes the basic shape 'polygon' for clipping.
-		The point list for the polygon creates a 'whole' with the dimension of the background. With
+		The point list for the polygon creates a 'hole' with the dimension of the background. With
 		the fill rule 'evenodd', this whole is clipped out. The clipping makes the green background
 		of the parent div box visible.
 		On pass you should see a green box with a blue border.">
@@ -18,4 +18,4 @@
 		<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div>
 	</div>
 </body>
-</html>
\ No newline at end of file
+</html>

third_party/WebKit/LayoutTests/external/wpt/css/css-masking/clip-path/clip-path-polygon-005.html

@@ -14,9 +14,9 @@
 	square with a blue border.">
 </head>
 <body>
-	<p>The test passes if there is a green square with a blue border.</p>
+	<p>The test passes if there is a green box with a blue border.</p>
 	<div style="background-color: green; width: 250px;">
 		<div style="width: 150px; height: 100px; border: solid blue 50px; background-color: red; clip-path: polygon(nonzero, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 50px 50px, 50px 150px, 200px 150px, 200px 50px, 0 50px)"></div>
 	</div>
 </body>
-</html>
\ No newline at end of file
+</html>