Skip to content

Instantly share code, notes, and snippets.

@gsnedders

gsnedders/430.diff

Created April 5, 2017 16:54
Show Gist options
  • Save gsnedders/99673059da665c751cc7364508eb6ca3 to your computer and use it in GitHub Desktop.
Save gsnedders/99673059da665c751cc7364508eb6ca3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
430.diff
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-001.html b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-001.html
index 8c3e27beda..ca1e60b17b 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-001.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-001.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and ellipse function with absolute values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-ellipse-ref.html">
@@ -12,6 +14,6 @@
</head>
<body>
<p>The test passes if there is a green ellipse.</p>
- <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: ellipse(125px, 100px, 75px, 50px);"></div>
+ <div style="width: 150px; height: 100px; background-color: green; clip-path: ellipse();"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-003.html b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-003.html
index 5b395ddc05..de092994df 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-003.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-003.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and ellipse function with percentage values on square</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-circle-ref.html">
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-004.html b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-004.html
index b80665bf48..e27e1662de 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-004.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-004.html
@@ -1,17 +1,23 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and ellipse function with different absolute values on square</title>
+ <title>CSS Masking: Test clip-path property and polygon function with fill rule evenodd</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <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 arguments. Different values for getting an ellipse from a square.
- On pass you should see a green ellipse.">
+ <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 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.">
</head>
<body>
- <p>The test passes if there is a green ellipse.</p>
- <div style="width: 200px; height: 200px; background-color: green; clip-path: ellipse(125px, 100px, 75px, 50px);"></div>
+ <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: green; 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
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-005.html b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-005.html
index dd5908e3f4..ae9fc4f9a3 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-005.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-ellipse-005.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and ellipse function with different percentage values on square</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-ellipse-ref.html">
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-001.html b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-001.html
index dd2b086019..99fce915d4 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-001.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-001.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and polygon function with absolute values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-rectangle-ref.html">
@@ -12,6 +14,6 @@
</head>
<body>
<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>
+ <div style="width: 150px; height: 100px; background-color: green; clip-path: polygon(50px 50px, 200px 50px, 200px 150px, 50px 150px)"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-002.html b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-002.html
index 1706295dea..28d5cb3480 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-002.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-002.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and polygon function with percentage values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-rectangle-ref.html">
@@ -12,6 +14,6 @@
</head>
<body>
<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>
+ <div style="width: 150px; height: 100px; background-color: green; clip-path: polygon(20% 25%, 80% 25%, 80% 75%, 20% 75%)"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-003.html b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-003.html
index 2890147972..cd2a8bf8bd 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-003.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-003.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and polygon function with absolute and percentage values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-rectangle-ref.html">
@@ -12,6 +14,6 @@
</head>
<body>
<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>
+ <div style="width: 150px; height: 100px; 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
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-004.html b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-004.html
index e17be882f7..e27e1662de 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-004.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-004.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and polygon function with fill rule evenodd</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-rectangle-border-ref.html">
@@ -15,7 +17,7 @@
<body>
<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(evenodd, 0 0, 250px 0, 250px 200px, 0 200px, 0 50px, 200px 50px, 200px 150px, 50px 150px, 50px 50px, 0 50px)"></div>
+ <div style="width: 150px; height: 100px; border: solid blue 50px; background-color: green; 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
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-005.html b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-005.html
index ba303a1b6b..5055349004 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-005.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-polygon-005.html
@@ -3,6 +3,8 @@
<head>
<title>CSS Masking: Test clip-path property and polygon function with fill rule nonzero</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-rectangle-border-ref.html">
@@ -15,7 +17,7 @@
<body>
<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 style="width: 150px; height: 100px; border: solid blue 50px; 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
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-001.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-001.html
index cfd26a1b08..a2db45e227 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-001.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-001.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with absolute values</title>
+ <title>CSS Masking: Test clip-path property and inset function with absolute values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test absolute values for arguments.
On pass you should see a green box.">
</head>
<body>
<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: rectangle(50px, 50px, 150px, 100px);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: inset(50px 50px 50px 50px) content-box;"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-002.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-002.html
index bcb8191599..8a3ca0f15e 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-002.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-002.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with percentage values</title>
+ <title>CSS Masking: Test clip-path property and inset function with percentage values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test percentage values for arguments. Percentage values are relative to the bounding client rect.
On pass you should see a green box.">
</head>
<body>
<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: rectangle(20%, 25%, 60%, 50%);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: inset(20%, 25%, 60%, 50%); content-box"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-003.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-003.html
index fdbe7355fb..5e259c157c 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-003.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-003.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with absolute and percentage values - 1</title>
+ <title>CSS Masking: Test clip-path property and inset function with absolute and percentage values - 1</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test absolute and percentage values for arguments. Percentage values are relative to the bounding client rect.
On pass you should see a green box.">
</head>
<body>
<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: rectangle(50px, 50px, 60%, 50%);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: inset(50px, 50px, 60%, 50%) content-box;"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-004.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-004.html
index 7201f391e9..cf62991aef 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-004.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-004.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with absolute and percentage values - 2</title>
+ <title>CSS Masking: Test clip-path property and inset function with absolute and percentage values - 2</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test absolute and percentage values for arguments. Percentage values are relative to the bounding client rect.
On pass you should see a green box.">
</head>
<body>
<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: rectangle(20%, 50px, 150px, 50%);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: inset(20%, 50px, 150px, 50%) content-box;"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-005.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-005.html
index ef3d8a3c90..49fc005afe 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-005.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-005.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with absolute border radius</title>
+ <title>CSS Masking: Test clip-path property and inset function with absolute border radius</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-radius-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-radius-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test absolute values for border radius arguments.
On pass you should see a green box with a border radius on every corner.">
</head>
<body>
<p>The test passes if there is a green box with a border radius on every corner.</p>
- <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: rectangle(50px, 50px, 150px, 100px, 50px, 50px);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: inset(50px, 50px, 150px, 100px, 50px, 50px) content-box;"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-006.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-006.html
index 3fe2c5a18a..a152ef329f 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-006.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-006.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with percentage border radius</title>
+ <title>CSS Masking: Test clip-path property and inset function with percentage border radius</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-radius-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-radius-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test percentage values for border radius arguments.
On pass you should see a green box with a border radius on every corner.">
</head>
<body>
<p>The test passes if there is a green box with a border radius on every corner.</p>
- <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: rectangle(50px, 50px, 150px, 100px, 20%, 25%);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: inset(50px, 50px, 150px, 100px, 20%, 25%) content-box;"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-007.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-007.html
index fdf6e275b3..957a661d90 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-007.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-007.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with absolute and percentage border radius - 1</title>
+ <title>CSS Masking: Test clip-path property and inset function with absolute and percentage border radius - 1</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-radius-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-radius-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test absolute and percentage values for border radius arguments.
On pass you should see a green box with a border radius on every corner.">
</head>
<body>
<p>The test passes if there is a green box with a border radius on every corner.</p>
- <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: rectangle(50px, 50px, 150px, 100px, 50px, 25%);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: (50px, 50px, 150px, 100px, 50px, 25%) content-box;"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-008.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-008.html
index 19f43c007e..fc824d7a78 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-008.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-008.html
@@ -1,17 +1,19 @@
<!DOCTYPE html>
<html>
<head>
- <title>CSS Masking: Test clip-path property and rectangle function with absolute and percentage border radius - 1</title>
+ <title>CSS Masking: Test clip-path property and inset function with absolute and percentage border radius - 1</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
- <link rel="match" href="reference/clip-path-rectangle-radius-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <link rel="match" href="reference/clip-path-inset-radius-ref.html">
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test absolute and percentage values for border radius arguments.
On pass you should see a green box with a border radius on every corner.">
</head>
<body>
<p>The test passes if there is a green box with a border radius on every corner.</p>
- <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: rectangle(50px, 50px, 150px, 100px, 20%, 50px);"></div>
+ <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: inset(50px, 50px, 150px, 100px, 20%, 50px) content-box;"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-009.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-009.html
index 2272b791f1..5743cfd3af 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-009.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-009.html
@@ -3,15 +3,17 @@
<head>
<title>CSS Masking: Test clip-path property and rectangle function with too big radius in percentage values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-circle-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test percentage radii arguments. Radii are bigger then half of the object size and must be trimmed.
On pass you should see a green circle.">
</head>
<body>
<p>The test passes if there is a green circle.</p>
- <div style="width: 200px; height: 200px; background-color: green; clip-path: rectangle(0, 0, 100%, 100%, 100%, 100%);"></div>
+ <div style="width: 200px; height: 200px; background-color: green; border: 50px red solid; clip-path: inset(50px 50px 25% 25% round 50% 50%);"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-010.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-010.html
index 6f7fd1cdae..469ff4456e 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-010.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-010.html
@@ -3,15 +3,17 @@
<head>
<title>CSS Masking: Test clip-path property and rectangle function with too big radius in absolute values</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-circle-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <meta name="assert" content="The clip-path property takes the shape 'inset' for clipping.
Test absolute radii arguments. Radii are bigger then half of the object size and must be trimmed.
On pass you should see a green circle.">
</head>
<body>
<p>The test passes if there is a green circle.</p>
- <div style="width: 200px; height: 200px; background-color: green; clip-path: rectangle(0, 0, 100%, 100%, 200px, 200px);"></div>
+ <div style="width: 200px; height: 200px; border: 50px red solid; background-color: green; clip-path: inset(10px 190px 20% 20% round 100px 100px);"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-011.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-011.html
index 93b4846240..e3f95a7b3a 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-011.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-011.html
@@ -3,15 +3,17 @@
<head>
<title>CSS Masking: Test clip-path property and rectangle function with percentage elliptical radii</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-ellipse-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <meta name="assert" content="The clip-path property takes the basic shape 'inset' for clipping.
Test percentage elliptical radii.
On pass you should see a green ellipse.">
</head>
<body>
<p>The test passes if there is a green ellipse.</p>
- <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: rectangle(50px, 50px, 150px, 100px, 50%, 50%);"></div>
+ <div style="width: 250px; height: 400px; border: solid red 50px; background-color: green; clip-path: inset(5px 250px 150px 350px round 50% 50%);"></div>
</body>
</html>
\ No newline at end of file
diff --git a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-012.html b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-012.html
index 2a822642d2..0ee38c54b5 100644
--- a/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-012.html
+++ b/contributors/adobe/submitted/masking/clip-path/clip-path-rectangle-012.html
@@ -3,15 +3,17 @@
<head>
<title>CSS Masking: Test clip-path property and rectangle function with absolute elliptical radii</title>
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
+ <link rel="author" title="Denise White" href="mailto:denisegwhite@outlook.com">
+ <link rel="author" title="Laury Kenton" href="mailto:webshiva@mac.com">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clipping-paths">
<link rel="help" href="http://www.w3.org/TR/css-masking/#clip-path-property">
<link rel="match" href="reference/clip-path-ellipse-ref.html">
- <meta name="assert" content="The clip-path property takes the basic shape 'rectangle' for clipping.
+ <meta name="assert" content="The clip-path property takes the shape 'inset' for clipping.
Test absolute elliptical radii.
On pass you should see a green ellipse.">
</head>
<body>
<p>The test passes if there is a green ellipse.</p>
- <div style="width: 150px; height: 100px; border: solid red 50px; background-color: green; clip-path: rectangle(50px, 50px, 150px, 100px, 75px, 50px);"></div>
+ <div style="width: 155px; height: 400px; border: solid red 50px; background-color: green; clip-path: inset(10px 150px 300px 100px round 75px 50px);"></div>
</body>
</html>
\ No newline at end of file
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment