mirror of
https://github.com/servo/servo.git
synced 2025-08-26 07:38:21 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle 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-1/#clipping-paths">
|
||||
<link rel="help" href="http://www.w3.org/TR/css-masking-1/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test absolute values for arguments. On pass you
|
||||
should see a green circle and no red.">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle();"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle function with percentage values</title>
|
||||
<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/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test percentage values for arguments. If no
|
||||
reference box was specified, percentage is relative to border-box. On pass
|
||||
there should be a green circle.">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50% at 50% 50%);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle function with percentage radius</title>
|
||||
<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/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test percentage value as argument for radius and no
|
||||
position arguments. The circle should be in the center of the element. On
|
||||
pass there should be a green circle.">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(50%);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle function with percentage position</title>
|
||||
<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/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. Test percentage value as argument for position and
|
||||
no radius argument. The circle must behave like it has a radius of
|
||||
'closest-side'. On pass there should be a green circle.">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(at 50%);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle function with closest-side</title>
|
||||
<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/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The circle has a radius of 'closest-side'. This test
|
||||
has a squred div-box. Therefore, 'closest-side', 50% and 'farthest-side'
|
||||
show the same behavior. On pass there should be a green circle.">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(closest-side);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle function with farthest-side</title>
|
||||
<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/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The circle has a radius of 'farthest-side'. This
|
||||
test has a squred div-box. Therefore, 'closest-side', 50% and
|
||||
'farthest-side' show the same behavior. On pass there should be a green
|
||||
circle.">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; background-color: green; clip-path: circle(farthest-side);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle with closest-side on rectangular div 1</title>
|
||||
<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/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-2-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The clipped div box is twice as wide as it is
|
||||
height. With 'closest-side', there should be a full green circle.">
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 400px; height: 200px; background-color: green; clip-path: circle(closest-side);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and circle with closest-side on rectangular div 2</title>
|
||||
<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/#the-clip-path">
|
||||
<link rel="match" href="reference/clip-path-circle-3-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'circle' for clipping. The clipped div box is twice as high as it is
|
||||
wide. With 'closest-side', there should be a full green circle.">
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 400px; background-color: green; clip-path: circle(closest-side);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 1</title>
|
||||
<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="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement">
|
||||
<link rel="match" href="reference/clip-path-rectangle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes an external reference to a clipPath element for clipping.
|
||||
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: url(#clip);"></div>
|
||||
|
||||
<svg>
|
||||
<clipPath id="clip">
|
||||
<rect x="50" y="50" width="150px" height="100" />
|
||||
</clipPath>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse - 2</title>
|
||||
<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="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement">
|
||||
<link rel="match" href="reference/clip-path-rectangle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes an reference to a clipPath element for clipping.
|
||||
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>
|
||||
|
||||
<svg>
|
||||
<clipPath id="clip">
|
||||
<rect x="0" y="0" width="250px" height="200" />
|
||||
</clipPath>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 1</title>
|
||||
<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="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement">
|
||||
<link rel="match" href="reference/clip-path-ref-right-green-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes a reference to a clipPath element for clipping. Percentage values
|
||||
are relative to the viewport for userSpaceOnUse on clipPathUnits.
|
||||
On pass the left half of the site is white and the right half of the site is blue.">
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100%; height: 100%; background-color: green; clip-path: url(#clip); position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is blue.</p>
|
||||
|
||||
<svg>
|
||||
<clipPath id="clip">
|
||||
<rect x="50%" y="0" width="50%" height="100%" />
|
||||
</clipPath>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and external clipPath reference with userSpaceOnUse with percentage - 2</title>
|
||||
<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="help" href="http://www.w3.org/TR/css-masking-1/#ClipPathElement">
|
||||
<link rel="match" href="reference/clip-path-ref-bottom-green-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes a reference to a clipPath element for clipping. Percentage values
|
||||
are relative to the viewport for userSpaceOnUse on clipPathUnits.
|
||||
On pass the top half of the site is white and the bottom half of the site is green.">
|
||||
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100%; height: 100%; background-color: green; clip-path: url(#clip); position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p>
|
||||
|
||||
<svg>
|
||||
<clipPath id="clip">
|
||||
<rect x="0" y="50%" width="100%" height="50%" />
|
||||
</clipPath>
|
||||
</svg>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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-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 ellipse.">
|
||||
</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(75px 50px at 125px 100px);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and ellipse function with percentage values</title>
|
||||
<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-ellipse-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
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: ellipse(30% 25% at 50% 50%);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
On pass there should be a full 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: ellipse(50% 50% at 50% 50%);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and ellipse function with different absolute values on square</title>
|
||||
<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-ellipse-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test absolute values for arguments. On pass you
|
||||
should see a green ellipse.">
|
||||
</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(75px 50px at 125px 100px);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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-ellipse-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
Different values for getting an ellipse from a square. On pass you should
|
||||
see a green ellipse.">
|
||||
</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(37.5% 25% at 62.5% 50%);"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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">
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and ellipse function with no arguments</title>
|
||||
<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-ellipse-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. If no further arguments were specified, the radii
|
||||
are 'closest-side' each. The position is initialised to the center of the
|
||||
element. On pass there is a full green ellipse.">
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path property and ellipse function with 50% 50%</title>
|
||||
<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-ellipse-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'ellipse' for clipping. Test percentage values for radii and position
|
||||
arguments. Percentage values are relative to a reference box. If no
|
||||
reference box was specified, percentage values are relative to border-box.
|
||||
Both radii are specified with percentage values. The position is
|
||||
initialised to the center of the element. On pass there is a full green
|
||||
ellipse.">
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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-rectangle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'polygon' for clipping. Test absolute value arguments. On 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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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-rectangle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'polygon' for clipping. Test percentage values for arguments. Percentage
|
||||
values are relative to specified reference box. If no reference box was
|
||||
specified, percentage values are relative to border-box. A number of
|
||||
percentage values are specified as coordinates. On 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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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-rectangle-ref.html">
|
||||
<meta name="assert" content="The clip-path property takes the basic shape
|
||||
'polygon' for clipping. Test absolute and percentage value arguments. On
|
||||
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>
|
||||
<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>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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-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 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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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="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-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 'hole'
|
||||
with the dimension of the background of the clipped element. With the fill
|
||||
rule 'nonzero', this hole is clipped out. The clipping makes the green
|
||||
background of the parent div box visible. On pass you should see a green
|
||||
square with a blue border.">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square 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>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon with padding-box</title>
|
||||
<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-square-001-ref.html">
|
||||
<meta name="assert" content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'padding-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green square
|
||||
and no red.">
|
||||
</head>
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="clip-path: polygon(0% 0%, 100% 0%, 100px 100%, 0 100px) padding-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon with border-box</title>
|
||||
<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-stripes-001-ref.html">
|
||||
<meta name="assert" content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'border-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size.">
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) border-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon with margin-box</title>
|
||||
<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-stripes-002-ref.html">
|
||||
<meta name="assert" content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'margin-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size.">
|
||||
</head>
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 25px;
|
||||
border-left: lime solid 25px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(12.5% 25%, 37.5% 50px, 75px 50%, 25px 100px) margin-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon with content-box</title>
|
||||
<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-square-002-ref.html">
|
||||
<meta name="assert" content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box 'content-box' for the polygon() function by mixing percentage
|
||||
and absolute values as coordinates. On sucess you should see a green square
|
||||
and no red.">
|
||||
</head>
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 25px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="clip-path: polygon(0% 0px, 50px 0%, 100% 50px, 0px 100%) content-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon with fill-box</title>
|
||||
<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-stripes-001-ref.html">
|
||||
<meta name="assert" content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box. 'fill-box' was specified but is not supported for HTML
|
||||
elements. The used value should be 'border-box' for the polygon() function
|
||||
instead. By mixing percentage and absolute values as coordinates we check
|
||||
the correct used reference box. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size.">
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) fill-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon with stroke-box</title>
|
||||
<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-stripes-001-ref.html">
|
||||
<meta name="assert" content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box. 'stroke-box' was specified but is not supported for HTML
|
||||
elements. The used value should be 'border-box' for the polygon() function
|
||||
instead. By mixing percentage and absolute values as coordinates we check
|
||||
the correct used reference box. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size.">
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) stroke-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon with view-box</title>
|
||||
<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-stripes-001-ref.html">
|
||||
<meta name="assert" content="The clip-path property allows specifying
|
||||
basic shapes and reference boxes. This test checks the usage of the correct
|
||||
reference box. 'view-box' was specified but is not supported for HTML
|
||||
elements. The used value should be 'border-box' for the polygon() function
|
||||
instead. By mixing percentage and absolute values as coordinates we check
|
||||
the correct used reference box. On sucess you should see a green
|
||||
vertical stripe next to a lime green vertical stripe. Both should be of equal
|
||||
size.">
|
||||
<style>
|
||||
div {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: green;
|
||||
padding: 25px;
|
||||
margin: 25px;
|
||||
border: red solid 50px;
|
||||
border-left: lime solid 50px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="clip-path: polygon(0% 25%, 50% 50px, 100px 75%, 0 150px) view-box"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Test clip-path and polygon different units</title>
|
||||
<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-stripes-003-ref.html">
|
||||
<meta name="assert" content="Test the support of different units for
|
||||
polygon coordinates. The test passes if you see a multiple green and blue
|
||||
stripe pairs. For each pair, the blue and green stripe must be of same
|
||||
length.">
|
||||
<style>
|
||||
div {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
div:nth-child(odd) {
|
||||
margin-bottom: 5px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
|
||||
<div style="clip-path: polygon(0 0, 50% 0, 50% 20px, 0 20px)"></div>
|
||||
<div style="width: 50%"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 20em 0, 20em 20px, 0 20px)"></div>
|
||||
<div style="width: 20em"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 50vw 0, 50vw 20px, 0 20px)"></div>
|
||||
<div style="width: 50vw"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 40vh 0, 40vh 20px, 0 20px)"></div>
|
||||
<div style="width: 40vh"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, calc(30% + 15px) 0, calc(30% + 15px) 20px, 0 20px)"></div>
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
|
||||
<div style="clip-path: polygon(0 0, 30ex 0, 30ex 20px, 0 20px)"></div>
|
||||
<div style="width: 30ex"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: absolute; left: 100px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
<style type="text/css">
|
||||
body, div {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green; position: relative; top: 100px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green circle.</p>
|
||||
<div style="width: 200px; height: 200px; border-radius: 100px; background-color: green;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a full green ellipse.</p>
|
||||
<div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; border-top-right-radius: 75px 50px; border-bottom-right-radius: 75px 50px; border-top-left-radius: 75px 50px; border-bottom-left-radius: 75px 50px; background-color: green;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</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;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green box.</p>
|
||||
<div style="margin-top: 50px; margin-left: 50px; position: absolute; width: 150px; height: 100px; background-color: green;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 100%; height: 50%; margin-top: 50%; background-color: green; position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the top half of the site is white and the bottom half of the site is green.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<head>
|
||||
<title>CSS Reftest Reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div style="width: 50%; height: 100%; margin-left: 50%; background-color: green; position: absolute;"></div>
|
||||
<p style="position: absolute;">The test passes if the left half of the site is white and the right half of the site is green.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 100px; height: 100px; background-color: green; margin: 75px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if there is a green square and no red.</p>
|
||||
<div style="width: 50px; height: 50px; background-color: green; margin: 75px;"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="width: 100px; height: 100px; margin: 75px 0 0 25px; background-color: green;">
|
||||
<div style="width: 50px; height: 100px; background-color: lime;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
</head>
|
||||
<body>
|
||||
<p>The test passes if you see a green vertical stripe next to a lime green vertical stripe, both stripes should be of equal size and there should be no red.</p>
|
||||
<div style="width: 50px; height: 50px; margin: 50px 0 0 25px; background-color: green;">
|
||||
<div style="width: 25px; height: 50px; background-color: lime;"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Masking: Reftest reference</title>
|
||||
<link rel="author" title="Dirk Schulze" href="mailto:dschulze@adobe.com">
|
||||
<style>
|
||||
div {
|
||||
height: 20px;
|
||||
background-color: green;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
div:nth-child(odd) {
|
||||
margin-bottom: 5px;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p>The test passes if you see a multiple green and blue stripe pairs. For each pair, the blue and green stripe must be of same length.</p>
|
||||
<div style="width: 50%"></div>
|
||||
<div style="width: 50%"></div>
|
||||
|
||||
<div style="width: 20em"></div>
|
||||
<div style="width: 20em"></div>
|
||||
|
||||
<div style="width: 50vw"></div>
|
||||
<div style="width: 50vw"></div>
|
||||
|
||||
<div style="width: 40vh"></div>
|
||||
<div style="width: 40vh"></div>
|
||||
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
<div style="width: calc(30% + 15px)"></div>
|
||||
|
||||
<div style="width: 30ex"></div>
|
||||
<div style="width: 30ex"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<defs>
|
||||
<clipPath id="clip-path-ref-userSpaceOnUse-001">
|
||||
<rect x="50" y="50" width="150px" height="100" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 220 B |
Loading…
Add table
Add a link
Reference in a new issue